DEV Community: Dan DeSantis

My Journey into a Bootcamp

Dan DeSantis — Fri, 10 Dec 2021 20:17:59 +0000

This is a bit of a departure from my typical blogging practice. Normally I discuss concepts I wish to firm up for myself for my own understanding, but this time I felt I wanted to address some other stuff to help organize my thoughts on this process up to now.

Why Am I Here??

This is a question I was asking of myself quite a bit over the last two weeks... Imposter syndrome setting in, burnout picking up, stress of the holidays being around the corner, the stresses of life in general. Found myself wondering where the days of the beginning of this program went, with the novelty of jumping into a new experience and having that hit of oxytocin that comes with finding something new that I enjoy.

I think this is something that all bootcamp participants feel to some extent--I'm actually certain of it--and it can easily crush someone under its pressure and force them to leave. In considering this pressure, I had to remind myself of everything that motivated me into this program to begin with...

I want a fulfilling career.

I want to have room for growth and options to progress myself.

I want to be able to support those around me I care for.

I want to be happier in my life.

These were the mantras that helped me push through and keep those negative thoughts, those creeping doubts, at a manageable level.

First tip: Try to remember why you're here.

Lean Into Your Support Group

When I was reminding myself of why I've made the decisions I've made, it became clear that I have more support than I give myself credit for. Family life has always been a bit strained, but my fiance and my friends have been rocks for me - I genuinely would not still be in this program without their support. Particular shoutout to my fiance Mad, strongest person I know.

I had to accept that I had to lean on these people in my life, because they were there for me by choice, and that I shouldn't feel guilty about accepting help from them.

Second tip: The people you keep in your life by choice likely want to be there for you, accept their support with gratitude.

Staying On-Track

This is perhaps the single greatest difficulty I have had in this program. For my life I have struggled with staying on-track with anything I was attempting as a result of my own mental health struggles. Over the years though, with some pretty hard work, I've been able to figure out a few things to help keep me directed...

Mindfulness: This is just staying in the present, asking yourself the necessary (and at times difficult questions) about whether or not what you're doing is actually serving the goals you've set for yourself.
Set Goals: Have a direction, that basically it. You might have to remind yourself at times, like when you're burning out in your program, of what those goals are. But keeping them in the back of your head can make pulling yourself back on-track a bit easier.
Have a Plan: Life can be pretty sucky sometimes, and it can throw things at you you don't expect. I envy the people who can't empathize with it, but to me those people are basically unicorns. Having a plan in place to address how you handle those spikes in negative feelings, stress, depression, unexpected twists and turns, can be the difference between success and tripping back into old habits that might be interested in dragging you down.

Third tip: Be proactive, not reactive. It's harder to develop the tools to help yourself at the same time you need them.

Are You Still Feeling It?

This is a question I've kept asking myself, and the answer is always the same, this is a great program and a great opportunity. What I'm learning is fun and I enjoy it. That hasn't changed, just the context around it.

Fourth tip: Do what you love, you'll have a tough time keeping yourself above water in this program if you don't want to be here.

Here we are

If I had the choice to do this all again... I definitely would.

State or Context? The answer will shock you...

Dan DeSantis — Fri, 19 Nov 2021 14:09:21 +0000

As always, this is a post I'm using to help teach myself something! Hopefully this helps you too.

This post does assume a basic knowledge of React, with a degree of familiarity with the concept of state.

State -- A Reintroduction

I would not be surprised if you've heard of useState, which is a hook provided by React that allows us to set information dynamically, and monitor it in a manner that will allow our components to change along with updates to that information.

import React, { useState } from 'react';

function App () {
    const [ playList, setPlayList ] = useState ([
        { 
          id:1,
          genre:"Alternative",
          title:"You and I",
          artist:"Toro y Moi",
          track: "/tracks/you_and_i.mp3"
        }, { 
          id:2,
          genre:"Rock",
          title:"Khuda Bhi Aasman",
          artist:"Khruangbin",
          track: "/tracks/khuda_bhi_aasman.mp3" 
        }, { 
          id:3,
          genre:"Rock",
          title:"Goodie Bag",
          artist:"Still Woozy",
          track: "/tracks/goodie_bag.mp3"
        }  
    ])

return(
    <div className=music-box>
        <MusicBox playlist={playlist} setPlaylist={setPlaylist} />
    </div>
)}
export default App

