Forem: Angela Palaszewski

Taking Care of Your Most Important Asset: Health and Self-Care in Software Engineering

Angela Palaszewski — Mon, 24 Jul 2023 19:34:14 +0000

In the fast-paced world of software engineering, developers often find themselves engrossed in long hours of coding, problem-solving, and meeting deadlines. I have been feeling the high demands of the job search, trying to juggle all the things to keep me afloat.

Amidst the excitement and challenges of the tech world, it's essential to remember that your most valuable asset is not your programming skills or the latest technology but your health. Neglecting self-care can lead to burnout, stress, and even long-term health issues. I would like to explore the importance of health and self-care in software engineering and provide practical tips on how to maintain a healthy balance while pursuing a successful job search and career in this dynamic field.

Taking Regular Breaks

It's easy to get caught up in the flow of coding, especially when you're deeply involved in a project. However, sitting in front of a computer for extended periods can be detrimental to your health. To counteract this, make it a habit to take regular breaks throughout the day. The Pomodoro Technique is a popular method where you work for 25 minutes, then take a 5-minute break. After four cycles, take a more extended break of 15-30 minutes.

This is a great Pomodoro timer website I use to hold myself accountable and actually take the breaks when I should. No excuses, even when I'm in the zone.

During these breaks, step away from your desk, stretch, and give your eyes a rest by looking at distant objects to reduce eye strain. Short walks, breathing exercises, or even simple stretches can help to recharge your mind and body, ultimately enhancing productivity and focus.

Stretching Your Legs and Physical Activity

Physical activity is crucial to counteract the sedentary nature of software engineering work. Incorporate exercise into your daily routine, even if it's just a short walk or a quick jog. Regular physical activity boosts circulation, improves mental clarity, reduces stress, and prevents the risk of musculoskeletal issues.

I try to incorporate these into my break time to make the most of the day and keep me energized instead of relying on large amounts of caffeine that ultimately affect my nightly sleep rhythm.

Additionally, try integrating some simple desk exercises, like wrist rotations, neck stretches, and shoulder rolls, to relieve tension and maintain flexibility. This will help prevent repetitive strain injuries, such as carpal tunnel syndrome.

Posture and Ergonomic Desk Setup

Maintaining a good posture is vital for long-term health, especially when you spend prolonged hours in front of a computer. Poor posture can lead to back pain, neck strain, and other musculoskeletal problems.

Ensure that your desk setup is ergonomic. Invest in an adjustable chair that provides proper lumbar support and allows your feet to rest flat on the floor. Position your computer monitor at eye level to avoid straining your neck. Keep your keyboard and mouse at a comfortable height to prevent wrist strain.

Consider using an ergonomic keyboard and mouse that promote a natural hand position, reducing the risk of repetitive stress injuries. Ergonomic equipment may seem like an expense, but it's a wise investment in your long-term health and productivity.

Another wise investment would be a standing desk with or without a portable treadmill underneath. I find keeping my body moving while I'm working allows me to stay focus as well as ensuring I take the needed breaks. I prefer an adjustable desk, so I can decide to sit or stand as I please.

Taking Mental Breaks

Apart from physical health, software engineers must also take care of their mental well-being. The nature of programming can be mentally taxing, with constant problem-solving and debugging. Engage in activities that help you relax and unwind, such as meditation, reading, hobbies, or spending time with loved ones.

Don't hesitate to seek support from colleagues, friends, or professional counselors if you're feeling overwhelmed. Sometimes, talking about your challenges can provide fresh perspectives and help alleviate stress.

Being Kind to Yourself

In the fast-paced and competitive world of software engineering, it's common for professionals to set high expectations for themselves. While ambition can be a driving force, it's essential to balance it with self-compassion and kindness. Being kind to yourself means acknowledging that you're human and not immune to mistakes, setbacks, or challenges.

Embrace Mistakes as Learning Opportunities

Instead of being overly critical of yourself when encountering setbacks, view them as valuable learning opportunities. Treat your mistakes as stepping stones towards growth and improvement.

Avoid Overworking and Set Realistic Goals

Working excessively can lead to burnout and negatively impact your mental and physical health. Set realistic goals and prioritize your tasks. Learn to say no when your plate is full, and don't hesitate to ask for help when needed.

Practice Self-Reflection

Acknowledge your achievements and the progress you've made as well as areas for improvement without being overly self-critical. Cultivate a growth mindset, where you see challenges as opportunities to learn and develop your skills further.

Celebrate Your Wins

