DEV Community: Cindy Hernandez

Sales to Tech: Navigating My Career Change Journey

Cindy Hernandez — Tue, 05 Sep 2023 22:34:39 +0000

My journey towards becoming an engineer has been a testament to this belief, marked by unwavering perseverance and unyielding determination in the face of countless challenges and setbacks.

My coding journey was far from a straightforward path. It began with a humble Python course on Udemy, a mere spark that ignited a long and profound learning experience. The realization that coding was my true calling came gradually but with absolute certainty. I knew I wanted to pursue this path for the long term.

To make this dream a reality, I embarked on a rigorous schedule that demanded discipline and dedication. Balancing a full-time job, a side business, powerlifting training, and coding classes which were not easy. Yet, I understood that this was the future I envisioned for myself, and I was willing to put in the hard work required to get there.

The pivotal moment in my journey came when I decided to take a leap of faith and enroll in a coding bootcamp. Leaving behind my long and stable career in sales was a risk that weighed heavily on my mind. However, I was prepared to bet on myself because I believed that coding was my true calling, the path to my future.

The path to the bootcamp was not without its trials. Life threw unexpected obstacles my way, including the unexpected loss of my job months before starting my bootcamp and the threat of losing my apartment. Many would have faltered, but I was determined. I had committed to this journey, and I refused to let adversity deter me from my dream of becoming a software engineer.

In my pursuit, I leveraged the resources at my disposal and sought sponsorship by networking with business owners and company presidents. Their support allowed me to continue my education and training, reinforcing my belief that determination and tenacity could surmount any obstacle.

Completing the coding bootcamp was a significant achievement, but it didn't come without its own set of challenges. After graduation, I found myself in a precarious position. My sponsorship had ended, and I had exhausted my savings. Despite numerous job applications and networking efforts, rejection emails piled up.

Faced with this harsh reality, it was a tough decision that required me to make some difficult choices. One of those choices involved ending my apartment lease, knowing that I could no longer afford it. This meant I needed to find temporary housing, relying on the generosity of friends and family who offered me a temporary place to stay. In this period of transition, I took a step back and drew upon the sales skills I had honed over the years. I secured a sales position that would provide for my immediate needs while I continued to pursue my dream. I turned to local coffee shops, not only as places to work on coding projects but also as environments that fostered my learning and provided me with the resources to continue applying for jobs in the tech industry.

This phase of my journey has undoubtedly been one of the most challenging, testing my resilience and determination to the limits. Yet, through it all, one thing remains steadfast: my dream of becoming a software engineer. As I sit in a local coffee shop, writing this essay, I am determined in my commitment to this goal. I am about to start a new job in sales, registered for my first hackathon, and as I continue the hunt for a permanent place to live and diligently work on coding projects after work.

In conclusion, my life has been a testament to unwavering perseverance and unyielding determination. My journey towards becoming an engineer has been a continuous battle against adversity, but I have learned that it is precisely during the most challenging times that our determination shines the brightest. My commitment to this dream is unwavering, and I am ready to bring this same determination and tenacity to my future as an engineer.

React Hooks: useContext

Cindy Hernandez — Wed, 26 Jul 2023 02:29:07 +0000

If you are learning React, you have probably come across something called Hooks. One of the many useful hooks is
useContext.

What Is useContext?

This is a way to share values between components without having to pass a prop through every level of the tree. Instead, we define it on a global level and it can be accessed in any child component.

We begin by creating an AppContext component where we will set all global states.

We need need to make sure that we wrap all the global state variables around a

Once the AppContext component is created we can then go into our index component, import AppProvider, and wrap our with

Once all of that is completed we can start using those global states in our components.

When Should I Use useContext?

useContext is great when you have some data that many different components need to access. It saves you from having to pass that data around through props, which can get confusing and messy.

Constructing a Restful API with Flask

Cindy Hernandez — Wed, 21 Jun 2023 16:19:21 +0000

Security is a vital aspect of web application development. With Flask, you have the power to build secure applications by following a few important practices. In this blog post, we'll explain the concept of RESTful APIs and show you how to create one using the Flask framework.

Understanding RESTful APIs:
RESTful is a framework that emphasizes being lightweight and resource-focused. It has become widely adopted in modern web services due to its simplicity and scalability. By representing resources as URLs and utilizing the appropriate HTTP methods, you can create an API that follows REST principles.