Take this application above... Well let's just say this one piece, of this one, small application...

The information that we are putting into state is our playlist, and we're passing that down via props. Cool. We can imagine that MusicBox will probably use the information to populate some interface.

But what if our application isn't so small?

What if nested inside of Music box are tens of elements, in charge of various functionalities ranging that could include:

A playlist interface that can be re-ordered, added to, deleted from, etc.
An album image component that uses a pre-associated relationship to the track playing.
A audio visualization component that displays an equalizer that responds to currently playing music.
A suggested tracks component that takes the genre and returns tracks of the same kind.

Maybe all of the above???

If we wanted to bake all of that functionality into our app, chances are we're going to have a ton of components, in various branches of the application, that would all need access to the current playlist value. Also, it would be a safe bet that not every component would need every value inside of playlist. We could still pass everything down manually via prop drilling but that could get cumbersome if we are also passing other prop values declared within smaller subsections of the application.

Enter Context

This precise kind of dilemma is the exact reason context exists. Imagine if you only had to declare your state that a whole application might need pieces of in a single spot, and only call those values when and where you needed them, no need for prop drilling!

So now we need to do that instead for our application.

Step 1: Create Context and the Provider

Think of it like this, Context is the container, Provider is what lets your application components reach into the container.

Let's set this context up for our music application and get our remarkably small playlist stored in there instead!

import React,{ useState } from "react";

//Container
const PlaylistContext = React.createContext();

//Allows access to the container
function PlaylistProvider({ children }) {
    const [ playList, setPlayList ] = useState ([
        { 
          id:1,
          genre:"Alternative",
          title:"You and I",
          artist:"Toro y Moi",
          track: "/tracks/you_and_i.mp3"
        }, { 
          id:2,
          genre:"Rock",
          title:"Khuda Bhi Aasman",
          artist:"Khruangbin",
          track: "/tracks/khuda_bhi_aasman.mp3"
        }, { 
          id:3,
          genre:"Rock",
          title:"Goodie Bag",
          artist:"Still Woozy",
          track: "/tracks/goodie_bag.mp3"
        }  
    ])

    return(
        <PlaylistContext.Provider value={{ playList, setPlayList }}>
          {children}
        </PlaylistContext.Provider>;
    ) 
}

export { PlaylistContext, PlaylistProvider };

Boom.

Step 2: Building the bridge

So far we have only built the storage container and the means to provide access to it. Now we have to connect that means of access into our application.

To do this we simply wrap the parent most component that will house all components that could need access to the context information with our Provider.

Let's revisit our earlier App component and see what it looks like now.

import React from 'react';

//This is our means of access
import { PlaylistProvider } from "./user";

function App () {
    return(
        <PlaylistProvider>
            <div className=music-box>
                <MusicBox />
            </div>
        </PlaylistProvider>
)}
export default App

Just like that, any component rendered within MusicBox or lower can now gain access to our playlist state. Up until now however, we have merely built the bridge from our context to the components that need to access them. We still need to cross the bridge and bring back the information.

Step 3: Crossing the bridge

Okay, so, you find yourself in a component for your music app that is 10 layers deep and now you need a new portion of the playlist info. Let's see how to access that information.

import { useContext } from 'react';

//Bridge crossed
import { UserContext } from "./user";