Celebrate your progress and growth, both professionally and personally. Whether it's completing a challenging project, mastering a new programming language, or achieving a work-life balance, acknowledge and celebrate these achievements as they contribute to your overall well-being.

Being kind to yourself is not a sign of weakness; it's an acknowledgment of your humanity and a commitment to your well-being. As you navigate the dynamic world of software engineering, remember to treat yourself with compassion, celebrate your successes, and learn from your challenges.

Remember that your health is the foundation upon which your professional success is built. Embrace self-care and self-compassion as essential components of a fulfilling and sustainable career in the ever-evolving field of technology. Prioritize self-care, and you'll find yourself more focused, productive, and ultimately happier in both your personal and professional life. So, take that well-deserved break, stretch your legs, and embrace a healthier approach to software engineering!

NextAuth.js with Google Provider for Seamless Authentication

Angela Palaszewski — Mon, 10 Jul 2023 20:03:48 +0000

What are we talking about?

NextAuth.js is a powerful authentication library for Next.js applications that provides a simple and flexible way to implement authentication and authorization. It supports various authentication providers, including Google, which allows users to log in to your application using their Google accounts. In this blog post, we will explore how to integrate NextAuth.js with the Google provider, enabling seamless and secure authentication in your Next.js application.

Side Note:
To follow along with this tutorial, you should have a basic understanding of Next.js, React, and JavaScript. Additionally, you'll need a Google account and a Next.js application set up.

Install NextAuth.js and Dependencies
First, create a new Next.js application or use an existing one. Open a terminal and navigate to your project's root directory. Install NextAuth.js and the required dependencies by running the following command:

npm install next-auth google

Configure NextAuth.js
Next, create a file called next-auth.js in the root directory of your Next.js application. This file will contain the configuration for NextAuth.js. Add the following code to the next-auth.js file:

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  // Add any additional NextAuth.js configuration options here
});

In this configuration, we're specifying the Google provider by creating an instance of the GoogleProvider class and passing the clientId and clientSecret obtained from the Google Cloud Console. Ensure you have the respective environment variables set up or replace process.env.GOOGLE_CLIENT_ID and process.env.GOOGLE_CLIENT_SECRET with the actual values.

Create the Google OAuth Credentials
To obtain the clientId and clientSecret, you need to set up a project in the Google Cloud Console. Follow these steps:

Go to the Google Cloud Console.
Create a new project or select an existing one.
Enable the "Google+ API" by searching for it in the library and enabling it.
In the "Credentials" section, click on "Create Credentials" and select "OAuth client ID."
Choose "Web application" as the application type.
Enter a name for your OAuth client and add the authorized JavaScript origins and redirect URIs for your Next.js application.
After creating the OAuth client, you'll be provided with the clientId and clientSecret values.

Implement the Sign-In Button
To allow users to sign in using their Google accounts, add a sign-in button to your application's UI. In a React component, add the following code:

import { signIn, signOut, useSession } from 'next-auth/client';

export default function Home() {
  const [session, loading] = useSession();

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!session) {
    return (
      <div>
        <button onClick={() => signIn('google')}>Sign in with Google</button>
      </div>
    );
  }

  return (
    <div>
      <p>Welcome, {session.user.name}</p>
      <button onClick={() => signOut()}>Sign out</button>
    </div>
  );
}

This code uses the signIn and signOut functions from the next-auth/client module to handle the authentication flow. When the user clicks the "Sign in with Google" button, it triggers the signIn('google') function, which initiates the Google OAuth flow.

Protect Routes with Authentication
To protect specific routes or components, you can use the getSession function from the next-auth/client module. For example, to protect a route, create a higher-order component (HOC) like this:

import { getSession } from 'next-auth/client';
import { useRouter } from 'next/router';

export default function withAuth(Component) {
  return function WithAuth(props) {
    const router = useRouter();

    if (typeof window !== 'undefined' && !session) {
      router.replace('/login');
      return null;
    }

    return <Component {...props} />;
  };
}

Wrap the components you want to protect with the withAuth HOC, and it will redirect users to the login page if they're not authenticated.

Try it!
In this blog post, we explored how to integrate NextAuth.js with the Google provider, allowing users to authenticate with their Google accounts in a Next.js application. By following the steps outlined above, you can leverage NextAuth.js's simplicity and flexibility to implement secure authentication and authorization in your Next.js projects. Was it helpful? Go try it and let me know!

Exploring the Benefits of Sass vs Vanilla CSS and Other Frameworks

