Forem: Samantha Frangi

Temporary Discomfort for The Sake of New Opportunity

Samantha Frangi — Mon, 19 Sep 2022 23:57:35 +0000

Here is an honest account of my experience at REFACTR.TECH this weekend - my first ever tech conference.

I'm naturally an introvert. Talking to strangers gives me anxiety and loud crowded scenes make me 😵‍💫

The time leading up to the conference, I kept telling myself I was going to get out there and meet all the people I've talked to online and get photographic evidence that I can talk to people. I told the internet I was ready to meet everyone there and excited to step out of my comfort zone.

It kind of went like that. When I got there, I was immediately overwhelmed. There were people walking and talking everywhere. Developers, managers, PMs, typing away on computers and taking quick meetings. Some people came with their team. I felt so so small.

Searching for a lunch table, I felt like I was in high school again. Asking "Can I sit here?" to a group of people wearing company swag & trying to find a way into the conversation was really tough. Not impossible, but it took a lot of effort.

Going to tables where companies paid to be there and scout for talent, I felt so weird being like "Hey tell me about this company, I'm looking for a job and I'm entry level." Obviously I didn't say it exactly like that... but people did give me funny looks, so if you have any suggestions on some openers I can use, please let me know.

I got to talk to a few people though, and I'm really glad I pushed myself to do so. I met some online friends, even though it turned out to be only hello from me cause I forgot how to talk.

However, that's enough of the stress.

This is why I will attend another conference

(even though I said I never would again)

I got to attend a talk given by Shaundai Person (@shaundai on Twitter) where she decoded technical terms she's heard while working in ways a five year-old could understand. This talk resonated with me because I am new to the industry, never worked on a dev team before, and sometimes when I read technical docs I feel so lost that I begin to wonder if I'm actually supposed to be a developer.

Angie Jones (@techgirl1908) helped me understand the concept of decentralized identities - something my boyfriend has been talking to me about for months, but it just didn't click. Now I'm ready to buy a .eth address.

Nerando Johnson (@nerajno) not only came up to me randomly before his talk to be aggressively supportive of my journey lol, but also talked about the importance of building a community to build coding skills. He was a complete stranger that randomly decided to inspire me.

Cecelia Martinez (@ceceliacreates) made debugging look fun and easy during her talk and provided simple inspiration as a latine woman working in a white male dominated industry.

Mark Noonan (@marktnoonan) talked about the importance of accessibility when building applications, how to frame questions about design choices, and creating a process for yourself to avoid spending unnecessary time fixing preventable mistakes.

These were just some of the talks I got to attend, but the most relevant to me as a newcomer. I might have been able to get this information through my own searching, but it could have been harder to understand and not as memorable.

Stepping out of my comfort zone allowed me to meet some great people and learn new things. Sometimes the extra push is worth the opportunity.

How do you tackle new situations? What helps you break the nerves?

styled-components

Samantha Frangi — Sun, 17 Jul 2022 19:19:13 +0000

A couple nights ago, I was working on a project that I'm building in React.

Making sure I'm referencing class names correctly and importing CSS files in the right places was something I've done before. This time, none of my styles were applying and I'd done all the troubleshooting I could. So I hit up Google and look up "styling in React". Very broad search terms, I know, but it helped me find styled-components.

What is styled-components?

In short, styled-components allow you to write CSS in JS files.

I'd never used styled-components before, and I only remembered hearing about it very briefly.

First, I had to install the styled-components package. To do so I ran:

npm i styled-components

Then, I got to work on my Footer.js file.

The Footer component came out like this:

import { Link } from 'react-router-dom'
import styled from 'styled-components'

const SiteFooter = styled.footer `
  position: fixed;
  background-color: #8FBB99;
  bottom: 0;
  width: 100%;
`

const linkStyle = {
  margin: "1rem",
  textDecoration: "none",
  color: "white",
}


function Footer() {
  return (
    <SiteFooter>
      <Link to="/contact" style={linkStyle}>
        Contact
      </Link>
    </SiteFooter>
  )
}

export default Footer;

And voila! We have a footer 🎉

By importing styled from the styled-components package, I am able to create a React component that will render the selected HTML element.

Let's say I wanted to make a div that is a red square. Styled-components allows me to reference the red square as a component that I might name ... RedSquare.

const RedSquare = styled.div`
    width: 100px;
    height: 100px;
    background-color: red;
`

In SiteFooter, you'll notice that the CSS is written inside of back ticks - these are tagged template literals. An easy way to think of tagged template literals is like a function.

Benefits of using styled-components

A footer was a great reason for using styled-components because it requires minimal styling.

Since I've handled all the styling in the component itself, I don't have to search through files for the class-name and make changes. Styling, markup, and logic are all in one file and makes for a smooth developer experience.

This has been quite the unlock in my deep dive into React!

What are your favorite things about React?

You should ask that question anyway

Samantha Frangi — Thu, 24 Feb 2022 00:56:20 +0000

When I first started learning to code I was taking in so much new information that I was overwhelmed I didn't know what questions to ask. I spent a month struggling through explaining what I was trying to accomplish with my code and getting frustrated when I didn't sound like someone who should be writing code. So silly of me.

