DEV Community: Jesse Franklin Charles Vaughn

Strap it Up

Jesse Franklin Charles Vaughn — Fri, 29 Jan 2021 23:07:20 +0000

CSS is no joke. I recently spent 15 weeks in a coding bootcamp and have only now just begun to really dive into the world of styling. You'd think that this would probably be the easiest part of building a web page or app right?(I mean I know I did.) I was thinking it's just coloring things and moving them around around, can't be that hard right? However, CSS bugs can be just as tricky and elusive as bugs in JS. Enter bootstrap. Bootstrap is an HTML, CSS and JavaScript library that allows you to easily add styling to a project. I have the most experience with react-bootstrap so that is what I'll covering for you here quickly.

Getting Started

First off make sure you have a react-app running. If you're not sure how to do that, React has wonderful documentation and the tutorial is very helpful as well. You can find all of that here.
Alright so now that you have your react app started, you can begin to use react-bootstrap. First you will want to install the packages.

npm install react-bootstrap bootstrap

Entering the above command into your terminal will install both the bootstrap package as well the react-bootstrap package.

Importing

Once you have those packages installed into your package.json file you are ready to start using some bootstrap. In the component that you'd like to add some styling, you'll have to import the exact bootstrap component. Let's say I have a form in my app that I think just looks too boring for my taste. I can import the react-bootstrap Form component to give my form some style. Thinking ahead, we'll also probably want our form to have a submit button as well so let's import a button component along with our form component.

import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'

Note: You can also import any react-bootstrap components along with the entire react-bootstrap library by using the curly brace syntax shown below. The above import method is preferred however unless you need the whole bootstrap library for the component you are styling.

import { Form, Button } from 'react-bootstrap'

CSS File

Now that you have the components imported where you want them you'll just need to import the bootstrap css file at the top level of your project(App.js or index.js).

import 'bootstrap/dist/css/bootstrap.min.css'

Magic

Now that you have all of the imports, you have access to all of the magic of react-bootstrap. It will make your basic HTML form...

into a nicely styled react-bootstrap form!

So much better right!

React-bootstrap Docs

If you'd like to make your forms all pretty like the one above then I would suggest you visit the react-bootstrap docs page. The docs are wonderfully written and provide you with step-by-step instructions on how to incorporate react-bootstrap components into your project. In this blog I've only mentioned the Form and Button components in the react-bootstrap library and there are so many more! I myself have only begun to scratch the surface of bootstrap and can't wait for all the adventures to come.

Conclusion

I hope that I have convinced you to check out some react-bootstrap because it really is that cool. It helped me out a lot throughout my final project for my coding bootcamp and I know it will help any of you out there getting started!

React Routing

Jesse Franklin Charles Vaughn — Thu, 07 Jan 2021 21:47:46 +0000

I am about 12 weeks into a coding bootcamp and we've just started learning about good ol' React. There's so much cool stuff encompassed within React but I'm going to spend some time telling you all about one of my favorite aspects of it so far which is how React handles it's routing. React Router is an amazing tool that allows a developer to provide specific URL's that are tied to specific components within their react app. I'm sure you can see how this makes for a much more friendly user experience when compared to only being able to use the back button or links within the app. Getting started with React Router is very simple. All you have to do is npm install react-router-dom from your terminal and you will have access to all of its wonders.

Components

Routers
Route Matchers
Navigation Components

First we have the routers which are BrowserRouter and HashRouter.
I haven't spent much time with HashRouter so I will mostly be discussing BrowserRouter. I do know that the main difference between them is the way they store the URL and communicate with your web server.
At the core of every React Router application should be a router component. To make sure you are using your router component just import BrowserRouter from react-router-dom in your top level (most usually app) component of your project.

Note: You can rename BrowserRouter so that it's easier to write in your code. Most simply rename BrowserRouter as Router shown below.


npm install react-router-dom
// In your terminal



import { BrowserRouter as Router } from 'react-router-dom';
// At the top level of your project

Second we have the route matcher components like Route and Switch. I'm going to talk about the Switch route matcher component first because it contains Route components within it. When a switch is rendered, it searches through its children Route elements to find one whose path matches the current URL. When it finds one, it renders that route and disregards all the other ones. This means that if you are using a switch you should put route's with more specific paths before less-specific ones. This is because the switch will render the first route that matches the one entered. If no Route matches, the Switch renders nothing.

<Switch>
  <Route exact path="/animals" component={Animals} />
  <Route path="/animals/fish" component={Fish} />
  <Route component={Missing} />
</Switch>

In the above code, the exact path attribute is being used so that the switch renders "/animals" when someone visits "/animals/fish". Without the exact path attribute, you would have to put "/animals" as the last route in your switch.

