DEV Community: Asher Scott

My last week at Flatiron

Asher Scott — Mon, 30 May 2022 19:29:03 +0000

For the past 14 weeks, I've have been attending a 15 week, full-time online bootcamp at Flatiron School for Software Engineering. While it isn't quite over just yet, I think now is a good time to reflect on my experience and share it with anyone who might be thinking about taking that next big step; plus I still need to write one more blog post to graduate. :)

The Live program, which is the full-time program that I chose; consists of five phases. Each phase is three weeks long.

First is learning week, during this week, you'll spend your time reading, working on lessons, attending lectures, and helping your fellow classmates within your table-group.
Next comes Code Challenge Week, where you are tested on the things you have learned. If you don't like timed tests, worry not, because you have two attempts on all Code Challenges, with the ability to redo ONE phase if don't pass both times. This week also includes everything from week one.
Finally, Project Week! This week, you are paired with a partner to work on a project of your own choosing, you are free to essentially do whatever you want, as long as you meet some very broad requirements. At the end of project week are project presentations, where you present your project to your classmates. I know, I know, presenting anything is usually a massive pain, full of anxiety; but these presentations are extremely laid back, no time requirements, or any requirements at all actually. I can can honestly say that I looked forward to every single project week and presentation.

As for what each phase is about, the course may get reordered or changed every once and awhile, but this is how it was set up when I attended:

Vanilla JavaScript - here you will learn the basics of programming: syntax, data types, iterating through arrays and objects, almost entirely frontend. If your new to programming, this may be the most difficult phase.
React - what it is, how to use it. You'll learning about hooks: useState and useEffect. You'll also be using a backend, but not a real backend. Takes a while to get used to, can be difficult.
Ruby - Third phase is all about the backend, and connecting it to your frontend. This is a difficult phase, lots and lots of information in a very short time: ruby, active record, sql and sinatra.
Ruby on Rails - You've learned how to do everything the long and hard way last phase, now you get rails to do all that for you. You'll also learn Authorization. A pretty laid back phase.
Final Project - This phase is quite different from the previous phases, instead of one week each for learning, testing, and creating; this week entirely consists of you creating your capstone project. This project is done on your own (no partners), and has more requirements (but by this point its not a big deal). While you'll be used to starting and completing a project in a single week, your final project will take all three weeks of the phase, and will also end with presentations.

After Graduating, you'll be paired with a Career Coach who will help you find a job, As I have yet to graduate, I can't speak much on that.

Overall, I have found my experience at Flatiron to be incredible, and have loved every second. While I was initially apprehensive, after the first phase I was sold. Working with groups is a joy because everyone chose to be there, and are motivated to the best they can (no slackers). The instructors were immensely helpful, and always happy to help, many being previous graduates of the program themselves!

The end of the program brings a scary, uncertain time that is the job hunt, but with this experience under my belt, I can face that time confidently.

Using React Google Charts

Asher Scott — Sat, 28 May 2022 18:45:23 +0000

While working on a financial tracking application, I realized I need some way to display all of that data. So began my search for a chart library, after trying out a few, and stumbling my way upon a library that cost over $200. I finally settled on using React Google Charts.

While certainly not as robust or flashy as many other libraries, it had one thing that others didn't; it was free, and I could actually figure out how to use it.

The link above will take you to the official website, where there are plenty of examples, a quick guide to get you started, more examples, info on component props, and many, many, many examples.