function Artists () {

    //Back across the bridge now with data
    const playlist = useContext(PlaylistContext);

    const playlistArtists = playlist.map(song => {
        return <ArtistTile key={song.id} artist={song.artist} />
    }

    return(
        <div className=playlist-artists>
            {playlistArtists}
        </div>

)}
export default App

There you have it! Context in use. What a great way to clean up our code base and help to isolate our information down into as few locations as possible! Now, you may be tempted to just use Context whenever you want to monitor state in your app. Let's explore why this is not such a great choice.

"No need to worry about having to pass props!"
--You, probably, the first time you heard about context

Context Vs. State

Context provides us with abilities very similar to state. Both have the ability to monitor data, and control component re-renders as that data is updated. However, context is something that should, according to the people who wrote it, be used sparingly. This is because while component re-rendering is still possible with context, it is much more intensive on our applications to accomplish.

Filtering Content Using State -- a sort-of beginner's guide

Dan DeSantis — Fri, 05 Nov 2021 00:47:24 +0000

I decided to write this up to help keep everything in order in my head. Hopefully it helps you too!

This article is only meant as a general guide and will assume a basic knowledge of State and how to implement it, but if you are interested in something a bit more specific and comprehensive, you should probably keep looking. While I will provide some examples and briefly explain elements of them, a lot of information is being glossed over.

Now, just to provide a bit of context... we know State is used to handle dynamic information which can allow users to interact with our applications. Implementing State with events is very similar to how vanilla Javascript handles event listeners, at least principally speaking. Glossing over a lot of pretext, in both, at the most fundamental level, we need to indicate that some structure should be waiting for something to happen (click, keypress, mouse movement, etc.) and, once it does, the application makes something else happen as a result. That’s basically where using State with React and just coding in vanilla JS diverges for event handling, because getting an application to do those next steps in vanilla JS can take a ton of code to achieve, when in React, State has this functionality built in.

An incredibly useful application of State to handle events in React is when we need to be able to filter some data-set dynamically based off of some user input. Distilled down, the steps to do this are as follows:

1. Start with some initial data-set.

This one’s pretty straight forward. Could be an existing database file, could be from some user input, could be generated by some other part of our application. Doesn’t matter. All that matters is that you have a LIST of stuff that may or may not need to be filtered. For this blog, let’s say we’re working with a grocery list.

groceries = [
        { id: 1, name: "bread", aisleNum: 1, onSale: false },
        { id: 2, name: "halloween candy", aisleNum: 4, onSale: true },
        { id: 3, name: "milk", aisleNum: 10, onSale: false },
        { id: 4, name: "eggs", aisleNum: 10, onSale: false }
    ]

2. Declare a stateful variable to monitor your filtering.

This is where the magic of React starts. When declaring a stateful variable, we not only establish one variable, but also a function that will be used to change the value of that variable AND re-render the element (remember when I said State has that “do something after” functionality built in???) as well as establish whatever the initial value, or state, of that variable should be. Let’s try and track which aisle the user wants to see all groceries for.

const [ groceryAisle, setGroceryAisle ] = useState("All")

You can see that initially we’re using the state “All” because we want the list to appear unfiltered initially.

3. Declare a variable to contain the filtered version of our data-set.

This is an extremely important step and you should be mindful of how this variable is populated with information. Without this step, you stand the risk of filtering your initial data-set and losing the values that are filtered out every time a filtering occurs. We typically want to preserve the original list to give ourselves some leeway with how we may want the application to perform.

There are many ways we might want to filter our data-set, but let’s stick with showing groceries in a specified aisle.

const filteredGroceries = groceries.filter((item)=>{
  if (groceryAisle === "All"){
      return true
  } else {
      return item.aisle === groceryAisle
  }
})

Notice anything in common between any of the above steps? Look at what value we’re using to check our filtering. It’s the state that we’re monitoring from step 2!

4. Use the filtered data-set!

You’d think this would be an obvious step, and you’d be right! Now that we have the filtered list, let’s do something with it. Maybe we want to render a “Grocery” component for each grocery item on our filtered list. Let’s write a function that can do that for us!

function groceryListBuilder(){
  return(
    filteredGroceries.map((product) => {
      return (<Grocery key={product.id} name={product.name} aisleNum={product.aisleNum} onSale={product.onSale}/>)})
  )
}

And that’s it!

Well…

You still have to mark some element with an event handler (something like onClick or onChange), and then reference the function that will handle the event (think something like handleAisleFilter) and trigger the setter function (setGroceryAisle), which in-turn triggers both the change in state and the re-rendering of the component it’s housed in (or some other component if you’re maybe using callback functions to push info up to a parent component). Oh also, that function that we wrote that builds the elements, you’ll still need to incorporate the returned elements into the component you’re working with…

But aside from all that, that’s it!