Angela Palaszewski — Mon, 19 Jun 2023 16:53:24 +0000

Eye Catching Designs

As a software engineer, you may already be familiar with the advantages of using Sass (Syntactically Awesome Style Sheets) over vanilla CSS. However, it's also important to consider how Sass compares to popular CSS frameworks like Tailwind CSS and Bootstrap. In this blog post, we'll explore the benefits of Sass compared to both vanilla CSS and these frameworks, providing insights from the perspective of an intermediate software engineer. We'll delve into the flexibility, customization options, code maintainability, and performance considerations to help you make an informed choice. Let's dive in!

Flexibility and Customization

Sass offers unparalleled flexibility and customization options compared to CSS frameworks like Tailwind CSS and Bootstrap. While frameworks provide pre-defined styles and components, Sass allows you to create your own unique styles from scratch. With Sass, you have full control over every aspect of your styling, enabling you to build a design system that perfectly aligns with your project requirements. This flexibility is especially valuable when working on projects with distinct branding or complex design patterns.

Code Maintainability and Reusability

Sass shines when it comes to code maintainability and reusability. By using Sass variables, mixins, and functions, you can centralize your styling logic and easily make changes across your project. This modularity makes it simpler to maintain consistent styles and avoid repetitive code. On the other hand, CSS frameworks like Tailwind CSS and Bootstrap offer a predefined set of utility classes that can be reused throughout your project, promoting consistency and reducing the need to write custom CSS. However, these frameworks may not offer the same level of fine-grained control as Sass, especially for highly customized designs.

Performance Considerations

In terms of performance, Sass is a preprocessor that compiles into CSS. This means that the final CSS file can be optimized for production by removing unused styles and reducing file size. On the other hand, CSS frameworks like Tailwind CSS and Bootstrap come with a large set of pre-defined styles, which may result in a larger CSS file size. However, some frameworks, including Tailwind CSS, offer utility classes that allow you to generate only the styles that are actually used in your project, mitigating the impact on performance.

Learning Curve and Project Scale

Sass has a learning curve, as it requires understanding the Sass syntax and features. However, once you grasp the fundamentals, Sass becomes a powerful tool in your development arsenal. CSS frameworks like Tailwind CSS and Bootstrap, on the other hand, have their own learning curves, as you need to understand their specific class-based approaches and utility classes. When considering project scale, Sass provides an advantage by enabling scalable and maintainable stylesheets, particularly for large and complex projects. Frameworks like Tailwind CSS and Bootstrap offer a quick start for smaller projects or rapid prototyping, but may require additional customization for larger-scale applications.

So Which Will It Be?

The choice between Sass, vanilla CSS, and CSS frameworks like Tailwind CSS and Bootstrap depends on the specific needs of your project. Sass provides unmatched flexibility, customization options, and code maintainability, making it an excellent choice for highly customized designs and large-scale projects. CSS frameworks like Tailwind CSS and Bootstrap offer pre-defined styles and utility classes, providing a rapid development experience and consistency. However, customization may be limited compared to Sass. Consider your project requirements, design goals, and development preferences when deciding between Sass, vanilla CSS, or CSS frameworks. Remember that combining Sass with CSS frameworks is also a viable option, allowing you to leverage the best of both worlds. Choose the approach that aligns best with your project's needs and empowers you to create outstanding web designs.

Make a Fun CLI Project

Angela Palaszewski — Mon, 19 Jun 2023 16:23:50 +0000

Why CLI?

When I was told that my bootcamp python project was going to be a CLI project, I was concerned and apprehensive. Coming from learning React, I got really into the design and look of a project. Now switching gears to a backend project with no pizazz, I had no idea how to tackle this. This project really did help me understand functionality better, so I am happy I did it!

Are you ready to dive into the world of command-line quizzes? In this blog post, we'll embark on an adventure to create an interactive quiz using the powerful combination of Python and SQLAlchemy. We'll even add some art, color and sounds to jazz it up a bit! Get ready to challenge your knowledge and experience the magic of these technologies!

Setting the Stage

The stage is set for an epic command-line quiz! We'll be using Python, a versatile programming language known for its simplicity and flexibility, to create our quiz application. But we won't stop there – to give our quiz a solid foundation, we'll integrate SQLAlchemy, a robust and intuitive Object-Relational Mapping (ORM) library.

Building the Castle of Questions

