DEV Community: Kelan6

Check out my Portfolio

Kelan6 — Wed, 12 Oct 2022 23:41:56 +0000

Worked on creating a quick and fun portfolio today. I wanted a place for potential employers and co-workers to check out my work and get to know me a bit.

https://kelan6.github.io

Enjoy!

How to create Loom Demos and why!

Kelan6 — Tue, 04 Oct 2022 18:50:29 +0000

My Flatiron bootcamp is quickly coming to an end. Which means the job hunt has begun!

I have my LinkedIn and Indeed profiles set and my resume touched up. But I wanted to add a little bit of me, a little bit of personality to the job search. So I looked for an app that I could demo my capstone project on .... Enter Loom!

https://www.loom.com/share/e44905695fad453d9e5451a12f14d992

Loom is a quick and easy application that lets you record both your screen and a face cam at the same time. This allows you to get in front of any potential viewers while piloting your application, how you see fit.

You have 2 options when setting up Loom. You can download the desktop app or use a chrome extensions. Once downloaded you can login with either you Google, Apple, Slack or just simply an email.

Once you are logged in, the easy to navigate user interface is loaded (above).

From the home page you can record a new demo and check your library.

Let's walk through a new demo. Click on the new video button, and the count down begins.

Once you start recording you have a utility bar pop up on the left, allowing you to stop, pause or edit your camera options.

My personal advice before starting your recording is to write out a script, with highlights you plan to cover. Take a few minutes to practice your delivery. Then ... have fun and record. Let your passion or personality come through in your demo!

Once you are done recording, the demo goes to you library and the utility of Loom really begins.

You are able to rename your demo, do some light editing or even save a specific thumbnail. You can even see who views you video. But the nicest attribute is the share links available to you.

The share menu allows you to create custom links for LinkedIn, Twitter, Gmail, or Facebook. Or you can copy the link and send it via messaging.

So now you know how to use Loom, but why?

Well short and sweet, you:

Get to show your app, your way. Controlling the narrative of how your app comes across to the viewer.
Get to put your face in front of potential employers, showing you ability to present, speak and interact.
Add a bit of production value and personality to your resume with a quick Demo Link.

Consider using Loom in your next demo video 😁

Rounding the bootcamp corner ...

Kelan6 — Mon, 19 Sep 2022 16:58:56 +0000

Feelings Friday turned into a feelings weekend...

Suddenly bootcamp graduation is around the corner. I'd say that I'm super excited to finish, but anxiety of the end is starting to grow.

I had a few persisting thoughts through the weekend:

After every phase, I would recharge and reload over the weekend and prep myself for content week 1. But as phase 4 ended, the lingering thought of getting a job looms the largest.

It's hard to focus on anything else at the moment. After all, the whole point of this bootcamp was to bridge the gap for me, into the tech world. To help someone like me with zero experience get their foot in the door and become a software engineer. I'm starting to think about it before I go to bed at night.

I write all these negative things to flushes them out of my thought process. I am continually reminding myself to compartmentalize and focus on one thing at a time.

So here is my 26th attempt to refocus on phase 5, and creating a fun and dynamic capstone project!

I can't believe I am about to graduate?! I vividly remember day 1 and meeting my few cohort mates in the blue room. Now we are on our phase 5 zoom meeting call, prepping for our capstone.

When I am not all doom and gloom, I usually find myself feeling extremely grateful. Grateful for my GF and family who have supported me along this short but difficult journey. Grateful to my cohort for being fun and encouraging in the low points of the bootcamp.

It is a constant back and forth between these two thoughts. All negative or all positive. Feels a bit like a devil and angel riding shotgun on my shoulders.

Ultimately, it really is about taking it one step at a time. Focusing on one specific step or aspect of life, and doing it to the best of your ability.

For anyone out there, about to embark on a new journey into uncharted territory, I have a few pieces of advice. I wouldn't say to blindly follow your dreams, because I feel that a decision like that can lead you to some rough places in life. I would instead encourage you to do your research. Make sure you have a support system of some kind in place, for the dark days or weeks. Lastly, believe that you can do it. Put your head down and start working!

Learn from useHistory()

Kelan6 — Thu, 25 Aug 2022 13:51:33 +0000

Recently, while working on a React/Ruby project, I found myself asking, "How cool would it be if I clicked this button on the log in page, and if the log in was correct, it automatically navigated me to the Home Page"?

While we have to fetch the Ruby database in React to verify the log in, the idea of this auto-link was escaping me. So...

TO GOOGLE !

I quickly came across the useNavigate() hook.

This was perfect! "OnClick" I wanted to navigate to ('/Home') from the Login component. I kept scrolling to learn more.

Importing the useNavigate() from "react - router - dom" at the top of the page? Sounded good, but it made me think of day 1 of setting up this project. I had installed specifically "npm install react-router-dom@5". Meaning I purposely installed V5 instead of the current V6.

I realized then, that the useNavigate Hook was created in React Router V6 to replace a previous Hook, useHistory().

I was a little disappointed that I had spent so much time on the useNavigate() Hook, and it wouldn't be able to help me with this project. But, I continued down the rabbit hole of useHistory(), determined to get this auto-link working.

Luckily, they are almost identical!

So what is useHistory()?

"The useHistory hook gives you access to the history instance that you may use to navigate." - v5.reactrouter

Similarly to useNavigate(), we import useHistory () from "react - router - dom" at the top of the page.

Then we set a variable, 'history' equal to the useHistory Hook.