One thing I've observed through the years in myself and in others is that we are often afraid to admit when we don't know something. We either don't ask the question and struggle in silence or when we do ask we go ahead and assume that the person we ask thinks we are dumb - "This is a dumb question, but..."

Keeping your question to yourself out of fear of sounding "dumb" only slows down learning. The person who you ask is probably excited to share some knowledge with you or learn with you. You should ask it anyway.

I'm definitely no expert, but finding solutions has become fun and interesting since I began asking more questions. This is what I have done to get better and for some I know it may seem obvious, but for me it wasn't and I'm glad I'm in the know now!

Making my questions more specific by avoiding words like "this" or "it" when I'm referencing parts of a problem has also been a tremendous help. I would get so frustrated when I would tell someone, "I'm trying to get this array to turn into a this string -" when the other person is like "Huh?" I'm like "How do you not see what I see?!?"...

It's because they aren't working with that problem, Samantha! The person whom you seek the answer from needs context even if you don't know the technical terms for everything, struggling through and giving context can not only help you find the solution, but you can learn how to structure your question the next time you have one.

Another helpful tip is to break your problem down into sections, so you only have to ask about a specific piece of the problem. Practicing this has kept me focused and has given me a deeper understanding of the overall solution once I reach it. It's definitely not a quick way to a solution, but it's so important.

These are just some small tips, but I can tell you I have seen such an improvement in my learning experience.

I always want to know how to become better at finding solutions. If you have any tips that helped you, please share them with me! As a new dev, I love hearing different perspectives.

Type Conversion in Python

Samantha Frangi — Mon, 07 Feb 2022 21:30:40 +0000

Data types are usually one of the first lessons we have when learning a new programming language. Data types in Python would include:

String (str)
Numeric (int, float)
Sequence (list, tuple)

Up until now, I've written in JavaScript and if I wanted to concatenate a string that also included a number it would be very simple.

You can easily write this into a JS file and return a string:

let age = 25;
console.log('im yungbeansprout and im ' + age + ' years old');

Age is a number and this printed in the console as a complete string. This is because of implicit type coercion. JavaScript knows to turn the age into a string type.

If I wanted to do this exact task in Python, I would get a different response. Here's how to write it in Python:

age = 25
print('im yungbeansprout and im ' + age + ' years old')

It would return an error like this:

This is where type conversion comes in. Type conversion will allow us to turn our current data type (number) into a string so it can join the rest of his friends!

Here is how we would fix this problem:

age = 25
print('im yungbeansprout and im ' + str(age) + ' years old')

Notice how all I did was wrap age in parentheses and write str before it. In Python, this changes our data type.

You can follow this same pattern when converting other data types and now you shouldn't have to worry about your strings returning any errors. Yay!

Creating a database using PostgreSQL

Samantha Frangi — Sat, 05 Feb 2022 20:20:05 +0000

Why are databases important? When we access our favorite applications like Twitter and Instagram, we are able to log into our accounts and access our posts and those of the accounts we follow.

The photos, comments, user information, etc. is data. To keep it available to everyone it needs to be stored somewhere so when I make a request to see Kanye West's Instagram profile I can see everything he's posted (that is, if he doesn't delete all of his posts for his next Yeezy campaign).

If we think about what else would be stored in Instagram's databases we would start to get overwhelmed (and we have every right to be, it's a lot of data)! How can we store a large amount of information in a clean, concise way? We do this by creating a relational database.

Relational databases are set up in tables, exactly the way we know them. You have rows and columns that are filled with the data we need. What makes them unique is that we can create multiple tables that all contain information related to one another and access them using IDs. At the end of this adventure we will have created a database with related tables and accessed the data.

Click here to download PostgreSQL for Mac users.
Here to install if you are using Ubuntu.

To get started, we'll open the terminal and run:

Okay, now we're rockin' and can create our first database! Here is the command we will write:

CREATE DATABASE bikes;

In order to see if your database was created enter \l and it will show you a list of your databases. Once you've confirmed we will run the following command to connect to our new database.

\c bikes

Okay! Time to create our Schema for the bikes database. The Schema here is going to be the foundation. This tells us what data we are trying to store.

CREATE TABLE models (
 id serial PRIMARY KEY,
 name varchar NOT NULL,
 style varchar
);

Serial is an integer that will allow us to create our IDs in sequential order (0, 1, 2, 3). PRIMARY KEY lets us know that this will be the key we use to identify the item in the table. NOT NULL means that there has to be information in this field, it cannot be empty.

Here is how to insert data into our table:

SELECT * FROM models;
INSERT INTO models (name, style) VALUES ('Roscoe 7', 'MTB');

Phew! We entered in our first item! To double check that your item went in correctly, run SELECT * FROM models; again and that is how you can display your table.

Okay, I realized that I can access the name and style of the bike I want, but I don't know what brand it is. Let's create a new table for it.

CREATE TABLE brands(
 id serial PRIMARY KEY,
 name varchar NOT NULL,
 models_id integer NOT NULL REFERENCES models (id)
);

This table is very simple and allows for us to access the data in the models table.

To insert data:

INSERT INTO brands (name, models_id) VALUES ('Trek', 1);
SELECT * FROM brands;

We know how to see each table and its data, how can we show all the data from both tables we created? We do this with JOIN:

SELECT * 
FROM models m
LEFT JOIN brands b ON m.id = b.models_id;

The b and m are making abbreviations for the table names so I don't have to write it out.

Ok! Snap, crackle, pop. That was fun! This is just the beginning of creating SQL databases in your terminal. You can also UPDATE and DELETE your items and even create more tables!

I appreciate any and all feedback. That's how I become a better writer.

Unlearning in 2022

Samantha Frangi — Fri, 07 Jan 2022 19:57:31 +0000

Happy New Year!

2021 was a year full of change and learning to adapt. Part of that change was enrolling in my SWE bootcamp cohort in September.

I have three months left of my cohort. Three months and I will be a certified software engineer. I've been working on this for five years and it's finally here! 🪅 🎉

With this said, I've been struggling a lot with the fact that I'm starting to apply for dev jobs. I keep telling myself I'm not ready because there is still so much I don't know.

I get a little frustrated with myself if I can't immediately remember how to write a for loop that I learned in unit 1. Or if I struggle with explaining what problem I'm trying to solve, it can feel so embarrassing. So then I think that maybe I'm in the wrong field.

This week, I thought about what it is that is keeping me from being vulnerable or accepting when I don't know something.

This is my first time building applications and learning programming languages in depth rather than the small exposure I got when I was self-learning. All the work experience I've ever had was in retail, administration, and restaurant and I don't have a CS degree.

In every job I've ever had before the game was usually the same. Be friendly and know how to solve problems like "What do you do if a guest is upset that we put cheese on her burger and she is lactose intolerant?". I've always learned the ropes pretty quickly. Now I feel the complete opposite.

There is not one solution for every problem and there are changes and updates so frequently that I will always be learning. I'll get better of course, but I need to remove the pedestal I've put myself on and allow myself to be wrong sometimes if I want to.

So for 2022, I'm going to take this epiphany I had and really put it to use. To go easy on myself, put in the practice, and everything else will fall into place. A year to unlearn a potentially toxic mindset.

Thanks for allowing me to share some of my story, if you can relate I hope you are kind to yourself this year as well.

Intro/Creating a Database with MongoDB and testing it on Postman

Samantha Frangi — Sat, 20 Nov 2021 22:24:53 +0000

Hi! My name is Samantha, a brand new software dev!

I have been learning to code for five years and this year I joined a bootcamp to get a structured curriculum and have a community to lean on when I’m stuck and need to see things from a new perspective.

My goal with this account is to practice what I learn by creating examples and talking through it. I hope to be able to reflect and see my progress and learn new techniques.

If you are also a new learner, I hope this helps you. Aight, let's get into it!

By the end of this post you and I will be able to:
build a server using node.js and express
adding routes
testing those routes using Postman
adding data to a database using MongoDB

You’ll want to start by creating a directory (folder) with your project name. Mine will be fav-shows and inside of fav-shows i will touch (create) and file named server.js . Once they are created, I will open Visual Studio Code and start! :D

Before I start typing anything, I’m going to run node.js and install express in the VSCode terminal using npm init -y and npm install express.

Next, we’ll set up our basic server. To do so we’ll call express, assign our port, and then tell it to listen. You’ll notice a console log and this is for the purpose of making sure we set up our server correctly (this again will show up later on). To start our server we will use node server.js(or nodemon).

Now we install mongoose and navigate over to MongoDB to gather our DataBase URL and connect it to ‘server.js’. (NOTE: Please do not use the URL I have listed.. this is an example. You will go to MongoDB’s website, create an account and follow the steps for setting up your first “cluster” and getting the connection URL)

Okay, yay!! We did it and now it’s time for the fun stuff… We’ll mount our middleware and add our routes, but before we do this, lets create a schema.

This will go in a new folder called ‘models’ and the file name will be show.js (in my example, yours may be something else). A schema is essentially a template. This is the information that our database will be collecting. Since mine is about my favorite shows, I’ll do the title, year released, and the starring actor.

We can now add out middleware and routes. Each route will have a specific purpose and they go as follows:

Index - will gather all the data in the database
Delete - will allow us to delete a piece of data from the database
Update - will allow us to update any data in the database
Show - will show the data that we choose from the database

This is the final stretch, with everything that we’ve created so far, we can now test our app on Postman. Postman allows us to test each route and add the items to our DB based off the schema we created. So we’ll start with the create route.

Boom! We added something to the database. You can see here that we used POST, the method we used when we wrote the create route. We then typed out our url and highlighted on body, where we entered in our key values and their pairs. To test the others we would follow what we have written for each route. Another example could be the index route, which will show us all of our entries.

Yay! All of the entries are there! Notice I changed the drop down from POST to GET and I did not change anything else. I only hit send.

I've created three databases since I learned this and the practice has really helped me understand how each piece of code works. I hope this helps you too.

Like I always say, feedback is welcome. I will always be a student, even when I graduate and start my career as a developer.

Now congratulations on creating your first database! :D