Establishing a Flask Application:
Before getting started with API development, we need to set up a Flask project. Begin by installing Flask and creating a virtual environment to keep dependencies separate. Once the project structure is ready, we can move on to building our RESTful API.

1. Install Flask:

pip install flask

2. Create a Virtual Environment:

python -m venv env

3. Activate the Virtual Environment:

MacOS/Linux:

source env/bin/activate

Windows:

.\env\Scripts\activate

4. Set Up the Project Structure:

Create a new directory for your Flask project, then create a new Python file, **app.py**

5. Build Your Flask Application:

Open the app.py and start building your Flask application
-Import Flask Module, create an instance, define your routes and endpoints

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Welcome to my API!'

if __name__ == '__main__':
    app.run()

Request Management and Routing:
Flask provides a flexible routing mechanism that allows us to map URLs to specific functions. We can take advantage of this feature to define routes for different endpoints in our API. Each route will handle requests using the appropriate HTTP method, such as GET, POST, PUT, or DELETE. By organizing our routes effectively, we can ensure proper handling of requests and manipulation of resources.

Data Serialization:
To send data between the client and server, we need a standardized format. JSON is a widely used choice for serialization because its simple and compatible. Flask has built-in support for JSON serialization, and there are additional libraries like Flask-RESTful or Marshmallow that provide extra features for complex situations. In this guide, we'll show you how to convert Python objects to JSON and vice versa, making it easy to work with data in your Flask API.

Verification and Authorization:
Securing our API is crucial, and authentication plays a vital role in controlling access to resources. Flask extensions like Flask-HTTPAuth make it easier to implement these mechanisms. By incorporating authentication and authorization, we ensure that only authorized users can access protected resources in our API.

Forging Endpoints:
Endpoints are the building blocks of our API, defining the available resources and the actions we can perform on them. In this guide, we'll walk you through the process of creating endpoints for different resources using Flask's routing mechanism. You'll learn how to handle essential CRUD operations (Create, Read, Update, Delete) and interact with a database using Flask's ORM integration, like Flask-SQLAlchemy. By the end, you'll have the knowledge to build powerful and dynamic APIs with Flask.

Assessing the API:
Thorough testing is crucial to ensure that our API works correctly and reliably. In this step, we'll introduce handy tools like Postman that allow us to make requests to our API and examine the responses. We'll provide sample test cases for different endpoints and show you how to check if the API behaves as expected. Robust testing helps us catch any bugs and ensures that our API functions as intended.

Creating a Rock, Paper, Scissors Game using Python

Cindy Hernandez — Wed, 24 May 2023 20:36:40 +0000

The goal was to create a rock, paper, scissors game that the user can play against the computer.

Press the RUN button to play!

If we take a look at the main.py file we will be able to see the breakdown of the code. We begin by making the text art images and set them as variables.

We can then set the text art image variables in a list, that way we are able to print the image along with the player and computer choice.

In order to receive the number we need to create an input that will be saved as a variable when the player types their choice.

After this section it is important to create an if/else in case the player types an invalid number that is not (0-2).

Now we can work on creating the computer choice. The computer choice variable will equal a random integer from 0-2.
In order to use random.randint() we must import the random module.

In order for the game to execute the correct win or lose we need to create if/elif/else statements.

Text art sources: https://gist.github.com/wynand1004/b5c521ea8392e9c6bfe101b025c39abe#file-rps_ascii_art-py

Preparing for Code Challenges

Cindy Hernandez — Mon, 01 May 2023 15:24:45 +0000

We all know learning how to code is not easy, it requires focus, patience, and consistency. Attending a 15 week coding bootcamp has helped me adapt new learning methods. In phase 2 of my bootcamp I figured out the best method that helped me prepare for my code challenge.

Let me begin by saying that preparing for a code challenge is stressful! I remember forking and cloning a practice code challenge and sitting there for 15 minutes staring at the screen unsure of where to begin.

I had to take a step back and figure out a method that works for me, hopefully this can help others that may be feeling the same way.

Here are a few tips that helped me get through phase 2 of learning React:

Watch the entire practice coding challenge video lecture without taking any notes
Take a moment to watch the video lecture a second time and this time code along
As you code along take screen shots of your code and write a short summary or bullet points of what you just learned
(This helped me see what were some of the concepts I was struggling with)
After you grasp the concepts attempt a different practice coding challenge
Time yourself when you are completing a practice code challenge
If possible complete a coding challenge with a team of 2-3 people (one person shares screen and collectively complete it)
If you are still struggling, narrow down what are some of the concepts you are struggling with
Having a solid foundation in Javascript basics will make it easier to understand React's syntax and programming concepts

Examples below:

Start small and build up:

When faced with a coding challenge, it can be tempting to dive straight in and try to solve the problem in one go. However, this can often lead to frustration and a lack of progress. Instead, start by breaking the challenge down into smaller parts and tackling each one individually. Build up your solution step by step. This approach will help you stay focused and motivated, and will also make it easier to identify and fix errors.

Break down the problem into components:
React is all about building reusable components and understanding the flow of information. When faced with a coding challenge, try to think about the problem in terms of components. Break down the problem into smaller parts and build components for each one.

Information Flow in React

Cindy Hernandez — Mon, 01 May 2023 15:11:26 +0000

What is information flow in React?

Information flow refers to the way data is passed around between components in a React application. In React data flows in one direction - from the parent component to its child components. This is known as unidirectional data flow.

Since data only flows in one direction, it's easier to track where it comes from and where it's going. This makes the application more predictable and easier to maintain over time.

How does information flow work in React?

In React, data is passed from the parent component to its child components through props. Props are read-only and cannot be modified by the child component. This means that if a child component needs to modify the data, it needs to notify its parent component by passing a callback function

Example:

Here we have a parent component called App and the child component below called Header.

App has a state variable called isDarkMode, which functions as a boolean (true or false).

The onToggleDarkMode function and isDarkMode state variable is then passed to the Header component as a prop.

When the button is clicked it calls the onClick function that we see in the header component that allows the user to toggle from light to dark mode.

Benefits of unidirectional data flow:

With data flow in one direction it makes it easier to debug and maintain overtime
Components can be reused in different parts of the application
Unidirectional data flow makes it easier helps make it easier to break the application into smaller and manageable components.

Sources:

React Information Flow, Flatiron Learning Module

JavaScript functions

Cindy Hernandez — Tue, 07 Mar 2023 16:24:00 +0000

What are functions?

Functions are like recipes.
They execute a set of instructions on data or variables and return the result.

Functions can be recycled
Helps keep your code DRY ("Don't repeat yourself")

If you are like me and need an example to visualize what functions do here is one.

Example:
Let's just say we have an espresso machine that can be programmed to make customized drinks.

It allows you to enter a command that will instruct the machine to brew espresso, add hot cocoa mix, and froth milk. Can you imagine how tedious it can be to type all steps every morning? What if we have more than one type of drink, when some drinks require more steps.

Instead of typing each step everyday, what if we could create functions with all the steps in the code block?

For the sake of this example, I used keywords that relate to the explanation above.

How to create a function:

Use the function keyword
Name the function

In this case we named it makeMochaLatte

We add a set of parenthesis and curly brackets

makeMochaLatte(){}

The first curly bracket is the beginning point and the second bracket is the end point of the function
Everything inside of the curly brackets is called the block of code
Lastly, we call the function makeMochaLatte();

Now that we learned the simplest form of a function. What if instead of just saying makeMochaLatte(); we do something like this.

In the example above we see the word "cups" in makeMochaLatte(cups){}, we call this a parameter, the word cups is used like a variable that is bound to the input.
Now when we call the function makeMochaLatte(3); we are giving it an input of 3, this is called an argument.

By giving it an input of 3 we are essentially specifying that now we have a variable named cups that is equal to 3.

This is not the only way to write functions, but that is another topic we can dive in the next blog.
I will go over various ways you can write functions, such as arrow functions, expression functions, and functions with multiple parameters, and arguments.

Sources:

"Methods and Functions", CodeCademy https://www.codecademy.com/article/fwd-js-methods-functions
Yu, Dr. A. "Functions Part 1"
https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12371950#questions
Yu, Dr. A. "Functions Part 2"
https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12373850?start=0#overview