Every quiz needs a collection of mind-bending questions. With SQLAlchemy, we can effortlessly design and manage a database to store our questions. We'll create a table using SQLAlchemy's powerful declarative syntax, defining the fields for each question and its corresponding answer. Prepare to be captivated by the elegance and efficiency of SQLAlchemy's database handling capabilities.

class Question(Base):
    __tablename__ = 'questions'

    id = Column(Integer(), primary_key=True)
    question = Column(String())
    answer_a = Column(String())
    answer_b = Column(String())
    value_a = Column(Integer())
    value_b = Column(Integer())
    value_c = Column(Integer())
    value_d = Column(Integer())

    def __repr__(self):
        return f"{self.question} \n" \
            + f"a. {self.answer_a} \n" \
            + f"b. {self.answer_b} \n" \
            + "c. Neither \n" \
            + "d. Either/Both \n"

The Journey Begins: User Interaction

As we embark on our quiz journey, we'll guide users through an interactive experience. With Python's built-in input() function, we can prompt users to enter their name and start the quiz. We'll leverage the flexibility of Python's control structures, such as loops and conditionals, to create an engaging and dynamic user experience.

in_game = False
while True:
    username_input = input ("What is your name?  ")
    if username_input == "":
        print("Error: Please enter a valid name.")
    else:
        in_game = True

        #instructions
        if in_game is True:
            print (f"\nHello {username_input}!")

Randomness Unleashed: Generating Random Questions

What's a quiz without randomness? Using Python's random module, we'll spice things up by randomly selecting questions from our SQLAlchemy database. This ensures each quiz session offers a unique and exciting experience. No two quizzes will be the same!

def generate_questions():
    random_questions = session.query(Question).order_by(func.random()).limit(6).all()
    return random_questions

answers = []
random_questions = generate_questions()
index = 0
      #creating random questions
      while index < len(random_questions):
           question = random_questions[index]
           print (f"\n{question}")
           q_input = input("Your answer: \n").lower()

Validation: Ensuring Correct Answers

It's time to put our users' knowledge to the test. With Python's conditional statements, we'll compare user input against the correct answer stored in the database. We'll handle incorrect answers gracefully, providing helpful feedback and encouraging users to try again. After all, learning is all about embracing challenges and growing from them.

if q_input == "a":
   answers.append(question.value_a)
   index += 1
elif q_input == "b":
   answers.append(question.value_b)
   index += 1
elif q_input == "c":
   answers.append(question.value_c)
   index += 1
elif q_input == "d":
   answers.append(question.value_d)
   index += 1
else:
   print ("\nAnswer a, b, c, or d")

Score Tracking: Celebrating Success

Everyone loves a bit of healthy competition! We'll track users' scores using Python variables and provide a final score at the end of the quiz. With SQLAlchemy, we can even store these scores in the database for future reference. So, whether users aim for a perfect score or simply want to enjoy the journey, our quiz has them covered.

Adding the Pizazz!

Using some additional packages, not only can you make a functional, fun CLI quiz, but you can also add some color and sound! Colorama allows you to add different color text, background and weights to your font. Playsound lets you add different sound effects if you want some added flair with mp3's.

That's a Wrap

Congratulations! You have successfully ventured through the process of creating a captivating command-line quiz using Python and SQLAlchemy. We've explored the seamless integration of these technologies, from designing the database to generating random questions and validating user answers. Through this project, you've witnessed the power of Python's simplicity and flexibility, combined with SQLAlchemy's elegance and efficiency.

So, what are you waiting for? It's time to embark on your own quiz creation adventure. Unleash your creativity, challenge your users, and let Python and SQLAlchemy be your guides. Happy quizzing!

Destructuring props in React

Angela Palaszewski — Fri, 28 Apr 2023 18:14:30 +0000

As with everything in coding, there is usually more than one way to reach the same outcome. Sometimes it's about best practice, but often times it comes down to personal preference.

Destructuring props is no exception to this.

What is a prop?

In React, "props" is a shorthand for properties, which are used to pass down data and functions from parent components to child components. Destructuring those props is a way to extract values from objects or arrays and assign them to variables.

Version One

Here's an example of destructuring props in the child component:


function MyComponent(props) {
  return (
    <div>
      <h1>{props.prop1}</h1>
      <p>{props.prop2}</p>
    </div>
  );
}

In the example above, we extract prop1 and prop2 from props using destructuring, and then use them in the component's return.

This is helpful when you are passing down multiple functions and states, since the passed down prop will get pretty lengthy. This issue I find is that I tend to have to look back at the parent component to see exactly what I passed down and need to utilize.