One significant thing to note is that a route path matches the beginning of the URL, not the whole thing. This means that a route path of "/" will always match any URL due to the fact that all URL's begin with "/". Because of this, we'll want to put the root route as the last in our switch. You can also use a route component without using a switch however you'll want to use the route's exact path attribute which will make it so that if the URL entered is not the exact route URL you've provided then nothing will happen.

Last but not least we have navigation components:

Link
NavLink
NavBar

Link components work intuitively, wherever you put a link component in your react app will generate a link(a tag) on your HTML. If you'd like any links to remain at the top of your app for navigational purposes you can use a simple NavBar component. A NavBar component allows you to prepend any links that you'd like to the top of your SPA. You can render a NavBar component like so:

// App.js

import NavBar from '../components/NavBar';

const App = (props) => {
  return (
    <Router>
      <div>
        <NavBar />
          <Route exact path="/" component={Home}/>
          <Route exact path="/movies" component={Movies}/>
          <Route exact path="/directors" component={Directors}/>
          <Route exact path="/actors" component={Actors}/>
      </div>
    </Router>
  );
};

// NavBar.js

import { NavLink } from 'react-router-dom';

const NavBar = () => {
  return (
    <div className="navbar">
      <ul>
        <li><NavLink exact to="/">Home</NavLink></li>
        <li><NavLink exact to="/movies">Movies</NavLink></li>
        <li><NavLink exact to="/directors">Directors</NavLink></li>
        <li><NavLink exact to="/actors">Actors</NavLink></li>
      </ul>
    </div>
  );
};

There's a lot more to React Routing but this is all I have for you now as I have just begun my journey with this wonderful technology. For more info please check out the React docs (they have really good docs) and there is also a react router tutorial that I found to be immensely helpful in getting an idea of how routing works with react.

Iffy about IIFE's?

Jesse Franklin Charles Vaughn — Wed, 02 Dec 2020 22:51:46 +0000

So I'm in this coding bootcamp and we just started learning about JavaScript. This is going straight from learning Ruby as my first programming language mind you so JS pretty much looked like spaghetti code at first. THEN in comes the IIFE which at first glance to me was like unorganized spaghetti. However, upon further investigation I found I couldn't be more wrong and have since fallen in love! So if you were at all like me and felt totally iffy about IIFE's then I hope this helps to shed some light on them and maybe even get you to start using them because... I mean they're awesome.

What is an IIFE?

The acronym stands for Immediately Invoked Function Expression and is pronounced just like the word 'iffy'. Previously known as the self-executing anonymous function it was given the more accurate name IIFE by a Boston based web developer named Ben Alman. An IIFE is an anonymous function that is invoked immediately after being declared. The two sets of parenthesis are what gives us all the magic of the IIFE. The first being the Grouping Operator parentheses which enclose the function and allow local scoping. The second set of magical parentheses are the ones at the end of the function which will call the function.

How they're written:


(function () {
  //code here
})();

Locking it Up

One of the really cool advantages that IIFE's offer us is that they grant us the opportunity to "lock up" an entire app or program within the scope of one big function, doing away with a lot of scoping issues. We can encase the variables and functions that we'd like to all be in one scope inside of our Immediately Invoked Function Expression. No more having to globally scope variables that you'd like to use in other functions! IIFE's, like all other functions, create for us a local scope so everything inside is "locked up".


(function () {
    const thiss = "this "
    const that  = "that" 

    function thisThat() 
{
   console.log(thiss + that) 
}

thisThat()

})()

// 'this that'
// undefined

In the above code I created an IIFE function and then within said function made two variables - "thiss and that". I then created another function within my IIFE called thisThat. This function adds my two variables together for an end result of 'this that' being displayed on the console.

Aside: "this" is one of JavaScript's reserved words and therefore cannot be used as a variable name.

IFFE's as variables?!

Well an IIFE IS a function isn't it? And all functions can be stored as variables so why not immediately invoked ones? However, there is one key difference when it comes to storing an IIFE as variable: When you assign an IIFE function to a variable the return value of the function is stored, whereas when you assign a regular function to a variable, the function definition is stored.
This happens because the function is immediately invoked and therefore storing an IIFE is the same as defining a function and then storing that functions return value after calling it. Here's a really simple example to see how this works.

Regular Function:

   let twoTimesTwo = 
function multiply() {
  return 2 * 2       
}

//  ƒ multiply() {
//    return 2 * 2       
// }

IIFE:

let twoTimesTwo = 
(function () {
   return 2 * 2
})()

// 4

IIFE's and parameters

IIFE's are super cool with parameters which is totally awesome! Adding parameters to your IIFE is really easy too. All you have to do is throw in a few variable names within the set of parentheses after the word function and define the variables within the final set of parentheses that call the function. You can then do whatever work you'd like with the variables within your function. Here's a super simple example of what that looks like.


(function (some, odd, variable) {
      return some + odd + variable
})("A ", "random ", "sentence.")

