DEV Community: Lucy Bullen

Flatiron Bootcamp - A Summer in Review

Lucy Bullen — Thu, 25 Aug 2022 16:47:00 +0000

As I wrap up my very last week of software engineering bootcamp, I am going to use this blog post to reflect on my goals coming into the program and the progress I have made towards achieving them.

My goals coming into the program:

embrace: your work is not your worth
embrace: if you want to go somewhere fast go alone, if you want to go far, go together
get through the program
make friends
write clean code (stretch goal)

Embrace: your work is not your worth

Grade: 3.5/5

This is something I struggle with a lot. It took leaving my job to realize how much self worth I put into being good at what I do - driving tasks to perfection and inevitable burn out. Faced with a fast-paced learning environment with a short turnaround, if I wasn't careful, this bootcamp would be a recipe for burn out. I went into camp prepared, having thought through daily structure to maximize hours away from the screen and keeping the coding, as much as possible, to 9a-6p.

I was able to leave the screen, but I wasn't always able to turn off my mind - and the guilt that came with not leading a project to perfection. My tendencies caught up with me on the final project. There is so much todo! And a pesky bug can take up too much time, and all of a sudden you're behind on your self-imposed timeline.

While I still struggle, I found what worked best for me, to pull me out of a state of paralysis, was consistent re-evaluation at a high level. I let the ideas flow, collecting them in a spreadsheet, but reviewed frequently. Which of these tasks were highest priority to get my app out the door? Which would enhance the app but didn't need to be there if I didn't have time? Having all ideas in one place helped drift my mind to other things in my time away from the screen and gave me bite-sized tasks to focus on .

That perfectionism is still nagging at me but I'm finding more purpose outside of "work" giving me more peace and motivation when I am behind the keyboard.

Embrace: if you want to go somewhere fast go alone, if you want to go far, go together

Grade: 4/5

This was a collaborative experience and I am grateful for it. Our cohort of 9 people grew close over the 15 weeks. Bugs and current "thorns" were inevitable in conversation. Rubber ducky moments abundant. This lead to intertwining ideas, solutions, etc. I'm trying to embrace the collaborative process required for what can feel like such individualized tasks in software engineering. Soft skills fascinate me - I took note on how others around me asked for help and when I appreciated how people gave help. While holing up in a corner, beating your head against the keyboard, not asking questions or for collaboration can be feel less vulnerable, I appreciated my experiences that demonstrated a richer path by involving those around you. I hope to continue that vulnerability and communication through to my next role.

Get through the program

Grade: 5/5