Version 2

Here's an example of destructuring props as you pass them down:


function MyComponent({prop1, prop2}) {
  return (
    <div>
      <h1>{prop1}</h1>
      <p>{prop2}</p>
    </div>
  );
}

In the example above, the component MyComponent takes an object as its argument, which contains two properties: prop1 and prop2. Instead of using props.prop1 and props.prop2, we can use destructuring to extract the values of these properties and assign them to variables of the same name.

I find this beneficial to be able to visualize everything I am passing down in one statement, so I know what I have used.

So which is better?

In both examples, destructuring props allows us to use the properties directly without needing to reference them via the props object. This can make the code more readable and concise. At the end of the day, it comes down to personal preference, since both of these options will give you the same results.

Which do you prefer?

A journey into Event Listeners

Angela Palaszewski — Thu, 06 Apr 2023 20:46:44 +0000

I was mindlessly scrolling through my favorite time killing website, Amazon, looking at various things I certainly do not need, when I started using the search bar to find a desk buddy to keep me company on this journey to becoming a software engineer. After a ton of different variations on words in the search for my new friend, I finally found the one. My new partner in crime and helpful debugger pal, Sammie the sloth.

I couldn’t click that “Add to Cart” button faster! Of course I had to add a few other things, because who orders just one thing on Amazon at a time? And once I was satisfied with all my unnecessary finds, I purchased all the things and am anxiously awaiting their delivery in 1-2 days.

But it got me thinking, as so many things have since I started bootcamp. How does the browser know what to do when I interact with it? Why is it so bad at finding the things I’m looking for when I search, but still seem to find those things after hours of browsing? When did all those items get in my cart?

Event listeners have entered the chat. In coding so far, I have learned there are multiple ways to implement any given function you are attempting to execute. In our exploration of the building blocks, we started in JavaScript and the most basic manipulation of the browser. JavaScript event listeners proved to be an entertaining and frustrating way to interact with a web page.

What is an event listener?

In JavaScript, event listeners are used to capture and respond to events that occur in the browser. Examples of events include clicking a button, scrolling the page, typing on the keyboard, etc. When an event occurs, the browser creates an event object that contains information about the event, such as the type of event, the element that triggered the event, and any additional data relevant to the event.

Adding event listeners

To add an event listener to an element in JavaScript, you can use the addEventListener method. This method takes two arguments: the type of event you want to listen for (e.g. 'click', 'keydown', etc.), and the function that should be executed when the event occurs. For example:

const myButton = document.querySelector('.myButton');
const click = document.createElement('p');

function handleClick() {
  click.textContent = 'I was clicked!';
}

myButton.addEventListener('click', handleClick);

In this example, we're adding a 'click' event listener to a button element with the ID 'myButton'. The handleClick function will be executed when the button is clicked.

Removing event listeners

To remove an event listener from an element, you can use the removeEventListener method. This method takes the same two arguments as addEventListener: the type of event, and the function that was used as the listener. For example:

const myButton = document.querySelector('.myButton');
const click = document.createElement('p');

function handleClick() {
  click.textContent = 'I was clicked!';
}

myButton.addEventListener('click', handleClick);

// Later, we decide we no longer want to listen for click events on this button:

myButton.removeEventListener('click', handleClick);

In this example, we're removing the 'click' event listener from the myButton element. The handleClick function will no longer be executed when the button is clicked.

A different approach

An issue I ran into with my latest project, was that I didn’t want to actually remove the original event listener, I wanted to remove the ‘Button clicked!’ text after the event, to be able to click a different button instead and show that text.

To accomplish this, it was slightly more complicated than a simple .removeEventListener. I actually had to add a second .addEventListener to the text I wanted to remove, instead of removing the entire event listener.

const myButton = document.querySelector('.myButton');
const click = document.createElement('p');

function handleClick() {
  click.textContent = 'I was clicked!';
}

// Second function to remove the text from the browser

function handleSecondClick() {
  click.textContent = '';
}

myButton.addEventListener('click', handleClick);

//Calling the second function on the text, not the button

click.addEventListener('click', handleSecondClick);

In this example, we set the original text to empty, so that we could insert different text when we clicked a different button and remove the original text, so the screen doesn't get cluttered every time we click a new button.

Until next time..

In my beginner journey, using only 1 page websites to build my foundation, I know there will be more complicated ways to manipulate pages and apps. Mastering event listeners was an important stop on my journey to a better understanding. So I hope this helps you as much as it’s helped me.