// "A random sentence."

Aside: All functions (so IIFE's included!) can accept a seemingly endless amount of parameters. Here's a funny little function that illustrates my discovery. The IIFE below accepts 26 parameters!


(function (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z) {
    return (a * (b + c) / (d + e) - g) + ((h + i) * (j % k) / l) - (m * n) + ((o % p) * (q + r)) / s * t + ((u + v) % (w * x) - (y + z))
})(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26)

// 370.35380116959067

Conclusion

During my time coding so far, I've noticed that terminology alone can be one of the most daunting aspects of learning new coding concepts. However, I've also found that quite a few of these terms just sound complicated and the concepts behind them are pretty simple. An Immediately Invoked Function Expression definitely sounded like something I might never wrap my head around when I first saw the term, but IIFE's are super easy (and fun!) to use. The main reasons to use an IIFE function are they save you the hassle of any pesky global variables or functions. Because of the protection that IIFE's give to their variables and functions, those variables and functions don't know about globally scoped variables and functions and can therefore share the same name. IIFE's can also just help give some organization to your probably wild looking JavaScript code and make it more readable.

Form_help?

Jesse Franklin Charles Vaughn — Thu, 12 Nov 2020 08:38:06 +0000

Forms...forms, forms, forms. If you, like me, are just beginning your journey into the land of coding and are already overwhelmed by the fact that there are several different languages within this land, then you're also probably pretty stressed about all these different form syntaxes. I know that I still am and maybe that's why I'm writing this blog in the first place. I mean there's form_tag, form_for, form_with and each of them comes with their own syntax...ughh. Luckily for us though, form_tag and form_for are both soft deprecated and won't be around for much longer. But...I guess until that day we should learn them all right?

Form_tag

The most basic of all the form helpers is the form_tag. A form_tag is what you want to use for a simple form that has just a url path and no model association. When making a form_tag you must specify the url path that you want it to take as well as the http verb.

Note: A substitution tag or expression should be used to enclose each line of your form excluding the end line which should be enclosed in a scriptlet. More documentation on this here

form_tag(url: '/path', method: :get) do 
  label_tag :label
  text_field_tag :label
  submit_tag "Submit"
end

Given you had a rails project set up and a route to '/path' defined, the code above will render a form to the url of /path that has an input box labeled "Label" as well as a button labeled "Submit". Pretty cool right?! Now form_tag accepts more options that I'm not going to get into right now because I'm only beginning to understand them myself but if you'd like to gorge yourself on form_tag here is a very helpful API doc.

Form_for

Now we have form_for which is what you're going to want to use when you have a model that you'd like to associate your form to. Let's say that you have a user model and you want each user to be able to fill out a form. Your form_for would be as follows:

form_for @user do |f|
  f.label :username
  f.text_field :username
  f.submit
end

This will render a form with a username box and a button labeled "Submit User". Yes! Rails is smart enough to associate the submit button to the model instance we are making the form for. Really cool right?! And that's not even the best form!

Form_with

The one and only form_with was created with the intention of combining both the form_tag and form_for syntaxes into one syntax that can be used in all cases. Whether you have a custom route without a model or a model class built matters not when using form_with. You can specify whether or not you have a model. For example, if you have only a custom route you can use something similar to the code below.

form_with(url: '/path', method: :get) do 
  label_tag :label
  text_field_tag :label
  submit_tag "Submit"
end

This will render the same html and form as the form_tag written above. Say you wanted to use form_with to render the same form that we made with form_for?

form_with model: @user do |f|
  f.label :username
  f.text_field :username
  f.submit
end

It's easy to see why form_tag and form_for will soon be leaving us as they are no longer needed now that we have form_with. However, I'd say still worth learning about as form_with is built off of them.

Form Helpers

Our forms would be pretty lame without checkboxes, dropdown menus, and the like. That's where form helpers come in for the rescue. Rails with all of its magic comes with several built in form helpers. These will allow us to make our forms more versatile. For instance, say you ran a pet adoption agency and wanted make simple adoption form for a user who wants to adopt a pet. You'd have to somehow have a list of the available pets up for adoption. You could easily achieve this with the collection_select helper.

form_with model: @user do |f|
   f.label :available_pets
   f.collection_select :pets, Pet.all, :id, :name
   f.submit
end

This will render a form with a dropdown menu of all the pets that are in your database. The arguments that are passed to collection_select are first the controller that we will be dealing with(:pets), then the actual collection that we want(Pet.all), after that we to tell the form what attribute we are separating them by so to speak and finally what attribute we want to display in our dropdown menu. This is only one of the many form helpers there are. If you want to see how to use more of them then everything you need to know is here!

Conclusion

Thanks for checking out my very barebones explanation of forms and I hope that it was at all helpful or informative to anyone out there getting started. Also, if there's anything I've written that's incorrect or if you think I missed something critical please let me know. Now get on out there and write some forms!

A Call of Duty Delight

Jesse Franklin Charles Vaughn — Thu, 22 Oct 2020 07:14:48 +0000

Okay so I turn on my Xbox Tuesday night thinking, "I'm only going to hop on CoD so I can take a look at my load out and get all the material that I need to write a blog on it." WOW! Was I in for it! Much to my surprise and utter delight, the people down at Blizzard Activision decided to give us CoD players a Halloween event.

Haunting of Verdansk

I want to start by saying that I really appreciate the work that the developers put into Haunting of Verdansk. You can truly see the time and effort that it took to make it and I love that! Now this event has literally had me screaming(my girlfriend too. At me though) with in-game stress-joy. For the event, the Cod Gods have added spooky menu music, a few limited time only game modes, creepy character and weapon skins, as well as an in-game scavenger hunt that unlocks a jack-o-lantern inspired Grau blueprint. You also get a free charm just for "participating in the event"(literally just opening the game).

The Menu

As soon as you open your game up to the menu screen you can begin to enjoy. The music is what you'd expect in the background of a horror film. Disturbing beats with loud synth. Very creepy stuff.

Game Modes

Trick or Trios

This is a regular three person per team battle royale however this game mode takes place at dusk instead of the day time.

Zombie Royale

Now this is where it's at! The first I played I almost pee'd my pants, it was so awesome. The only down side is that you can only play with three people but I'd be more than happy to give one of my friends the kick for a round or two. This mode takes place at dusk just as trick or trios, however, instead of going to the gulag players respawn as zombies.

That's right! You can play as a zombie! In order to become human again you must collect antivirals from fallen players. The last team with a human player wins. Oh yea and did I mention that as a zombie you have awesome powers like super jump, immunity to poison gas, unlimited poison gas bombs and an EMP?! As a zombie you can still help your living team members kill enemy players and once you collect two antivirals you will drop back into the warzone with the load out you died with. Now you might be thinking that's unfair but your health as a zombie is quite low, which keeps the game balanced. I am in love with this game mode and hope to see it again in the future. It's absolutely CRACKED tho! Make sure your head's on a swivel.

Bundles

The Texas Chainsaw Massacre

For an easy-going price of 2,400 COD points or 20 bucks you can run around as the infamous Leatherface himself. Honest opinion this one's ok. I like the weapon blueprints much more than anything else. Skin's a little ugly for my taste but that's just me. Skin Crawler is a skin for the operator Velikan.

Bundle Includes:

*Legendary Skin - Skin Crawler -
*Legendary Weapon Blueprint - Family Heirloom -
*Legendary Weapon Blueprint - Buzzkiller -
*Legendary Weapon Blueprint - Meat Grinder -
*Legendary Vehicle Horn - The Squealer -
*Epic Charm - Keychainsaw -
*Epic Sticker - Familiar Face -
*Epic Calling Card - Verdansk Chainsaw Massacre -
*Epic Emblem - Killer Portrait-
*Epic Spray - Nightmare Fuel -

Saw

If you purchase the Saw bundle(like I did!) you can play as a life-sized version of Jigsaw's Billy doll. This bundle is so dope! I usually don't spend money on anything in-game but... I mean I HAD to. Just look at the Billy doll, imagine running around getting bodies looking like that and tell me you don't want it. I also think it's safe to say that most of the CoD community agrees with me because about 80% of people I see online have also purchased it. The skin is for the Morte operator.

Bundle Includes:

*Legendary Skin - Billy -
*Legendary Weapon Blueprint - Confession -
*Legendary Weapon Blueprint - Death Trap -
*Legendary Weapon Blueprint - Phlebotomist -
*Legendary Vehicle Skin - Pain Train -
*Epic Charm - Let's Play a Game -
*Epic Sticker - Play Me -
*Epic Calling Card - Saw -
*Epic Emblem - The Choice Is Yours -
*Epic Spray - Spiral Cut -

Scavenger Hunt

The Trick or Treat or scavenger component of this event is one of the coolest aspects of Haunting of Verdansk. In each of the sixteen major sections of the map you must scavenge the crates until finding the charm, emblem or other goody for that area. If you like jump scares then you will love these boxes. The first one I opened scared the hell out of me, I seriously thought I was being shot at. And if that's not enough to let you know you've found the right one, the game will also display a banner at the top of the screen when you've found it. Once you've collected all 16 goodies, you are gifted with the Pumpkin Punisher legendary Grau blueprint(can't wait to get this thing).

Overview

This event's the ishhh. There's not much else to say about it other than that I haven't even covered everything that's available. I am absolutely loving it so far and am very excited for more events like this in the future. Thank You Blizzard Activision!

The End

Why are you still reading this?
HOP ON COD!!!