Now we have the power of useHistory() down in our component!
The simple syntax is: {history.push('/Which_Route_We_Want')

In the code above, I set a boolean statement with useState "isSubmitted". If the proper input is submitted to the username and password, then push the client to the /Home page. If not, continue to render the form above with helpful error messages (not shown).

Once I figured out how simple this auto-linking was with useHistory(), I set up my page with similar links like below:

Just remember to add your 'onClick' listeners below in your JSX!

This was my quick guide on the useHistory() Hook. Hope this helps someone in the future to learn from useHistory(), or we'll be doomed to repeat it 😁.

SOURCES
https://v5.reactrouter.com/web/api/Hooks
https://www.geeksforgeeks.org/reactjs-usenavigate-hook/
https://github.com/almickle/Phas3r-FrontEnd

Fetching with {useState, useEffect} and .mapping to cards

Kelan6 — Wed, 03 Aug 2022 03:18:51 +0000

This Friday will be the end of Phase-2-React. I am sad to see it go! I actually enjoyed my time learning React, in comparison to Phase-1-Javascript.

But, I know this is only the beginning. Everywhere I look, React is the language in demand. I have a feeling that I will see and use React for a long time.

Thinking back to when I started my first labs with useState, I remember thinking, "...WHAT?". Now just a week and a half later we are pulling from a public API, POST-ing and PATCH-ing, mapping, filtering, etc. for a Project.

I wanted to make a quick run through of a React GET request and how we map over our superhero array to give us a singular superhero card. My wish is for React to look a little less daunting.

Here is a small piece of my Phase 2 Project- Superheroes
"Fetching with {useState, useEffect} and .mapping to cards"

The wireframe path our data will take looks like this:
API => fetch GET request => pass our state (heroes) as props down components => map over heroes to get a single hero => catch our hero's data and display to card.

Simple right?

First we need to import {useState} and {useEffect} Hooks. These imports allow us to use the hooks in our initial App component. Then we need to set State.

Since our API is giving us a huge array of superheroes (731), we will set our State to heroes, and our setState function to setHeroes.

Thats one hook out of the way. Now let's fetch our array with useEffect.

We are fetching data from a public API so we want to use useEffect. Why?

"Fetching data from an API...[is] considered [a] side-effect, as it's possible to have a different output for the same input.
This is why useEffect is the hook for us - by fetching data, we're making our React component impure, and useEffect provides us a safe place to write impure code." - Max Rozen

Fetching data inside useEffect is very similar to our fetching with Javascript. A crucial difference being the empty array at the back end of the function. This set of brackets stops an endless fetch of data that will quickly fill your terminal.

Ctrl Z if you forgot! I learned from experience -

Once we have our giant array of heroes we want to pass it down as props. So we will go down into the JSX return section of our function and find our child component. In my case I will be passing down heroes to and then

We then catch the props down in the HeroContainer component.
Here is where we map through our array to send a single hero to cards.

Finally, we catch the single hero data from the parent component and start filling in our card.

Because our API had extra information per hero, we had to iterate through our array with dot notation. For example, to grab our hero's intelligence score we needed to grab our hero's data. Then jump down to powerstats, and lastly down to intelligence score. {hero.powerstats.intelligence}.

That looks a little like this.

So we used useState and useEffect to successfully fetch our heroes from a public API. We passed State as props all the way down the tree to our lowest component, taking a short pitstop to map through our array, giving us a single hero. And we end up with hero cards like below:

Hope you enjoyed this quick run through of useState, useEffect and mapping! Looking forward to posting my final Phase-2 Project!

Thanks for reading!

Sources:

https://maxrozen.com/fetching-data-react-with-useeffect - Max Rozen

https://github.com/Kelan6/Phase-2-Super-Hero - Kelan, Brennen and Noah

PHASE 1 BLOG: review.addEventListener("")

Kelan6 — Fri, 15 Jul 2022 17:02:59 +0000

Phase 1 review

Phase 1 will be in the books after our project presentation today. Feeling a tad accomplished but mostly weary of Phase 2. The amount of knowledge downloaded in 3 weeks is wild! To end every Phase, we have a project week. I learned a lot from all of Phase 1 but had the most fun during project week. Here are some fun topics learned:

JavaScript Fundamentals

Strings
Variables
Functions (Callbacks and Arrow)
Arrays / Objects

Manipulating the DOM

Document Object Model
getElementById
querySelector(all)

JavaScript Events and Communicating with the Server

addEventListener ("onClick")
DOM Content Loaded
GET/POST/PATCH/DELETE
JSON (DERULO)

and more....

On to REACT!

add.EventListener

Although I would argue callback and arrow functions are the most important thing to master in Phase 1, adding event listeners was the most rewarding for me.

For me, when our cohort started using event listeners, everything started moving. Event listeners "listen" for an action like "click" or "key press". Once triggered, they invoke the event handler functions to start working on the event.

Think clicking on a comment button or hitting that like ♥ button on IG.

 "`document.addEventListener("click", myFunction);`" 
                 - w3schools

"<form id="search-form" onsubmit="searchByAbv(event)" autocomplete="off">"

Without event listeners, our web pages couldn't function. Event listeners make interaction with the users fun and dynamic. As I look back on our Phase 1 project with my partner John, I count 10+ event listeners! I can only imagine a more in depth website and the number of event listeners.

Sources:

w3schools
https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Flatiron Canvas https://learning.flatironschool.com/courses/5206

Sweet Code
https://sweetcode.io/understanding-the-javascript-dom-manipulations/

MDN web docs
https://developer.mozilla.org/en-US/docs/Web/API/Element#mouse_events