If you're anything like me, you like examples because instead of actually learning how stuff works, you can simply copy an already existing one that's close enough, and adjust it to your liking (or adjust it as best you can since you don't know how anything works).

(huge shoutout to this Gradient Generator, it's pretty great for generating color gradients, color schemes, and all of your color needs)

<Chart
          chartType="PieChart"
          width="100%"
          height="400px"
          data={budgetPieData}
          options={{
            pieSliceText: "none",
            pieHole: 0.6,
            backgroundColor: "none",
            colors: [
              "#26cd4d",
              "#00c065",
              "#00b377",
              "#00a483",
              "#00958a",
              "#00858b",
              "#007685",
              "#00667b",
              "#0f576b",
              "#2a4858",
              "#28687d",
              "#168ba0",
              "#00b0be",
              "#00d6d6",
              "#05fce8",
              "#00fed9",
              "#00ffc6",
              "#00ffb0",
              "#00ff96",
              "#00ff78",
            ],
          }}
        />

While it is certainly functional, and gives a fair amount of customizability, I did find that it became increasingly difficult to work with the more complex my needs (formatting data for stacked Column Charts is a bit of a nightmare), but I found that it overall worked out good enough.

Have you used React Google Charts? Do you know of something even better? I would definitely love to hear about it; but in the mean time, good luck and get coding!

Rails generators

Asher Scott — Mon, 23 May 2022 14:16:20 +0000

Rails comes with many helpful ways to speedup backend development. One really convenient tool are generators.

Generators are used to quickly create your backend structure by taking care of repetitive code, allowing you to focus on the more unique aspects of your application.

There are several different things able to be created with rails generate, the most common ones you might encounter are:

rails generate

controller
migration
model
resource
scaffold
serializer

Model

rails g model <model_name> creates a migration file, including any column names for your table if passed as an argument.
E.g. rails g model Pen brand color price:integer would create the following migration file:

# 20220507194429_create_pens.rb

class CreatePens < ActiveRecord::Migration[6.1]
  def change
    create_table :pens do |t|
      t.string :brand
      t.string :color
      t.integer :price

      t.timestamps
    end
  end
end

model file:

# pen.rb

class Pen < ApplicationRecord
end

and spec file:

# pen_spec.rb

require 'rails_helper'

RSpec.describe Pen, type: :model do
  pending "add some examples to (or delete) #{__FILE__}"
end

Resource

rails g resource Pen brand color price:integer will create all of the above files, along with a serializer:

# pen_serializer.rb

class PenSerializer < ActiveModel::Serializer
  attributes :id, :brand, :color, :price
end

controller:

# pens_controller.rb

class PensController < ApplicationController
end

your routes:

# routes.rb

Rails.application.routes.draw do
  resources :pens
end

and some additional specs.

Scaffold

rails g scaffold Pen brand color price:integer creates all of the above, but adds full CRUD capability for your controller:

# pens_controller.rb

class PensController < ApplicationController
  before_action :set_pen, only: [:show, :update, :destroy]

  # GET /pens
  def index
    @pens = Pen.all

    render json: @pens
  end

  # GET /pens/1
  def show
    render json: @pen
  end

  # POST /pens
  def create
    @pen = Pen.new(pen_params)

    if @pen.save
      render json: @pen, status: :created, location: @pen
    else
      render json: @pen.errors, status: :unprocessable_entity
    end
  end

  # PATCH/PUT /pens/1
  def update
    if @pen.update(pen_params)
      render json: @pen
    else
      render json: @pen.errors, status: :unprocessable_entity
    end
  end

  # DELETE /pens/1
  def destroy
    @pen.destroy
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_pen
      @pen = Pen.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def pen_params
      params.require(:pen).permit(:brand, :color, :price)
    end
end

and more spec files.

Of course it's important to know how all of this code works, and why. However, once you've worked on a few rails projects, generators are a great way to quickly and painlessly create the basic framework for most applications.

Moving Background using CSS

Asher Scott — Mon, 23 May 2022 14:16:13 +0000

A moving background is a really simple way to spice up your website. It is also surprisingly simple to do.

HTML:

    <div id="background">
      <div id="effect"></div>
    </div>

Here are our two divs that will contain our static background image, and our moving overlay for that image. Note that you can have any number of these divs, moving or not.

CSS:

#background {
  background-image: url("../public/transport1_touchup.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  height: 100vh;
  z-index: -200;
}

#effect {
  position: absolute;
  background-image: url("../public/transport1_effects.png");
  width: 200vw;
  height: 100vh;
  animation: slide 20s ease-in-out infinite;
}

@keyframes slide {
  0%,
  100% {
    transform: translate(0px);
  }
  50% {
    transform: translate(-25vw);
  }
}

This is our css for our two divs, as well as the keyframes for our slide animation. For this particular effect, I needed to make sure the overlay effect was much wider than the background image, yours may be different depending on your needs.

In some circumstances, it might make more sense to turn your effect into a repeating video or gif, and both have their pros and cons.

I hope this post was helpful, go get creating!

Fun interactivity using react-stars!

Asher Scott — Fri, 01 Apr 2022 22:47:59 +0000

While working on my Phase-2 Flatiron Project, I stumbled upon this super useful react component called react-stars.

This is an incredibly straightforward, flexible, and powerful component used for star rating systems. Check out the demo here!

Don't like boring old stars?

-stars allows you to completely customize the rating characters, using either:

A string;

Or an html element!

Don't be afraid to get creative with it!

But lest you think this can only be used for ratings...

Mini Games!

Here's a simple game I put together using react-stars

Checkout the github page for more information, including a README on how to begin using react-stars to take your react project to the new level!

Simple Grid Based Movement

Asher Scott — Fri, 18 Mar 2022 16:48:38 +0000

1.) Set up initial files

