DEV Community: Michael Kienbusch

Learning Programming for Web Development, One Year In

Michael Kienbusch — Wed, 06 Apr 2022 01:04:45 +0000

Introduction

I recently graduated from an online web development programming course. Before that, the only programming experience I had was from a semester long course I took my junior year of high school. Seeing as I am 30 years old now, all I remember from then is <div></div>. In this post, I want to go over the things I've learned this year, and what I hope to learn in the future.

What I have learned

Over the past year, I learned HTML, CSS, JavaScript, React, Redux, Ruby, Sinatra, and Ruby on Rails. When I say "learned", I mean I was able to complete lab assignments, projects, and live coding challenges which demonstrated competent knowledge and understanding of the languages and frameworks we were using in my course. I have not mastered any one of these tools, but I do have a solid grasp on them and understand the logic behind programming.

As I worked through the curriculum and projects of my course, the tools we learned early on were used to help us understand how the frameworks built on them work. What would require an effort level of 10/10 to implement then, became an effort level of 2/10 because of helpful libraries and frameworks. However, I have less confidence in my ability to write vanilla JavaScript now than I did three months into my course. So, one of my goals moving forwards is to go back to JavaScript, get more practice with the concepts I am familiar with to gain fluency, as well as learn new concepts.

What I hope to learn in the near future

You do not really ever stop learning how to program. There are always new frameworks and refactored libraries coming out in the massive programming community. Even as I was between projects in my course, React updated <BrowserRouter /> and I was able to learn how to use their newest version of it on my following project.

Each time I would look up documentation on how to implement a concept in whichever language, I would find myself going down a rabbit hole of linked documentation for relatable problems or concepts that I wanted to explore. However, I think my next main focus will be implementing Redux fully with my React based application I built for my final project.

Conclusion

This past year has been a fulfilling experience of stressful times with difficult concepts, and amazing highs when I would get those concepts to work and make my ideas come to life. Now that I have whet my appetite for programming and web development, I am excited for the future and learning as much as I can!

Tips for Bootcamp Students

Michael Kienbusch — Tue, 05 Apr 2022 23:23:24 +0000

Introduction

I recently graduated from Flatiron School's Software Engineering course, and would like to pass on some advice I learned firsthand during my learning experience to any current, or future, students. While I attended Flatiron School, this advice is applicable to students attending any program. A lot of the advice I can give is focused on students learning online, but some of it is universal to learning to program in general.

Note:

Everybody learns differently. These tips are things I found helpful, if they don't work for you, then try something else!

Background Information

I chose to enroll in their flexible online program, which was 100% online and stretched over a period of ten months, excluding one month of pre-course work. I went with this option because I was working full time, and could not afford to quit work to attend a full time, in person course.

Students were placed into a cohort of about fifteen students with one instructor. Each week, the cohort had two hour long class sessions together with the instructor. Then, once a week, you and two other students had an hour long session with the instructor to go over any problems or topics the few of you wanted to discuss. You were also able to schedule one-on-one time with your instructor as often as he/she was available.

The course was broken into five phases. Each phase consisted of a topic/language to learn, a project to be completed and assessed, and a live coding challenge to be graded. The phases built on each other, and by phase five, we were using everything we had learned.

Dedicate a workspace:

Set aside a physical workspace

My wife and I lived in a single bedroom apartment with our newborn son taking up more space than I could have ever imagined an infant would. When I went through this course, we did not have a lot of space to spare. At the start of the course, I was just plopping my laptop on the kitchen table, using it on the couch, or wherever I thought I would want to study and work. It was hard to really get into a "work" mindset and be able to focus on learning difficult concepts, much less put them into practice.

My advice to you is to dedicate a specific workspace that nothing else in the house has claim over. You don't need a dedicated home office room to accomplish this, it can be a specific corner of the kitchen table, a foldable table you set up in the basement, or anything! That way, when you sit down and login to your computer, your mind knows its time to focus and work, because there is nothing else that is done in this spot of the house/apartment. While I did take my laptop with me for travels, I was never quite as productive as when I was at my "desk".

Time management:

Set aside time to work

Much like you set aside a physical space to work in, set aside time that you work during. Even with my wife and I both being back at work with a newborn baby, I was able to set aside time to work. While the class meeting times are set in stone, you need to set time aside to learn and complete course material on your own. There will be times during your curriculum that are slow paced, and some that are fast paced. For me, I did most of my course work on my days off work, and for two hours immediately after getting home from work before I got too tired. It is a sacrifice, and can be mentally draining, but know that it is temporary and it helps you in the long term.

Connect with students and utilize your instructor:

Utilize the resources you are paying for

Don't be shy! Flatiron School utilized Slack to facilitate communication within the cohort and with the instructor. If you are stuck on topic or problem, message your cohort and see if anyone else is also stuck. Everyone is in it together, and your question is never beneath the group. Topics you learned in the first month, you might forget in a few months. If you can't figure out your problem through research, reach out for help. And don't feel hesitant to schedule one-on-one meetings with your instructor. They are paid to be available to you, you are not inconveniencing them.

Do not get fixated on one problem

Don't waste time

I didn't really learn this lesson until I was working on my final project. I was determined to implement a new concept and library on my frontend for my final project. When I started trying to use these new tools, I got stuck. I utilized online resources, peers, and my instructor, to no avail. The library was new to my instructor, so we were more or less learning it together through our meetings, instead of me more speedily implementing it into my project. I did not work on other areas of my project while I was trying to figure out this one concept. Bottom line, I wasted two weeks on my final project on getting one concept to work. This put me behind for the rest of my project, and I was rushed for the remainder of the course.

If you are stuck on one topic in a project, work on the topics you do understand. You can build out other aspects of your program, and come back to the problem area later.

Conclusion:

Those are my four biggest takeaways from remote learning. These are pieces of advice I will take with me into my new career, and I hope they help you during your studies.

Using Redux Toolkit (RTK) Query for API Fetch Requests

Michael Kienbusch — Tue, 05 Apr 2022 20:25:25 +0000

Introduction

As part of my final project for my web development course with Flatiron School, I decided to give the implementation of Redux Toolkit a try. I had thus far only manipulated state locally in React within specific components, but my instructor encouraged the students to step outside of their comfort zones and try new concepts with our final projects.

When working with React throughout the course, I had found it awfully repetitive sending fetch requests to my backend, converting the response to JSON, and then assigning that data to a local state variable using the useState hook. As I started looking into Redux, and the associated Redux Toolkit, I came across a powerful tool called RTK Query. It allows developers to fetch and cache data from API's with ease.

Note:

This demonstration is going to assume you have created a React application with npx create-react-app restaurant-app --template redux or npx create-react-app restaurant-app and afterwards installed Redux Toolkit with npm install @reduxjs/toolkit.

Step 1:

RTK Query is included with the core Redux Toolkit package. It is available to components within your application by using import { createApi } from '@reduxjs/toolkit/query/react'.

Step 2:

Define an "API slice", much like Redux slices, which will include the base URL you retrieve from the server as well as the endpoints you want to utilize from that base URL.

//./src/slices/restaurantSlice.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'


  //auto-generates an "API slice" when using createApi()
    //in this case, useGetAllRestaurantsQuery
export const restaurantApi = createApi({
    reducerPath: 'restaurantApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3000/'}),
    endpoints: (builder) => ({
        getAllRestaurants: builder.query({
            query: () => `/restaurants`,
        })
    }),
})

export const {useGetAllRestaurantsQuery} = restaurantApi

Now useGetAllRestaurantsQuery is exported and set to retrieve from the http://localhost:3000/restaurantsendpoint. However, we still need to set up the Redux store.

Step 3:

To set up your Redux store, navigate to your "./src/store.js" file, and add the following code:

import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { restaurantApi } from "./slices/restaurantSlice";

const store = configureStore({
    reducer: {
        [restaurantApi.reducerPath] : restaurantApi.reducer,
    },
    middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(restaurantApi.middleware),

})


export default store;

Step 4:

