DEV Community: Max Anselmo

Remove Git Config from New Rails / React / etc Project

Max Anselmo — Sat, 29 Jan 2022 18:03:22 +0000

Have you ever begin working on a full stack project, created a new React (enter front end framework name here) and Ruby on Rails (enter back end framework name here) project inside of a single Github repository?
ex file structure

--- coffee-shop-app (github repo)
|
|---react-front-end
|
|---rails-back-end

You may have encountered an issue when trying to push code and met with this message:

"You've added another git repository inside your current repository.
Clones of the outer repository will not contain the contents of the embedded repository and will not know how to obtain it."

Some frameworks include a file for their own github configurations with the rest of the boilerplate code.

Luckily, to delete this file all you need to do is cd into each submodule repo and use the command

rm -rf .git

Now you will be able to freely add files from your encompassing github repo.

Hope this helps, this totally threw me for a loop at first!

Strange Bugs 1: The Fussy Controlled Form

Max Anselmo — Thu, 09 Dec 2021 19:48:00 +0000

Welcome to Strange Bugs!

In this post I will go over a bug I encountered while creating a controlled form in the app I'm working on.

Here is the layout for the component I was building:

const Card = () => {
   const [showFront, setShowFront] = useState(true)
   const [formData, setFormData] = useState({
      input1: value1,
      input2: value2,
      ...
   })

   function handleInputChange(e) {
      const name = e.target.name;
      const value = e.target.value;
      setFormData({ ...formData, [name]: value });
   }
   ...

   const CardFront = () => {
      return <form>
         <input name="input1" value={formData.input1}
         <input name="input2" value={formData.input2}
         ...
         <button>Submit</button>
      </form>

   }

   const CardBack = () => {
      return <div>
         <p>{formdata.input1}</p>
         <p>{formdata.input2}</p>
         ...
      </div>

   }

   return (
      { showFront ? <CardFront /> : <CardBack />
   )

}

The Bug:

When attempting to type into one of the inputs, I was only able to enter one character, and then I would be tabbed out of the input, and would have to re click the input over and over to continue typing.

The Struggle:

This bug had me stumped for a good few hours, unsure what was causing the issue. After some time, I was convinced there was something going on with the state, as this issue had only came up after I turned the inputs into a controlled form by giving them state.

The Realization:

While taking a look and breaking things down line by line with a fellow peer, we finally discovered what was going on. On each keystroke while typing in one of the inputs, the state for the formData would be updated in the parent / wrapper component, which would re-render the child component, causing it to forget that we we're writing in one of the inputs.

The Solution:

My hack to fix this, was to simply break the nested components out of themselves, and put the jsx into react fragments instead.

return (
      { showFront ? 
         <> 
            <form>
               <input name="input1" value= {formData.input1}
               <input name="input2" value={formData.input2}
            ...
               <button>Submit</button>
            </form>
         </> 
         : 
         <> 
            <div>
               <p>{formdata.input1}</p>
               <p>{formdata.input2}</p>
               ...
            </div>
         </>
   )

Full-Stack Development in a Nutshell

Max Anselmo — Wed, 24 Nov 2021 17:44:49 +0000

So what even is "Full-Stack Development"?

Full-Stack is a term used to define a style of development that includes working on an application front to back, with everything in between how an application looks and a user interacts with it (Front-End) and how that application manages the data needed to do what it does, and how the "magic" happens behind the scenes (Back-End)

This role is usually broken up between a Front-End Developer, who

focuses on the look and feel of an application
makes requests to the back-end for data

while the Back-End Developer focuses on

creating / managing the database
crafting responses to be returned to the front-end

As a Full-Stack Developer, we will need to complete certain tasks to ensure our application is covered front to back and has everything it needs to function properly.

The flow of data in one of our applications will be handled in the following way

A User will visit our applications front-end, and will do some form of action, for example, try to log in or create an account.
When they hit submit to sign up, a POST http request containing data from our sign up form on the front-end will be sent from our front-end to a specific API endpoint in the back-end server that is running.
The back-end will receive the http request at its endpoint, and execute the action to create a new user in the database with the passed in data.
If everything goes well with that transaction, then the user interacting with the front-end will be redirected to the login page to log in with their newly created account.

The flow of data will be similar for most of not all other actions a user will have with our application.

A list of some skills needed to complete a full-stack application might include:

Front-End

HTML/CSS, JavaScript
- HTML will be the skeleton of our front end, CSS will put a dress on that skeleton to make it look pretty, and JavaScript will make that skeleton dance!
How to make http requests
- This is how we will interact with our back-end to get data to display
Maybe a front-end framework like React.js/Next.js
- This will help us build rich, immersive websites by allowing us to build more efficiently / quickly with our HTML / JavaScript skills
Drawing things out / wireframing
- This is actually useful for both planning out your front-end page structure / layout as well as your database table structure / relationships in your back-end

Back-End

Ruby on Rails, Java / Spring, Python, JavaScript, etc
- This will be what we write all the logic for our database with
Any kind of SQL (PostgreSQL, SQLite, etc)
- This will be used to create/ manage our database
Data Structures / Algorithms
- Knowledge in these areas is necessary for being able to efficiently search and sort through our data
Model View Controller patterns
- MVC comes in handy when orchestrating the logic in our back end that responds to http requests, and dictates what logic should be executed upon receiving a request.
Object Oriented Programming
- OOP is useful to know when defining our database models, and allows for abstraction with topics like object classes and inheritance (this can also be used in the front end!)

And that is a general overview of Full-Stack Development!

Data Structures 101

Max Anselmo — Thu, 18 Nov 2021 17:56:20 +0000

Welcome to Data Structures 101!

Here we will cover a basic overview of concepts you'll need to get started mastering your skills of structuring data.

Array
The Array is the most basic data structure, which is actually used as the foundation to some of the following structures (queue, stack)

An array is simply a list of something, for example

Shopping List: Onion, Garlic, Carrots, Milk, Eggs

let shoppingList = ["Onion", "Garlic", "Carrots", "Milk", "Eggs"]

Rules for adding items to an array are pretty loose, and elements can usually be added in any order, but this differs for other data structures.

Queue
The Queue is similar to an array in that it is a list, however when adding or removing things to a queue, we have to follow a "first in, first out" order of operations.
Meaning, the first item we insert into a queue, will be the first item to be removed from a queue.

Think of a queue of people waiting in line...
The first person in line is going to be the first person to leave the line!
This means when adding or removing elements from the queue, we are limited to this same way of thinking.

Stack
The Stack is also similar to an array, and a brother/sister to the queue, however when adding or removing things to a stack, we have to follow a "first in, last out" order of operations.
Meaning, the first item we insert into a queue, will be the last item to be removed from a queue.

Think of a stack of pancakes!
The first pancake added to the plate is going to be the last one to be removed (granted you eat them top to bottom and don't just slice through all of the pancakes at once...).

Linked List
The Linked List is where things begin to get a little abstract. This structure consists of an element (or node) that has a variable in it that points to another element in memory. So rather than being contained inside of something like an array, these elements are connected via their own pointer variable that relates them to one another.

Linked lists can be singly linked, meaning they have a head element that points to the next element, and the next, and so on until the reaching an element that has a pointer to NULL.
They can also be doubly linked, meaning each element has a next and previous pointer to their respective next and previous elements.

Tree
A tree structure is sort of similar to a linked list in that its elements point to each other in memory, although here instead of having a next and/or previous variable pointing to an element, it has a left and/or right child element. This indicates whether the element being pointed to is to the left or right of said element.
The left / right nature of each elements child elements leads to the "tree" like structure, giving this data structure its name!

While possibly one of the most difficult to fully understand, the tree structure can be extremely effective performance-wise given proper implementation.

And that is the end of Data Structures 101!
There is a LOT more to learn about each of these structures and the pros and cons of each, but this is just a basic overview to get your digital feet wet.

Here's some links to additional sources on the topic:
tutorialspoint: data_structures_algorithms

Getting Started with Gatsby.js

Max Anselmo — Thu, 04 Nov 2021 14:54:25 +0000

What is Gatsby?

Gatsby is a static site generator, which means that it produces static html files that we serve to the viewers of our application. Gatsby will not necessarily be running on our final application, however it will GENERATE that application that will be deployed!

Just because it's a "static" site, that does not mean the site isn't interactive or responsive. We can put Javascript files into the pages that Gatsby serves, make api calls, do interactions, and build rich and immersive pages.

Gatsby uses node.js to help generate the static files that it serves up to the user.

To source data, Gatsby uses another technology called graphql (graphql is a technology that makes api calls simpler and more efficient, as well as allowing us to source data from a variety of sources! This allows us to take in data from markdown files, CMS's (Wordpress, etc), access databases, and more!

Gatsby is built on top of React, which allows us to take advantage of React's modularity and templating abilities, making it easier to keep our code organized and reusable.

Gatsby is also built with a plugin architecture in mind, allowing
users to develop and share their own tools for everyone to use!

Why Use Gatsby?

Speed
- Since Gatsby pages are static, they are WAY faster than other options.
Security
- Since we are just shipping static html pages, should a hacker get into our application they will only have access to those static pages and wont be able to do as much damage compared to if they got into a Wordpress site or access to user information.
The Dev Experience
- Programming with Gatsby involves working with a modern development environment. Gatsby's tools are 'simple' to use (compared to more antiquated technologies), the languages are clean and tidy, and the open source, great documentation and tutorials provided by the Gatsby team and community are amazing resources.

Getting Started

Lets make a basic Gatsby app

Go into your terminal and run npm install -g gatsby-cli

This installs the necessary commands on your machine to create and work with a Gatsby application in the command line.

To verify the Gatsby cli has been installed, run Gatsby --version

If some output like

Gatsby CLI version: [version number]

is displayed, you're good to go!

Now to create our boilerplate Gatsby Application.
Run gatsby new
You will be prompted to enter your applications name, as well as to configure a few other things.
Once that is done loading up, your app is ready to go!

Now cd into your newly created app, and run gatsby develop,
this will start your local development server for your application.
You should see this message indicating everything's up and running:

You can now view [YOUR-APP-NAME] in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and
schema
⠀
  http://localhost:8000/___graphql

Navigate to http://localhost:8000/ in your browser, and you should be seeing your freshly generated Gatsby site!

Congratulations! You now have your own running Gatsby Application ready to be customized and flushed out to your hearts content.

Links to more sources on Gatsby
Gatsby Home Site

Beginners Guide to CRUD using JavaScript

Max Anselmo — Thu, 28 Oct 2021 02:30:32 +0000

So you want to write your own CRUD functionality in JavaScript? Well this is the right place to be!
But first off, what the heck is CRUD?

CRUD stands for:
Create - Read - Update - Delete

These are the four cardinal functions used when interacting with a database or dealing with data in general, and to use that functionality in JavaScript, we're going to use something called fetch to make a http request.

fetch is a built in JavaScript function that is not compatible with older browsers, but works very well with the modern browsers that do support it.

fetch takes in an address where the http request should be sent to, and optionally takes in options (method, headers, body, etc) and returns a promise (the container that our fetch response is in).

The most basic fetch request is a Get request. This is an example of our Read crud functionality.

Here is how we will set up our get request using fetch:

const whereWeWantToFetch = "url"
fetch(whereWeWantToFetch)
.then(res => res.json())
.then(data => console.log(data))

When no method is included, and the only argument passed to fetch is the url, the default operation will be a Get request.

The url is going to be where we are fetching to, where our database is.
We then convert our promise returned from our fetch to usable json, and finally then take our data and do whatever we want with it! (Although here we simply console.log it)

The next example request is a Post request. This is an example of our Create crud functionality.
Here is how we will set up our post request:

const whatIWantToPost = "Post me!"
const whereWeWantToFetch = "url"
fetch(whereWeWantToFetch, {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(whatIWantToPost)
})
.then(res => res.json())
.then(data => console.log(data))

Notice the post requires a few extra bits compared to our get request. Here we need to include a method (what we are doing, here we are POSTing), headers (letting the server know what type of data to expect from the post request), and a body (what we are sending in the post request)

The third example request is a Patch request. This is an example of our Update crud functionality.
Here is how we will set up our Patch request:

const itemToUpdate = {...}
const whereWeWantToFetch = "url/${itemToUpdate.id}"
fetch(whereWeWantToFetch, {
    method: "PATCH",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        key: "updatedValue"
    })
})
.then(res => res.json())
.then(data => console.log(data))

The patch request is similar to post, however here we are updating an existing item in our database.
Notice here we have to include an id at the end of our url to specify which item in our database we would like to update.

The final and relatively simple request is our Delete request, completing our CRUD acronym.

const itemToDelete = {...}
const whereWeWantToFetch = "url/${itemToDelete.id}"
fetch(whereWeWantToFetch, {
    method: "DELETE"
})

Delete requires no headers or body, only a method, as it is just removing something from our database.

... and with that, you now have all the basics to implement CRUD functions into your JavaScript application!

Here's some additional resources on the topic:
javascript docs
mozilla
w3schools