What you are reading, my dear, sweet reader, is the last stop between me and finishing the program. Honestly, I'm proud of myself. Tearing up as I type. This has taken guts to get this far (all of us in this bootcamp path) and is going to take more guts to keep going. But I passed all my coding challenges (with flying colors B-) ), re-discovered an interest in learning, and solidified a love of coding and logic problems along the way. I'd have a big smile showing up to bootcamp in the morning, truly (except for the days that I didn't; see above your work is not your worth turmoil). But if I do say so myself, I crushed it and can't wait to keep going.

Make friends

Grade: 5/5

My cohort was the absolute best. I was anxious coming into the bootcamp. Secretly, one reason I wanted to be in person was to meet some new people. I can be shy to make friends and I feel so lucky to have been in a small, tight-knit cohort. They are part of what made this bootcamp such a success. We all created a safe ecosystem that pushed us to achieve and support each other. Slight tear up, love my cohort.

Write clean code (stretch goal)

Grade: 3.5/5

Clean code, I am coming for you. I had an introduction reading Clean Code by Robert C Martin but I still want to see how that is put into practice in large company codebases. I crave the structure and best practice that clean code creates and more examples of how to implement it. I am just getting started though, and clean code development is what I believe I will be chasing for many years of my software engineering career.

All of this feels so surreal and like I just started but also like it's been in the works for a while. I'm so happy and so proud. Please send any spare good energy my way as I journey on to land my first Software Engineering job. I'm excited to see what this future holds.

Peace out,
Lucy

Clean Code - How I'm Refactoring My First Project

Lucy Bullen — Thu, 14 Jul 2022 15:43:15 +0000

I’ve been refactoring my boot camp Phase - 1 project. Here’s what I’ve learned and completed so far.

The motivation

When coding, one of the most repeated questions in my head is: “Is this even allowed?” I thrive in structure, rules and logic. Give me a template, and I am off, working methodically.

Coding languages provide some of that structure, but there are so many ways to solve a problem - which is the right way? There is never a right way (unless you’re in a coding bootcamp and the tests to pass a quiz are very specific, thanks Flatiron!), so I’m choosing my right way by following someone else’s rules - Robert C. Martin.

Clean Code is a coding handbook I was recommended when I started my bootcamp. In it, Martin argues messy code is the downfall of companies: “The degree of the slowdown [by messy code] can be significant. Over the span of a year or two, teams that were moving fast in the beginning of a project can be moving at a snail’s pace. Every change they make to the code breaks two or three other parts of the code. No change is trivial...As the mess builds, the productivity of the team continues to decrease, asymptotically approaching zero...[Everyone] on the team [is] under horrific pressure to increase productivity so they make more messes...”

In my previous career, I worked in small teams building SQL queries everyday. Over the course of 3-4 month projects, our SQL queries became very complex and debugging scripts written by others could require significant time or tribal knowledge. In the week-long projects wrapping up each of my boot camp phases, I see how quickly an application builds complexity between two people developing.

Having read through 3 chapters so far, turns out the rules laid out in this book are simple in theory, but complicated to implement. Below I’ve written some of my favorites and how I’ve put them into practice in my refactored code.

The rules

In choosing meaningful names...

Pick One Word per Concept

“Pick one word for one abstract concept and stick with it”

This one is fairly easy and was already done for a good deal of the code but I choose the CRUD verb for any of my server calls.

Decided on “render” when I wanted something to show up in the page, etc.

Use Pronounceable Names

“It would be a shame not to take advantage of that huge portion of our brain that has evolved to deal with spoken language”

This one was also followed in our codebase but I like his example so I’ll put it here:

Instead of using a date with a variable name genymdhms that would be hard to relay when debugging to another developer, use generationTimestamp. Or instead of modymdhms, use modificationTimestamp.

In writing functions...

Small!

“The first rule of functions is that they should be small. The second rule is that they should be smaller than that”

I broke one behemoth of a function down into smaller functions and it did wonders for the code readability.

Below is before, functions calling functions; requiring the reader to understand the chain of functions to get an idea of what all is happening:

And here it is after, still long but much more readable:

Do One Thing

“Functions should do one thing. They should do it well. They should do it only.”

When I read this, I nodded my head and took note. But when I started to think about it more, what is “one thing?” Martin acknowledges this and elaborates: “we want to be able to read the program as though it were a set of TO paragraphs, each of which is describing the current level of abstraction and referencing subsequent TO paragraphs at the next level down”

Let’s revisit my code sample from the above Small! Section; I tried to break that down into TO paragraphs below:

To show all the movie details we get the movie details, then render the movie data, then we get the user data for the movie then we render the user data.

To render user movie details we render the rating and watch status, then we remove the previous movie comments, then render the current movie comments.

To render the rating and watch status...

You get the point. But overall, when implemented it results in easily readable code.

Use Descriptive Names

“A long descriptive name is better than a long descriptive comment”
“A function name can go a long way toward explaining the intent of the function and the order and intent of the arguments”

I like descriptive names, I like being encouraged to write long ones, but when is it too far? Let’s take a poll.

I liked the idea of explaining the order and intent of the arguments. Here are two functions that have similar purposes for two sets of data. Is it enough to define the function as coalesce? Or is it clearer to write consolidateExistingAndNew? Is my second name overkill? I like it because it tells me the order my arguments should be added to the function. Let me know what you think.

Overwhelmed? Me too. Here are two things that give me hope:

1 - Martin argues that the overall goal of code is “to tell the story of a system”

That gets my head nodding and helps put all coding into context.

2 - Martin admits to writing sloppy first drafts of code but then he massages and refines the code to eventually follow the rules he’s laid out. But, and it’s a big but, he doesn’t write that way to start and doesn’t think anyone could

That takes the pressure off and motivates me to continue analyzing my code to help out future me, and anyone else looking at my code.

It’s worth mentioning again - these concepts (including the productivity v. time graphic) are entirely Robert C. Martin’s wonderful work documented in his book Clean Code and are in no way my own. This article serves to describe my journey to finding the value in his work and how I attempt to implement it in my own coding practice.

If you are interested, a pdf of the book is here: https://yes-pdf.com/book/1038

Happy coding!

React Context API - an Implementation Quick Guide

Lucy Bullen — Wed, 22 Jun 2022 22:19:53 +0000

Implementing the React Context API is one way to implement global state in an application.

Global state is useful when there are child components that need access to the same piece of state nested in disjointed areas of the component tree. Examples of this include: the toggling of a dark mode layout and accessing user information for personalized application formatting.

The local state management methodology calls for this to be solved using prop drilling - defining state at a shared higher level component and passing the variable down to child components, and child components' child components, using props. With a complex component tree, it can be clunky to pass the state variable as props and inefficient to re-render the entire shared higher level component each time a child component updates state. Enter React Context API for global state management. It allows children components to have access to state variables and state variables' relevant functions without explicitly passing them through the component tree by making them 'global.'

Other global statement management solutions are out of the scope of this article, but learn more about other popular options here: State Management Battle in React 2022: Hooks, Redux, and Recoil

The syntax required for the React Context API global state management consists of:

the createContext object
the context provider component
the useContext hook

the createContext object

The createContext object initializes the use of context in a React application.

To create the createContext object, import React and set a constant equal to React.createContext().

import React from 'react';

const GlobalContext = React.createContext();

the context provider component

The context provider component is how global state, and its' relevant functions, are provided to other components in a React application.

In the same file as the createContext object, create a context provider component. Assuming function component syntax; the function should take in the component's children as props and return JSX with a parent component encompassing the children props. Set the name of the parent component equal to the createContext object with .Provider added to the end and pass it a value prop. The value prop will hold the global state relevant data being passed to the children components.

Export the createContext object and the context provider component for use in other areas of the application.

import React, {useState} from 'react';

const GlobalContext = React.createContext();

function GlobalProvider({ children }) {
    const [global, setGlobal] = useState(false);

    return (
        <GlobalContext.Provider value={global}>
            {children}
        </GlobalContext.Provider>
    );
};

export default GlobalProvider;
export { GlobalContext };

To make the global state data available to other components in the application, import the context provider component and wrap it around the components that require the global state.

For the purpose of this example, Item is a component rendered in ItemList and needs access to the global variable:

import React from "react";
import Item from "./Item";
import GlobalProvider from '../context/global';


function ItemList() {
  return (
    <div>
      <GlobalProvider>
        <Item />
      </GlobalProvider>
    </div>
  );
};

export default ItemList;

For setting global state, the goal of the provider component object is to house all setState functions related to the global state variable. This minimizes de-bugging time - any changes to a particular state occur will in one file. To separate out the global state from other sections of code, create a context folder and a new file for each separate section of global state. To pass functions that interact with the global state to other components in the application, create an object that holds the global states and their associated functions, and pass the object into the values prop of the context provider component.

import React, { useState } from 'react';

const GlobalContext = React.createContext();

function GlobalProvider({ children }) {
  const [global, setGlobal] = useState(false);

  function handleClick() {
    setGlobal((global) => !global);
    console.log('This is an example function that interacts 
       with the global state variable global');
  };

  const value = {
    global,
    handleClick
  };

  return (
    <GlobalContext.Provider value={value}>
       {children}
    </GlobalContext.Provider>
    );
};

export default GlobalProvider;
export { GlobalContext };

the useContext hook

The useContext hook in React is how components access the global state created.

Import the useContext hook and the createContext object. Destructure the value prop passed to the context provider component and set it equal to the useContext hook with an argument of the createContext object. This will give the component explicit access to any of the global state relevant data passed into the context provider component.

import React, { useContext } from "react";
import { GlobalContext } from '../context/global';

function Item() {
  const { global, handleClick } = useContext(GlobalContext);  

  return (
    <div>
      {global ? <h2>the global state variable is true</h2> 
         : <h2>the global state variable is false</h2>}
      <button onClick={handleClick}>Change the value of 
         global</button>
    </div>
  );
};

export default Item;

Happy global state management!

For more documentation on useContext check out the React Docs documentation: React Docs - Context

9 Useful Visual Studio Code Shortcuts for Beginners (with Gif Demos)

Lucy Bullen — Thu, 02 Jun 2022 15:46:22 +0000

A compiled list of the best visual studio code (version 1.65.2) tricks I have been taught or googled.

Create multiple cursors: command d
Copy and paste a line of code: (place cursor at the end of the line) shift option up-arrow / shift option down-arrow
"Stringify" rogue datatypes: (highlight the word) '
Toggle comments: control /
Wrap text: option z
Get more error details: shift command m
Color parentheses and brackets: enable "Bracket Pair Colorization"
Shift blocks of code vertically: option up-arrow / option down-arrow
Shift blocks of horizontally: tab / shift tab

Create multiple cursors

Have you ever needed to edit the name of a variable but it exists in many places in your code? Use command d to capture successive instances of that variable name and edit them all at once. However, proceed with caution, this will capture instances even if they are nested in a larger word. For example, using command d on book will also capture book in a variable name bookReview or bookTitle.

Copy and paste a line of code

This shortcut is good for writing similar lines of code one after the other. Save some control c + enter + control z time and use shift option down-arrow to quickly copy a line of code onto the next line below.

"Stringify" rogue datatypes

Sometimes an array will be created with or a variable will be assigned to string-like values not wrapped in quotes. JavaScript will interpret these values as other variables, not strings. Avoid awkwardly adding quotes and copy-pasting the values in between them; instead highlight the value and type either a single quote ' or double quote ".

Toggle comments

For me, toggling comments has been a valuable tool for documenting code processes and debugging sections of code. Command / on a block of code applies the correct comment syntax no matter what language is being used. It saves both the time spent googling comment syntax and the time applying comment syntax to each individual line of code.

Wrap text

Option z is great when working on a file between two different screen or font sizes. Don't take the time to find an optimal break point on a long comment or line of code; let Visual Studio Code do the work resizing the words per line for you.

Get more error details

The more information that can be provide on errors, the better. Often my indicator that something is incorrect is when my file name tab turns red. I then scan the file for red squiggles in the code or blatant syntax issues. Shift command m eliminates the code scanning. Clicking on each error detail shown highlights the suspicious error line and helps debugging move faster.

Color parentheses and brackets

Not only does this trick save me from squinting at my code and counting open brackets under my breath, it has also decreased the time I spend debugging syntax errors. Enabling Bracket Pair Colorization provides an interactive visual aid. Suppose you have a function that creates an array of dictionaries, each dictionary having some value equal to another array - that's at least 4 sets of brackets right there. Bracket Pair Colorization gives each set a unique color allowing you to quickly spot unclosed or out of order brackets.

Shift blocks of code vertically

Shifting blocks of code with option up-arrow or option down-arrow is useful for moving code blocks in and out of different functions or moving them to entirely different locations in the code, all while maintaining the correct indentation.

Shift blocks of code horizontally

This final trick is for keeping code clean and readable. Highlighting a section of code and using tab or shift tab will indent or outdent respectively all at once.

Special thanks to my teachers who've shown me tricks and/or sent me resources: Ix Procopios, Sam Waters, and Bryan Fowler!

For more shortcuts check out the following:
(https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)
(https://code.visualstudio.com/docs/getstarted/tips-and-tricks)