Now you are all ready to import and use the React hook generated in Step 2, useGetAllRestaurantsQuery, in whatever component you need to.

import React from "react";
import { useGetAllRestaurantsQuery } from ".src/slices/restaurantSlice.js";

function Restaurants(){

    const { data, error, isLoading, isSuccess } = useGetAllRestaurantsQuery();

return(
    <div>{data.information}</div>
  )
}

export default Restaurants;

The data, error, isLoading, and isSuccess state variables are provided by RTK Query, and can be used for custom handling of the response for different situations.

Other common usage:

You can add as many endpoints as you want, I only demonstrated one here. You can also search for specific items at an endpoint by adding parameters into the slice function and URL endpoint depending on how the API is structured:

getRestaurantByName: builder.query<Restaurant, string>({
      query: (name) => `restaurant/${name}`

Conclusion:

Now your data is fetched and cached all with the use of one hook! I found RTK Query to be useful in the development of my project, and I hope you get a chance to use it too.

Passing Data Between React Components

Michael Kienbusch — Mon, 07 Feb 2022 01:39:02 +0000

Introduction

A question I found myself googling often when I started learning how to use React, was how do I pass information from a child component to its parent component? To be able to do so, you have to first understand how to pass data from the parent component to the child. I will demonstrate how to accomplish both of these tasks with a quick tutorial.

Passing data down from parent component to child component

Data is passed down in the form of props (properties). I often found myself having to pass the data my state was saving in the parent component to the child component. Let's use a simple function component with state as an example:

import React from 'react';
import Child from './Child.js';

function Parent() {

  const [name, setName] = useState('')

  function greeting(){
    setName('Michael')
  }

  return (
    <>
      <Child parentData = {name}/>
      <Button onClick={() => greeting()}>Click Here</Button>
    </>
  );
}

export default Parent;

Child must be imported into the Parent component in order for it to be rendered.
All that is happening here is greeting() is being called upon the onClick action on our button element. The greeting() function calls setName('Michael'), storing string Michael in state.

We then can pass that string as props down to the Child component being rendered by the Parent. You can name your props whatever you want. Here, I named them parentData and assigned them the data held in state, with name.

<Child parentData = {name}/>

The Child component now has access to the props stored in state in the parent component. Let's see how that might look in the Child component:

import React from 'react';

function Child({parentData}) {
  return (
    <>
      {parentData}
    </>
  );
}

export default Child;

Here, the props named parentData from the Parent component are being received by the functional component, Child. It can do whatever it wants with that data, in this case render the string 'Michael' on the screen when the button is clicked.

Now that we know how to pass data from a parent component to a child component, we can see how to pass data in the opposite direction, from child component to parent component.

Passing data up from child component to parent component

Passing data in the other direction is a little more complicated. A common situation where you will have to do this, is when you are wanting to change the data stored in state in a parent component from its child component. In order to accomplish this, you have to pass a callback function down to the child component in the form of props.

We'll use a similar example as above for demonstration:

import React from 'react';
import Child from './Child.js'

function Parent() {

  const [name, setName] = useState('')

  function callBack(childName){
    setName(childName)
  }

  return (
    <>
      <Child callBack = {callBack} />
      {name}
    </>
  );
}

export default Parent;

Notice how the function callBack is passed to Child as props with
<Child callBack = {callBack} />
The childName parameter received by callBack is actually being passed up from the Child component, let's take a look:

import React from 'react';

function Child({callBack}) {

  const childName = 'Dave'

  return (
    <div>
      <button onClick={() => callBack(childName)}>Click Child</button>
    </div>
  );
}

export default Child;

Child receives the callBack function in its parameters. It holds the childName variable with a string of 'Dave'. Upon the click action on our button, the callBack function is called passing into it the childName data. This data is seen in the Parent component, and is used to change state:

#in the Parent component

function callBack(childName){
    setName(childName)
  }

The new state data is then rendered by the Parent component.

Conclusion

There you have it! That's about as simple as it gets when it comes to passing data from parent components to child components, and vice versa. Knowing how to perform these methods is an important tool to have under your belt, as they are crucial to the usage of React.

Basics of Creating Tables With Active Record Migrations

Michael Kienbusch — Mon, 06 Dec 2021 17:47:42 +0000

Introduction

Over the past six months, I have been learning the ins and outs of front-end web development as part of my school program. Whenever I would write a front-end application that would send fetch requests to a back-end, it was done to an independent JSON server which I hadn't set up myself. Now that I have been learning Ruby, I was finally able to build an application which made fetch requests to my own database. This quick tutorial will walk you through the basics of creating a table in a database with Ruby using migrations, assuming you have installed the necessary dependencies from your Gemfile.

Active Record

Ruby uses Active Record to fulfill the model component of the model-view-controller (MVC) paradigm. It's a an object-relational mapping (ORM) framework for Ruby. Active Record is designed to be used with very specific naming conventions, and commonly followed organization conventions, to facilitate speed and ease of use.

Basic File Structure

At the top level of the directory, there should be a db folder (database). You should make sure there is a migrate folder under the db folder. This migrate folder will be where Active Record saves your database migrations in the exact order in which you execute them, which is useful for keeping track of version history in your database.

Creating Your First Table

Naming convention is extremely important when using Active Record. When creating a table, the table name needs to be plural. For this example, I will be using pets. In your CLI you run

bundle exec rake db:create_migration NAME="create_pets"

This will create a ruby file under your migrate folder which is automatically named beginning with a timestamp, and ending with your migration name. In this case "create_pets".

For example:

20211206094530_create_pets.rb

Within this file, there will exist a template generated for you which will look like this:

class CreatePets < ActiveRecord::Migration[6.1]
  def change
  end
end

Editing your table

Now you can edit this file to add columns into the table in your database with data types of your choosing. The best way to do so is to set up an iteration in your new class using the create_table method:

class CreatePets < ActiveRecord::Migration[6.1]
  def change
    create_table :pets do |t|
      t.string :name
      t.string :breed
      t.boolean :spayed_neutered
      t.integer :owner_id
      t.timestamps
    end
  end
end

This will create a table with seven columns titled in order as id, name, breed, spayed_neutered, owner_id, created_at, and updated_at.
The id column is generated automatically by Active Record and is SQL's way of keeping track of all data it has in the table. The created_at and updated_at columns are generated with the t.timestamps shortcut and is considered good practice to include in all of your tables. The owner_id column is there to show how you would relate this table to a separate hypothetical owners table by way of a foreign key.

In order to implement the changes you have made to the 20211206094530_create_pets.rb file, you have to run the following command in your CLI:

bundle exec rake db:migrate

You should now see a schema.rb file generated in your db folder, populated with:

ActiveRecord::Schema.define(version: 2021_12_03_225736) do

  create_table "pets", force: :cascade do |t|
    t.string "name"
    t.string "breed"
    t.boolean "spayed_neutered"
    t.integer "owner_id"
    t.datetime "created_at"
    t.datetime "updated_at
  end
end

The schema.rb file shows the structure of your table in the database.

If you realize you have made a mistake after executing your db:migrate command, you can run bundle exec rake db:rollback to bring yourself back one version history, edit the file, and run bundle exec db:migrate again.

Conclusion

There you have it, the basics of creating and editing a simple table in Active Record using Ruby. We used the create_table method in this example, but naturally there are many more methods at your disposal. You can find them, and more information, here.

How to Set Up Client-Side Routing Using React

Michael Kienbusch — Tue, 05 Oct 2021 00:04:00 +0000

Introduction

Giving users the ability to navigate throughout your application in a logical and organized manner is crucial. React provides developers with the <Route></Route> tool to allow ease of access to the components of your choosing. In this post, I will walk you through the steps to take in order to set up client-side routing using React in the form of clickable links, assuming you have started a React application using create-react-app.

Step 1:

Before you are able to use <Route> you must first import from react as such:

import {BrowserRouter} from "react-router-dom";

This should be done in your index.js file.

If you wish to rename the BrowserRouter to something else, you can do so by importing in the following manner:

import {BrowserRouter as MyRouter} from "react-router-dom";

For the sake of this guide, I will be using <BrowserRouter>.

Step 2:

In your terminal, run the command $ npm install react-router-dom

Step 3:

In your index.js file, wrap the application being rendered with <BrowserRouter>

eg:

...
ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>
 document.getElementById('root')
);
...

Step 4:

Decide where you want to draw the routes. Usually, it makes sense to direct the routes to where the components are being rendered. I'll say that parent component is called <App />.

Step 5:

Import <Route> and <Switch> into the <App /> component using

import {Route, Switch} from "react-router-dom";

Step 6:

Create an empty navigation component, such as Nav.js

eg:

import React from "react";

  function Nav(){
     return(<div></div>);
  }

export default Nav;

Step 7:

Render the navigation component within the <App /> component.

Step 8:

Wrap all the components within <App /> you wish to create routes to with <Switch></Switch>, and wrap each individual component within the <Switch> with <Route></Route>

eg:

...
function App(){
   return(){
     <Nav />
       <Switch>
         <Route>
           <ComponentOne />
         </Route>
         <Route>
           <ComponentTwo />
         </Route>
       </Switch>
   };
}
...

Note: the <Nav /> component was left outside of the <Switch>, this is because we want the navigation functionality to remain on all pages of our application.

Step 9:

Set the paths you want for each component within the <Switch> using path or exact path

eg:

...
       <Route exact path="/One">
        <ComponentOne />
       </Route>
       <Route exact path="/Two">
        <ComponentTwo />
       </Route>
...

Step 10:

Import <NavLink> into your <Nav /> component. Then, add <NavLink> to create clickable links with paths defined by the <Route>s in step 9.

eg:

...
import {NavLink} from "react-router-dom";

function Nav(){
   return(
     <div>
       <h2>Navigation Bar</h2>
        <NavLink to="/One">ComponentOne</NavLink>
        <NavLink to="/Two">ComponentTwo</NavLink>
     </div>
   )
}
...

Conclusion:

You should now have fully functioning client-side routing in the form of clickable links under a navigation bar! Being able to implement routes is a crucial skill to have considering how necessary it is for users to be able to navigate around applications with ease. I hope this guide is helpful to you if you are learning how to build client-side routing in React.

Learning Lessons Building a Single Page Application as a Programming Student

Michael Kienbusch — Mon, 02 Aug 2021 01:04:04 +0000

I recently completed my first project assignment with Flatiron School as part of their online part-time software engineering program. The goals for this assignment were to create a Single Page Application (SPA) which used HTML, JavaScript, and CSS, as well as accessed data from a public Application Programming Interface (API). It also asked for three separate interactive features in the form of JavaScript event listeners. The rest was up to me! I was excited to take on this challenge because it was my first opportunity to be creative with my programming abilities, and work on something practical in the real world, instead of just passing tests on assignments. Working on this project taught me a couple valuable lessons as a new programmer with only a couple of months of learning under his belt, lessons that may be useful to new students or anyone self-teaching! This post will discuss those lessons, and how they were learned.

The Application

I decided to use the coinpaprika API as my source of information in order to build a single page application which would provide details on the most popular cryptocurrencies. My vision was to be able to search the cryptocurrency database provided by the coinpaprika API on my web application, display information about that cryptocurrency, and compare the current value of that cryptocurrency in dollars to a secondary cryptocurrency of the user's choice.

The Important Steps

The majority of my application utilized JavaScript, although it also utilized HTML and CSS. What I will discuss in this blog are the steps I took using Javascript and HTML to accomplish what I had set out to do which resulted in me learning a valuable lesson.

Lesson 1 - Understand your API

When I set off on programming my application, I let my goals for the application completely drive what I wanted to do before I had a complete understanding of the API I wanted to use. I wanted to be able to pull detailed information from the API about the desired cryptocurrency, and direct the user to the information.

I looked through several cryptocurrencies and how the API structured the JSON which was sent via the fetch request. The examples I looked at had all the information I wanted, with key:value pairs which provided the information I wanted. For example:

*Bitcoin
name: "Bitcoin"
whitepaper: link: "https://static.coinpaprika.com/storage/cdn/whitepapers/215.pdf"

However, as I was finishing up my project and testing input values for other cryptocurrencies, I noticed a few of the cryptocurrency objects came back with no key:value pair for the link: "https://example.com" data. And thus I learned my first valuable lesson on this project, be familiar with the information provided to you by your API. I did not have time at the end of my project to add filters to search queries with null return values, or to come up with another solution. If I had become more familiar with my API, I could have allotted more time for a fix.

Lesson 2 - Sketch out, or outline, how you envision your final project looking

Eager to start my project, I immediately started typing out HTML and getting the structure of my document established. I had a vague idea of how I wanted the site to look in my head, and that's all I was working off. I had my form all set up in my HTML with an input field, and a place to put the information returned from the API after the search. I then realized the API required very specific values to be provided for it to return information on cryptocurrencies. The URL from the API was structured as such:

https://api.coinpaprika.com/v1/coins/{coin_id}

with {coin_id} being the input value users would plug into the search bar to retrieve the information. The format of {coin_id} had to match exactly as "id": "btc-bitcoin" according to the key:value pair provided by the API objects.

My search function was set up as follows:

function displayCrypto(e){
    e.preventDefault()
    fetch(`https://api.coinpaprika.com/v1/coins/${input.value}`)
        .then(response => response.json())
        .then(function(data){
            result.innerHTML = `
                <li>
                    ${data.name}
                    <br>
                    Description: ${data.description}
                    <br>
                    Click <span id = "link"> here </span> for more information: 
                </li>
                `
                    console.log(data)
        })

    input.value = "";
}

This led me to the decision to automatically print a list of the cryptocurrencies on the page by adding an event listener on the document, which listened for DOMContentLoaded. I executed this in the following manner:

function displayAll(){
    fetch(`https://api.coinpaprika.com/v1/coins`)
        .then(response => response.json())
        .then(function(data){
            //console.log(data.slice(0, 100)), limited from size of of about 6100
            let sliced = data.slice(0, 100)
            sliced.forEach((d) => {
                cryptoList.innerHTML += `
                    <li>
                        Name: ${d.name}, <br>Symbol: ${d.symbol}
                    </li>
                `
            })

        }) 
}

With this list, I wanted to include the {coin_id} information, which is found in the ${d.name} and ${d.symbol} interpolations, so users could reference the list of cryptocurrencies, and then see what they would have to type in to the input field to retrieve additional information. This is a very inefficient and unintuitive way to get information to users.

This made me realize another valuable lesson. If I had sketched out by hand, or made an outline of my project, along with a better understanding of the API I was using, I would have realized it would have required some filtering functionality for null values, or just display the list of cryptocurrencies and have them be clickable elements.

However, since I had already set up a full list to load on the DOM, and I had set up my search through input function, I decided to just add a clickable element to the cryptocurrency once it had been searched. I did this by adding the following code to my displayCrypto() function:

let el = document.getElementById("link");
                el.addEventListener("click", function(){
                    location.href = `${data.whitepaper.link}`;
            });

So, the displayCrypto() function in its entirety came out to this:

function displayCrypto(e){
    e.preventDefault()
    fetch(`https://api.coinpaprika.com/v1/coins/${input.value}`)
        .then(response => response.json())
        .then(function(data){
            result.innerHTML = `
                <li>
                    ${data.name}
                    <br>
                    Description: ${data.description}
                    <br>
                    Click <span id = "link"> here </span> for more information: 
                </li>
                `
                    console.log(data)
                let el = document.getElementById("link");
                el.addEventListener("click", function(){
                    location.href = `${data.whitepaper.link}`;
            });
        })

    input.value = "";
}

Takeaways from my first project

While I did create an application which met all the requirements for my project assignment, I know a few things I will do differently before I tackle my next project. With the two main lessons I've learned, I need to keep the big picture in mind, and take the time to gather my thoughts and ideas before jumping straight into programming. This will help ensure I create a product that is as practical and user-friendly as possible. I hope the lessons I've learned are helpful to any other beginner programmers.