DEV Community: Kelly

I attended a full-stack SE boot camp. I'm glad I did. Here are a few things I wish I understood Day 1.

Kelly — Wed, 05 Oct 2022 15:55:27 +0000

There are a lot of different types of learning boot camps out there. Before my experience with a 15 week intensive on-line live full-stack software engineering boot camp, most of the ones I had encountered, were a few weeks long at most and taught some niche technology/tools for your academic research domain or area of expertise. I have attended a few of those over the years and they are nothing like what I experienced during my SE boot camp (at Flatiron).

It's Going To Be More Challenging Than You Might Think But Less Than You Fear (Hopefully..)

The boot camp I attended had an entrance exam of sorts I considered it a screener. It was a timed adaptive computerized test, so as you get answers correct it shows you harder questions, much like the GREs, but only 20 minutes long. The test included basic math and logic, while the institution had a threshold score which you needed to pass to move on the interview process. Easy enough, killed the test and I felt the interview went great. Apply for scholarships (if that's your thing), do the paper-work get your cohort start date and away you go.

I had a ton of pre-work to complete before day 1. Since they had people attending from all different backgrounds, with varying amounts of coding exposure, it was ensure everyone had a minimal same base knowledge to hit the ground running. This makes sense to me as someone who has thought about testing and learning in depth before, history is an important performance factor and the fact that they were taking that seriously made me feel better about my decision to attend. The pre-work was enjoyable and quite frankly pretty easy.

Let me tell you a bit more about myself so that you can put the experience into perspective. I already had an advanced degree and unrelated domains of expertise from an academic research background, coming into boot camp.

I literally had an advisor once give me a binder with printouts, forward me an IRB approval packet with study details, and send an email with product key for a program, which I had never heard of before, to build experiments of a type I had never conducted, during our second meeting (which took place in my first week of grad school). I also received instructions to build the study; recruit participants and make it work, in 3 weeks which is when we would start running paid participants in it; the name of another student who has used that program before; and oh yeah here is link to a forum if you need help. In case you are unaware in many academic fields your advisor is not only your boss for paid labor, they also have complete control over all aspects of your academic advancement and graduation, and because so many fields are niche they can also make or break your career with a word before you leave their office. Additionally most intuitions are set-up so that graduate student workers don't have access to HR or other workplace protections typically mandated for regular employees. So the pressure is intense and the power dynamics require a cultural overhaul but that is a discussion for another time. It was a nightmare, but I completed my task and with it got my first taste of the crazy hurdles that depending on circumstances might be presented to someone in a PhD program.

Importantly, I would be withholding something vital if I didn't tell you that despite it being a nightmarish scenario, it was also deeply satisfying to complete it. I felt triumphant and couldn't wait until next time to make a new experiment, this time my own, with different and new features. Over time I have come to understand that I enjoy learning but it takes concerted effort on my part; am insatiably curious; love systems thinking and applying interdisciplinary approaches to solve problems; and believe in a growth mindset.

So I figured if I could deal with the above experience, get through qualifying exams, research and publication cycles, and defenses than I could do this boot camp. I mean how hard could it really be comparatively? Despite feeling like past experiences and personal attributes set me up for success in boot camp, it was more challenging than expected and at times in ways that were totally unanticipated.

I'm not certain how others would describe the experience but it was comparatively like taking several hard short semester classes (think 3 week pre- or post-session courses) back to back with each having testing along with a seriously intense group project as part of the curriculum. Then at the end you basically have 3 weeks to do close to a research Master's Thesis worth of work and present it. So while not at the level of PhD comprehensives/quals or defending your prospectus in terms of time, expertise, and labor, it is still very challenging in a number of ways some of which people might be surprised at.

It can be exhausting!

This is something where the cycle is intense learning, of what for many participants is brand new material, likely a new language to start with. Think lecture and labs from 9am -6pm with an hour lunch 5 days a week with 20-30 hours of homework and an exam at the end of 2 weeks. Followed by a week of practical application of what you learned in a remote group setting, plus researching and implementing anything extra you might need to complete your project: a working web app.

Never coded before? Well now in your 3rd week you will be learning version control on git with other newbies while simultaneously making an app in just a few days! How to create branches, figure out merge conflicts on git, and lamenting the ever eternal existential question, "Why or why did I/you do that on the main/master branch!?", will just be a few of the fun activities you can expect to indulge in.

Then the next week you start the cycle again with new information, testing and another project which is scaffolded to incorporate everything learned.

So from a learning and memory perspective this is a situation which puts you under a significant amount of cognitive load. What does that even mean and why does it matter? It basically means that your brain has a limited capacity to the amount of data or information it can hold and manipulate easily when working consciously with information, particularly information not yet consigned to long term memory. The higher the cognitive load the more labor (i.e. energy) intensive doing things like problem solving and learning new things become. As to why this matters lots of things can effect your cognitive load and therefore moderate the level of effort required to do a task. Unsurprisingly, being exhausted is one of those things that does not help us in this area.

What to do about it? Here are some things that either worked for me or where suggested by others and helped them.

Make a schedule that includes nights and weekends with blocks for your homework and practicing

This schedule should include definitive stop times so that you are actually getting the rest you need to perform more effectively
- Share this as needed with loved ones and/or housemates
- If you are someone who has time constraints because of inflexible life circumstances (e.g. family responsibilities, chronic illness) know that this is going to be harder for you because you will just get less hours to complete your work. Making time management even more important for you.

Attend to your basic needs...No seriously don't ignore what your body is telling you

Remember what I said before about your brain requiring more energy for sustained intense processing? That right, it needs nutrients and for you to be properly hydrated, not just caffeine to the rescue. Caffeine will sure keep you awake but without eating properly and hydration you won't be working efferently or putting out good work.
- A small mid-morning snack along with a short coding/screen break can refresh you and reset you to get back at it. The same thing in the afternoon.

Taking small breaks when you get stuck or have just been at it for a long time can help.

If you are like me and might get lost in a thing, you can try setting a timer for every hour or two and check in with yourself on how you are doing. Are you eyes tired? Have you been mindlessly working over the same line of code without any new inspiration then take 5 or 10 minutes. Do something else.

Optimize your workspace both the physical and virtual elements to ward off preventable fatigue.

Eyes getting tired staring at VS Code, change the color theme to one that feels soothing.
We often don't realize that small discomforts over the course of the day slowly eat away at our energy and redirect our internal resources from where we want them, our coding, to ignoring the ache developing in your shoulders because you hunched over for so long.

It can be an emotional roller coaster

Photo by Justin on Unsplash

I knew going it that it would be stressful, that I would have struggles and I hoped triumphs. I underestimated how much the intense cyclical nature of boot camp can really run you through the emotional ringer.

There were plenty of good points, feelings of satisfaction for solving a problem, just a good interaction with a cohort mate, pushing up that working code to git. There was laughter, smiles, frustration, and tears. I cried more than once during the experience and sometimes for things that surprised me.

What to do about it? Here are some things that either worked for me or where suggested by others and helped them.

Accept that you will likely experience this and aim for management rather than avoidance

Emotional regulation is pretty complicated but there are a couple of things that you can easily do that will help give you the resources to ride the roller coaster instead of feeling like you are on the tracks.
- The most immediately impactful and effective things you can do to help provide emotional equanimity are wait for it... Pay attention to your body and meet your basic needs! Are you hungry, thirsty, tired, sick, in pain? Try attending to those needs and see how you feel in a little while.
- Practice some mindful breathing or mediation for a few minutes if you are feeling overwhelmed
- Practice mindfulness of current emotions

Know that you are not alone in experiencing what you are experiencing

I've already fussed up to crying during my time at boot camp. However, it was the combination of having one of the mentors at boot camp openly tell our cohort that he went through the gauntlet himself and even cried, along with my cohort mates being pretty open about losses, that helped to validate my experiences.
Imposter syndrome is real. You should read this well-written and researched blog by Alie Brubaker about experience it in software engineering boot camps.
Ask those questions anyway, even if you feel stupid or are afraid others will negatively evaluate you for not knowing. You don't need to struggle with course materials needlessly and add extra stress to your plate or fitter away hours that could be better spent on other coding related endeavors. This can be really hard to do particularly if you are in the grips of imposter syndrome. Gaining expertise in my experience has a few stages with the beginning and the end involving having lots of unanswered questions. At the start it's because this is novel material and as you actually move toward high levels of expertise its because you know that there is always more to learn and discover.

I'm Glad I Did It!

If you attended a SE boot camp and have some additional things you wished you knew on Day 1 please drop them in the comments below. I hope you found this post helpful and happy coding!

references:
Brubaker, A. (2022). Experiencing imposter syndrome in software engineering bootcamps. Retrieved from https://medium.com/@findingalberta/experiencing-imposter-syndrome-in-software-engineering-bootcamps-d070e4032a35

cover photo: Photo by Kevin Ku on Unsplash

An Easy Method for Resetting Your Linux Password on WSL

Kelly — Tue, 13 Sep 2022 15:46:55 +0000

Ok, so I was totally going to write this post about some of the flags you can use when using rails g to make files for your project. However, while working on a new project I needed to use a sudo command that required my password and I had forgotten it. I wish I could say this was the first time that I had to reset my password but seeing as this was not I figured I might as well save some folk a bit of searching a trouble as this is what has worked well for me.

When you installed Linux using WSL in Windows you are asked to create a username and password. This user is automatically logged on whenever you start Linux on WSL, so if you forget your password its not so important unless you need to do something like run a sudo command. I personally use Ubuntu and have verify that these steps have worked for me and I believe that should work for other Linux distributions on WSL as well.

Steps:

Switch the default user to root
Reset the password for the normal user
Switch the default user back to the normal user

Step 1: Switch the default user to root

Before switching the default user to root it would be best if you took note of your account's normal username. (You need this to reset your password and set the default back)

Switching to the root user is done through the Windows Command Prompt. Which command you run will depend on your Linux distribution. This information can usually be found in the description of the app in the Widows Store.

Open the command prompt from the Windows start menu. You can find it by searching for cmd in the search bar.

In the command prompt you would enter your distribution's command. For me using Ubuntu it was:

ubuntu config --default-user root

Here are some other commands for other common distributions:

image credit:https://itsfoss.com/reset-linux-password-wsl/

Step 2:Reset the password for the normal user

Now reopen your Linux distribution app and you should be logged on as root. At this point we can rest the password for the normal user account. Use the following command with the username you hopefully noted down earlier:

passwd username

It will ask you to enter a new password. When you type here, nothing will be displayed on the screen. That’s normal. Just type the new password and hit enter. You’ll have to retype the new password to confirm and once again, nothing will be displayed on the screen while you type the password.

Hurrah! This should have reset your password. You are almost ready to move forward with well, whatever you were doing before you had to plunge down this rabbit hole...

Step 3: Switch the default user back to the normal user

For the final step you will need your username associated with the password you just reset and the command prompt again.

Start the Windows command prompt for your distribution as you did in Step 1. You will be using a similar command to the one we used to switch to root. This time we will be replacing root with whatever your specific username is. Remember to use the prefix specific for your distribution. So for me it was:

ubuntu config --default-user username

Now the reopen your distribution app and you should be logged on the the normal user. Your new password should be working and you should be good to go with running your sudo commands. If you forget your password again, you can now reset it with a few steps. Hopefully, this was useful for you to get back on your coding journey. Happy Coding!

Lazy Method: Just the Basics

Kelly — Sun, 21 Aug 2022 21:27:00 +0000

Recently I've been working with Ruby as I upskill. During this I have come across some enumerable methods such as, lazy and zip, that I think are interesting and likely highly useful in certain circumstances, but not as common as, the ones used for sorting, collecting, and selecting. In this post we'll be talking about lazy.

What do we mean by lazy in Ruby and why would we want to use it?
Lazy is a special type of enumerator, that allows for the construction of chains of operations and evaluating them on an as-needed basis. Lazy was added to Ruby as a way to improve performance by reducing unnecessary memory consumption when dealing with huge amounts of data. Since it is designed to be chained with other enumerable methods it actually overrides some of them so that the array is only iterated over once with a lazy analogue.

Let's look at an example:

Assume that we have 1000 user profiles from a pet lovers forum. Let's say, we would like to get 10 user profiles in which the user has a pet bird.

In the above example the first approach does not use the lazy enumerator so in order to return the sample of 10 users we want the whole array is iterated even if the first 10 users just happen to have pet birds. In the second example with the lazy enumerator each user is fetched one-by-one without iterating over all 1000 users at once. The loop ends when 10 users are fetched who meet the required condition, having a bird.

An important thing to note with the #lazy method is that it is not actually faster with smaller arrays according to post-release testing but it is is still useful for when the evaluation of the whole chain is too expensive or not possible.

Finally, the lazy method must be called with a code block, even if it is chained to a method that does not require one.

Use this method a bunch? Experimenting with unfamiliar techniques? Either way I'd love to hear how you like to use .lazy best. Good luck with breaking stuff, figuring it out, and savoring the satisfaction of the "Ah Ha!" momement. Happy Coding!

references:
Ghorpade, A. (2019, Oct 23,). Ruby lazy enumerators. Retrieved from https://blog.saeloun.com/2019/10/23/ruby-lazy-enumerators.html

Mihailov, I. (2012, -03-13T11:24:09+00:00). Ruby 2.0 enumerable::Lazy. Retrieved from https://railsware.com/blog/ruby-2-0-enumerablelazy/

The Map Method to Render Data in React

Kelly — Sun, 31 Jul 2022 00:33:20 +0000

Perhaps you are compiling an application for a community center, a gardening store, or need to display user information and that data is contained in an array. How do you render that data in React?

Below is an example of an array of objects that might be listed on a community site.



Example Array
const listings = [
    {
      "id": 1,
      "description": "heater",
      "image": "./images/heater.jpg"
    },
    {
      "id": 2,
      "description": "2019 Toyota Tacoma grill",
      "image": "./images/toyota-grill.jpg"
    },
    {
      "id": 4,
      "description": "FREE Hundreds of DVD/CD Cases - Different Sizes and Colors",
      "image": "./images/dvd-cases.jpg"
    },
    {
      "id": 5,
      "description": "wood",
      "image": "./images/wood.jpg"
    },
    {
      "id": 6,
      "description": "Beautiful couch",
      "image": "./images/couch.jpg"
    },
    {
      "id": 7,
      "description": "Treadmill Parts For Free",
      "image": "./images/treadmill.jpg"
    }
  ]

Ok, now that we have our data how are we going get on the UI? One way to do it is by using the map method. You may be familiar with this method from vanilla JavaScript. It creates a new array which is populated by executing whatever actions the callback function requests on each of the elements in calling array. The MDN documentation can be found here:(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

Here is an example of rendering data with Array.map() in React in the same functional component.



import React from "react";
import { listings } from "../data";

function ListingCard() {
  const listingComponents= listings.map((listing) => (
  <div key={listing.id}>
    <h2>{listing.description}</h2>
    <img src={listing.image} alt={listing.description}/>
   </div>  
  ))

  return (
  <div>
    <h1>Free Stuff Page</h1>
    {listingComponents}
  </div>
  )
}

export default ListingCard;

Here is our data rendered!

Ok let's talk a bit about the code.

We have an array of items (listings) that we want rendered on the Free Stuff Page of a local community app. We used the Array.map() method to render the listings data. This method loops through the array and gives you access to each item in the array in a callback function. In order to get your items rendered you will need to return the JSX elements you wish to see.



const listingComponents= listings.map((listing) => (
  <div key={listing.id}>
    <h2>{listing.description}</h2>
    <img src={listing.image} alt={listing.description}/>
   </div>  
  ))

In the example above we are returning an h2 HTML element that displays a the description of the item and an img HTML element that displays a picture of the item with alternative text that is equal to the description. You may have noticed that both of these items are wrapped in a div HTML element, that is because all of the elements must be contained inside one JSX/HTML element so if you are returning multiple elements be sure to wrap them.

Additionally you may have noticed that we assigned a key that is not displayed and we don't seem to use again. When you are using Array.map() in React you must pass the key prop. React uses this key internally to keep track of items for multiple reasons. If don't pass one you will most likely get errors and risk some potentially suspect behaviors by React. Therefore, it is important that each item has a unique value for a key.



 return (
  <div>
    <h1>Free Stuff Page</h1>
    {listingComponents}
  </div>
  )

Finally, we passed our entire JSX element associated with the const listingComponents to the portion of the functional component being rendered. While we could have called .map() on the array inside the div that is holding our components to be rendered we did not in order to make our code easier to read and easier to debug if something goes wrong with that particular element. In this instance the application display is simple and so these are less likely to be issues but it's a good practice.

Another thing to note about the code, curly bracers { }.They are around both our listingComponents variable and the display items to be rendered that are returned from mapping our array. The curly braces are syntax to let the JSX parser know that it should understand that part as JavaScript.

Here is another example where we are performing Array.map() and then passing the results to another React component for destructuring and rendering:



import React from "react";
import PlantCard from "./PlantCard";

function PlantList({plants}) {

  console.log(plants)  
  // sanity check and to make sure that our props 
  // are what we think they are
  const plantCardComponents =plants.map((plantObj)=>{
    return(
      <PlantCard
        key={plantObj.id}
        name={plantObj.name}
        image={plantObj.image}
        price={plantObj.price}
        />
    )
  })

  return (
    <ul className="cards">
       {plantCardComponents} 
    </ul>
  );
}

export default PlantList;

Above we receive the prop of plants which is an array of objects that were fetched in the main React component App and passed to our PlantList component.

Then after executing Array.map() on plants we are passing the JSX component we created PlantCard with the key:value pairs of interest we want to have access to in the PlantCard component. Here our key:value pairs are all within PlantCard so we don't need to additionally wrap them in a div or another HTML/JSX element, like when creating multiple individual HTML elements as part of executing Array.map() in the first example for posting free stuff.

Next lets look at PlantCard which we passed our mapped array as the prop {plantCardComponents}. In this example, plantCardComponents has been destructured into component props so that we are only utilizing the values we assigned to image, name, and price. This helps cut down on repetitive code, limits the data we are passing about, and makes the below component easier to read/closer to DRY.



import React from "react";

function PlantCard({image, name, price}) {

  return (
    <li className="card">
      <img src={image} alt={name} />
      <h4>{name}</h4>
      <p>Price: {price}</p>
    </li>
  );
}

export default PlantCard;

Here is our rendered data:

Thanks for reading this post! Good Luck in your React and .map() endeavors and Happy Coding!

Basic Introduction to Functions in JavaScript

Kelly — Mon, 11 Jul 2022 03:40:16 +0000

Functions are one of the foundational components in JavaScript programming. Functions give us a way to do many things including structuring larger programs; reducing repetition; return values; associate names with subprograms or useful code blocks that will execute an action we may require multiple times under different context within our code, sometimes referred to as “helper functions”; and isolating different subprograms and actions from each other.

What is a function?

A function is created with an expression that starts with the keyword function. Functions are named and that name becomes associated with whatever we tell the function we want it to do. Functions also have parameters and a body, which contains the statements that are going to be executed. Functions only execute their actions when explicitly told to do so which is referred to as calling or invoking. Invoking a function requires us to tell the program which function we want it to execute by using its variable name and an argument. Functions can be written using differing styles of notation, in this piece I will be dealing with declaration notation with the others considered outside the scope of this writing.

Base function syntax:
function name( parameter1 ) {body}

Base function invocation:
name( argument )

A quick note on naming variables in functions and naming in general in JavaScript. The convention for naming in JavaScript is camelCase, that is, the first word in a compound variable name is lowercase and all following words are uppercase. You can use any letters or number you would like and can also use the $ and _ symbols as well. However there are quite a few words that you should not use as variable names because those words are considered reserved, either because they are currently predefined in JavaScript or they will be in the future. There are also words that used to be reserved but have been removed from the reserved list. However, it is not recommended to use words removed from the list because it may cause compatibility issues for instances when the newest version of JavaScript is not fully supported. A list of reserved words and more information can be found here: https://www.w3schools.com/js/js_reserved.asp

Parameters, Arguments, and Return in Functions

A function can have multiple parameters or no parameters at all. In the following example, coinDrop does not list any parameter names, total has 2 parameters, and skippedStone below lists one:

A parameter is a placeholder that stores whatever value is passed to it as an argument when it is invoked.

In the example above when we pass the argument “Splash!” to our function skippedStone the console log will display “Splash!”. Arguments are the actual values that we include in our invocation and are passed to the function, whereas, parameters are the named references (i.e. placeholders) where we store those passed-in values. This allows for flexibility in the creation and usage of JavaScript functions as an argument can be any JavaScript expression, from numbers or a simple string to another entire function.

Some functions produce a value, such as total, and some don’t, such as coinDrop, whose only result is a side effect. A return statement, starting with the return keyword determines the value the function returns. Setting up your function so that it returns a value means that value is available to be used elsewhere in your program. A return _keyword without an expression after it will cause the function to return _undefined. Functions that don’t have a return statement at all, such as coinDrop, similarly return undefined.

Scope in Functions

Scope is a complex topic and here we are only going to touch on the very basics. Every variable in JavaScript has a scope or where it can be seen and accessed by the program. For those variables defined outside of any function or code block, the scope is considered global and the whole program has access to these variables and can be referenced anywhere in the program.

Variables that are created for function parameters or declared inside a function can be referenced only inside that particular function. The scope in this instance is considered to be local as only that function can access it. Finally, those variables that are declared with let and const inside a particular block are visible only within that block. Therefore, given a function with a loop in which variables were declared, the variables would not be visible to the code before or after that particular block.

What is visible or within scope inside a block is determined by the placement of that block within the program text. All local scopes can also see all the local scopes that contain it, and all scopes can see the global scope. A way to think about this if you are having trouble wrapping your mind around it, is to consider each function or code block having one-way glass around it, those on the inside can see out, but those outside cannot see in.

Conclusion

Functions are one of the most utilized and versatile tools in JavaScript. Having a good foundational understanding of them can help improve your ability to code dynamically, chase down errors, avoid unnecessary repetition (e.g. DRY code), participate in refactoring, and just make you a better programmer in general. So go and experiment with them, break your code and savor the feeling when you finally get it to work! Good luck and happy coding!

References

M. Haverbeke, Eloquent javascript: A modern introduction to programming, 3rd ed. San Francisco, CA: No Starch Press, 2018.

Flatiron School, “Review: Functions,” in Flatiron Canvas Dashboard, 2022.