Create your HTML, JS, and CSS files
Create initial HTML structure and link JS and CSS files

2.) Create and Display your Sprite

HTML

    <body>
        <div id="sprite"></div>
    </body>

CSS

#sprite {
    background-color: black;
    height: 20px;
    width: 20px;
    position: absolute;
    /* Initial coordinates of sprite */
    left: 100px;
    bottom: 500px;
}

3.) Add an `addEventListener` for keydown events

// set equal to sprite's initial cooridinates
let position = {
    x: 100, 
    y: 500
};
// dimensions of the sprite
size = 20;

document.addEventListener('keydown', (event) => chooseDirection(event));

function chooseDirection(event) {
    // if key pressed = an arrow key --> change position
    switch(event.key) {
        case 'ArrowRight':
            position.x += size;
            sprite.style.left = position.x + 'px';
            break;
        case 'ArrowLeft':
            position.x -= size;
            sprite.style.left = position.x + 'px';
            break;
        case 'ArrowUp':
            position.y += size;
            sprite.style.bottom = position.y + 'px';
            break;
        case 'ArrowDown':
            position.y -= size;
            sprite.style.bottom = position.y + 'px';
            break;
    }
}

That's it! Now using the arrow keys (or whatever keys you want!), you can move the sprite all across the screen.

Extras!

- Change based on window size

window.addEventListener('resize', displaySprite)

function displaySprite() {
    // remove any previous sprite
    document.querySelector('body').innerHTML = '';

    const sprite = document.createElement('div');
    sprite.id = 'sprite';
    document.querySelector('body').append(sprite);

    sprite.style.height = size + 'vmin';
    sprite.style.width  = size + 'vmin';
    sprite.style.left   = position.x + 'vmin';
    sprite.style.bottom = position.y + 'vmin';
}

By changing from px units to vmin units, we can dynamically change the size of the sprite.

For Example:
sprite.style.bottom = position.y + 'px' --> sprite.style.bottom = position.y + 'vmin'

- Add a Grid

function displayGrid() {
    const grid = document.createElement('div');
    grid.id = 'grid';
    document.querySelector('body').append(grid);

    let cellClass = 'darkerTile';
    let isDark = true;

    for(let i = 0; i < gridSize; i++) {
        const column = document.createElement('div');
        column.className = 'column';
        grid.append(column);

        for(let i = 0; i < gridSize; i++) {
            (isDark) ? cellClass = 'darkerTile' : cellClass = 'lighterTile';
            isDark = !isDark;

            const cell = document.createElement('div');
            cell.className = cellClass;
            cell.style.height = size + 'vmin';
            cell.style.width = size + 'vmin';

            column.append(cell);
        }
    }
}

Don't forget the CSS!

#grid {
    display: flex;
    position: relative;
    width: fit-content;
    border: 2vmin solid darkgreen;
}

.darkerTile {
    background-color: green;
}

.lighterTile {
    background-color: lightgreen;
}

If your having trouble with your sprite aligning to your grid:

try making your sprite the child of your grid element, and setting the grid's position to relative
make sure your starting position aligns with the grid
make sure all size related units are tied to the same variable

- Add border collision to contain your sprite

const bounds = {
    min: 0,
    max: (gridSize - 1) * size
};

function chooseDirection(event) {
    switch(event.key) {
        case 'ArrowRight':
            isAtBorder('x', 'max') ? null : move('x', 'left', true);
            break;
        case 'ArrowLeft':
            isAtBorder('x', 'min') ? null : move('x', 'left', false);
            break;
        case 'ArrowUp':
            isAtBorder('y', 'max') ? null : move('y', 'bottom', true);
            break;
        case 'ArrowDown':
            isAtBorder('y', 'min') ? null : move('y', 'bottom', false);
            break;
    }
}

function isAtBorder(axis, boundary) {
    return (position[axis] === bounds[boundary]) ? true : false;
}

function move(spriteAxis, windowAxis, moveMaxy) {
    (moveMaxy === true) 
    ? position[spriteAxis] += size
    : position[spriteAxis] -= size;

    sprite.style[windowAxis] = position[spriteAxis] + 'vmin';
}

- Change your sprite's appearance

Instead of a div, change your sprite to an img and mess around with different sources.