DEV Community: Mai G.

GitHub Best Practices for Seamless Team Collaboration

Mai G. — Thu, 10 Aug 2023 20:34:36 +0000

Let's get real! As developers, we almost always work in a team, and effective collaboration is the key to building successful projects. GitHub, a widely used version control platform, offers a range of features that empower teams to work together seamlessly. To make the most of GitHub's capabilities, here are some best practices to consider when collaborating on a project:

Branching Strategy: Keeping Your Work Organized

The #1 rule is: never code on main/master!

Having a well-defined branching strategy is the foundation of successful teamwork on GitHub. Consider adopting the Gitflow workflow, which encourages the use of different branches for specific purposes:

Main/Branch: This is your stable codebase. It should always represent production-ready code.
Develop/Branch: Here, ongoing development takes place. New features and bug fixes are merged into this branch.
Feature/Branches: Each new feature or task gets its own branch. This isolates changes, making it easier to review, test, and merge.

Clear and Descriptive Branch Naming

Give your branches meaningful names that reflect the work being done. Clear naming conventions make it easier for team members to understand the purpose of a branch at a glance. For example, instead of "feature-123," use something like "feature/user-authentication."

Pull Requests (PRs): Collaborative Code Review

PRs are a fundamental aspect of GitHub's collaboration capabilities. They facilitate code review, discussion, and quality assurance before changes are merged into the main codebase. Here's how to maximize their effectiveness:

Provide a descriptive title and context in the PR description.
Mention relevant team members using the "@" symbol to notify them of the PR.
Encourage thorough code reviews by setting minimum review requirements.
Use the review tools to comment on specific lines of code, suggesting improvements or asking questions.
After feedback, make the necessary changes directly within the branch or respond to comments before merging.

Continuous Integration (CI) and Automated Testing

Leverage GitHub Actions or other CI tools to automate testing and integration processes. Set up workflows that run tests whenever a new PR is opened or changes are pushed to a branch. This ensures that only code passing tests can be merged, maintaining the project's stability.

Code Quality: Consistent Formatting and Documentation

Consistency is crucial for maintainable code. Consider implementing code formatting tools like Prettier or ESLint to maintain a consistent coding style across the project. Additionally, encourage thorough documentation within the codebase. Well-documented code is easier to understand and onboard new team members.

Regularly Update Your Branches

Keep your local branches up-to-date with the latest changes from the main and develop branches. Regularly pull changes to avoid conflicts and ensure your work is based on the most current codebase.

Resolve Conflicts Collaboratively

Conflicts can arise when merging changes from different branches. Embrace conflicts as an opportunity to improve code quality. Resolve conflicts collaboratively, involving team members who worked on the conflicting changes. GitHub provides helpful tools for navigating and resolving conflicts within PRs.

Communication and Etiquette

Maintain open communication with your team members. Use GitHub's built-in communication features like issue comments and PR discussions to ask questions, clarify doubts, and share insights. Remember to be respectful and professional in your interactions.

In conclusion, GitHub's collaborative features are invaluable for efficient team development. By following these best practices, your team can harness GitHub's capabilities to streamline workflows, ensure code quality, and create successful projects collaboratively.

Remember, successful teamwork goes beyond tools; it's about cultivating a culture of collaboration, openness, and continuous improvement within your development team.

React: How to Implement Search Location Within Radius Feature

Mai G. — Fri, 21 Jul 2023 21:50:11 +0000

In phase 4 of my Software Engineering Bootcamp at Flatiron, along with 2 other exceptional classmates, we built a full stack app using React front-end and Flask back-end. One of the features that we got questions about during our presentation was how we implemented the search locations within a radius feature, so I figured I'd write my a blog on the steps I took to accomplish this feature.

Haversine Formula

In a nutshell, the haversine formula determines the great-circle distance between two points given their longitudes and latitudes. As scary as it might sound, we don't have to reinvent the wheel. You first would need to create an element to store this function which takes in 4 variables.

export default function calculateDistance(lat1, lon1, lat2, lon2) {
  const R = 6371;
  const phi1 = (lat1 * Math.PI) / 180;
  const phi2 = (lat2 * Math.PI) / 180;
  const deltaPhi = ((lat2 - lat1) * Math.PI) / 180;
  const deltaLambda = ((lon2 - lon1) * Math.PI) / 180;

  const a =
    Math.sin(deltaPhi / 2) * Math.sin(deltaPhi / 2) +
    Math.cos(phi1) *
      Math.cos(phi2) *
      Math.sin(deltaLambda / 2) *
      Math.sin(deltaLambda / 2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

  const distance = R * c;
  return distance;
}

Google Maps Geocoding API

Head to this link and obtain your own API key.

React Geocode

Install React Geocode npm i react-geocode in order to convert the addresses in your app to longitude and latitude. This process is called reverse geocoding. Additionally, you will also need to build a form to take in user input, and store that using useState. The component where you implement this feature will look something like this:

import Search from "./Search"; # my search form
import calculateDistance from "path";
import Geocode from "react-geocode";
Geocode.setApiKey("YOUR-API-KEY");
import { useState, useEffect } from "react";

export default function YourFunction({searchTerm, setSearchTerm, array}) {
  const [userLocation, setUserLocation] = useState({ lat: 0, lon: 0 }); #store user's input in lat and lon
  const [distanceRadius, setDistanceRadius] = useState(10);
  const [filteredArray, setFilteredArray] = useState([]);

From here we will need to use the useEffect hook to implement the logic for filtering and sorting your array based on the user's location and the distance radius specified.

  useEffect(() => {
    if (!searchTerm) {
      setFilteredArray(array);
      return;
    }
    Geocode.fromAddress(searchTerm).then(
      (response) => {
        const { lat, lng } = response.results[0].geometry.location;
        setUserLocation({ lat: lat, lon: lng });

        const updatedArray = array.map((item) => ({
          ...item,
          distance: calculateDistance(
            userLocation.lat,
            userLocation.lon,
            item.latitude,
            item.longitude
          ),
        }));

        const filteredArray = updatedArray.filter((item) => item.distance <= distanceRadius)
        setFilteredArray(filteredArray);
      },
      (error) => {
        console.error(error);
      }
    );
  }, [searchTerm, array, distanceRadius]);

You may notice that this useEffect hook has a few dependencies because we want the useEffect to fire every time there's a change in the searchTerm, the array itself as well as the distanceRadius (which is chosen by the user via the Search form).

Within the useEffect, there is an asynchronous operation: the Geocode.fromAddress function call. This function is used to convert the user's search term (address) into latitude and longitude coordinates. Since this is an asynchronous operation, it might not have the results immediately. By using useEffect, we ensure that this operation will be executed after the initial render and after every subsequent update, depending on the specified dependencies.

The useEffect hook also helps in avoiding infinite loops caused by frequent updates. Without useEffect, if we directly put the filtering and sorting logic in the component body, it could lead to a continuous update loop, as the state changes would trigger re-rendering and re-calculating distances over and over again. useEffect ensures that the filtering and sorting logic is executed at the right times without causing infinite re-renders.

Now that you've got your filteredArray, you just have to map through it the way you want it to display.

Well... that was the best case scenario if your array already contains longitude and latitude. In our case, I had to convert addresses in each item to longitude and latitude, store all that along with the original data in a new array and pass that array down to the component above instead of the original array that we fetch. If you're in the same boat, follow the steps below.

Inside of my App.js component, I added the following above my App function:

const fetchItemLocation = async (item) => {
  const { street_address, city, state, country } = item;
  const itemAddress = `${street_address}, ${city}, ${state}, ${country}`;

  try {
    const response = await Geocode.fromAddress(itemAddress);
    const { lat, lng } = response.results[0].geometry.location;
    return { ...item, latitude: lat, longitude: lng };
  } catch (error) {
    console.error(error);
    return null;
  }
};
const calculateLatLongForArray = async (array) => {
  const updatedArray = await Promise.all(array.map(fetchItemLocation));
  return updatedArray.filter((item) => item !== null);
};

fetchItemLocation function:

This function takes a single item object as its parameter and aims to fetch its latitude and longitude coordinates based on its address information.

We extract the address details (street_address, city, state, and country) from the item object and form a full address string
We then reverse geocode the address using Geocode.fromAddress. If the geocoding is successful, it extracts the latitude (lat) and longitude (lng) from the response and returns a new object that includes the item's original data along with the calculated latitude and longitude. Otherwise, if will catch error and return null.

calculateLatLongForArray function:

This function takes an array of item objects as its parameter and aims to calculate latitude and longitude coordinates for each item in the array using the fetchItemLocation function. We use Promise.all to handle multiple asynchronous calls concurrently on the array.map(fetchItemLocation) expression, which iterates through each item in the array and fetches its latitude and longitude using fetchItemLocation. This creates an array of promises that will resolve to an array of updated item objects (including latitude and longitude) or null if an error occurred during geocoding.

When all the promises are resolved (or rejected), Promise.all returns the resulting array of updated item objects.
The function then filters out any null values from the array using .filter((item) => item !== null), removing any items where geocoding failed.

Finally, the calculateLatLongForArray function returns an array of updated item objects, each containing the original item data along with the latitude and longitude information obtained from geocoding.

Inside of my App function, I had a state to store updatedArray const [updatedArray, setUpdatedArray] = useState([]); and a loading state to store the loading status of the original array const [isLoading, setIsLoading] = useState(false);

After I fetch the original array using useEffect, it goes through another useEffect hook:

 useEffect(() => {
    if (!isLoading) {
      calculateLatLongForArray(array).then((updatedArray) => {
        setUpdatedArray(updatedArray);
      });
    }
  }, [isLoading, array]);

To make sure the second useEffect only runs after the array has fully loaded on the front-end, the isLoading state is necessary. We also added isLoading and array as the dependencies to make sure this useEffect hook runs again whenever those two change.

Now your updatedArray is ready for the calculatingDistance function!

Happy coding!

How to Schedule Function to Run on Specific Date and Time in Python

Mai G. — Thu, 29 Jun 2023 16:14:57 +0000

During my bootcamp at Flatiron School, I wanted to create a reminder function for a group project's CLI app that would send email reminder to the user on a specific date and time that the user inputs. However, there was no straightforward answer online on how to achieve this, and it took me a whole day to figure it out while overcomplicating the issue. I even tried Celery and RabbitMQ, but that didn't take me anywhere. So here I am, sharing with you the simple solution with the hope to save you time and energy in case you want to try doing something similar. Here we go!

Pmail

Pmail is a nifty command-line e-mail sender, written in Python that allows you to send email with simple configuration and commands. To install, you'll need to run the following command: pip install pmail

Then to configure, run this command pmail --configure and just fill out information for each requirement. If you're using Gmail, you will need to create an App password and use that in lieu of your regular email password. You can find the instructions here.

Now that we've got the easiest part out of the way, let's move on to the next.

Subprocess

In order to run pmail command from inside of the Python script, I had to import the subprocess module. In Python, the subprocess module provides a way to create new processes, interact with them, and manage input/output streams. It allows you to run external programs or system commands from within your Python script. The subprocess module provides various functions and classes to work with processes. In our case, we used subprocess.run(). This function is used to run a command in a new process and wait for it to complete. It is a high-level function that simplifies the process creation and management. Below is a function from our app using subprocess.run():

def send_mail(user_email, subject, body):
    command_args = ["pmail", user_email, subject, body]
    try:
        subprocess.run(command_args, check=True)
        print("Email sent successfully!")
    except subprocess.CalledProcessError as e:
        print(f"Error occurred while sending email: {e}")

Here's an explanation of the code:

The function starts by constructing a list called command_args. This list contains the command-line arguments required to invoke pmail. The list includes the user_email, subject, and body as command-line arguments.
The subprocess.run() function is used to execute the pmail command with the specified command-line arguments. The check=True parameter ensures that if the pmail command returns a non-zero exit code (indicating an error), a CalledProcessError exception will be raised.
Inside the try block, subprocess.run() is called to execute the pmail command. If the command is executed successfully (i.e., returns a zero exit code), the message "Email sent successfully!" is printed.
If the subprocess.run() call raises a CalledProcessError, it means that the pmail command returned a non-zero exit code, indicating an error. In that case, the exception is caught in the except block, and an error message is printed.

Now that we've have written our send_mail function, it's time to introduce the next important element: APScheduler

APScheduler

When you go to Google and search for a method to schedule task in Python, you will definitely find Scheduler first. However, Scheduler is only great for scheduling periodic task, not for scheduling on a specific date and time. So first, let's install APScheduler: pip install apscheduler

Then we import the BackgroundScheduler from APScheduler and datetime and timedelta
from apscheduler.schedulers.background import BackgroundScheduler from datetime import datetime, timedelta

The BackgroundScheduler is a scheduler that runs in the background and uses a separate thread to execute scheduled tasks. It is suitable for long-running applications or when you want the scheduler to operate independently of the main program's execution.

Below is a portion of the reminder function that executes the send_mail function at a specific remind_datetime

def reminder(applications):
    view_app(applications)
    app_id = input("Enter the ID of the application for this reminder: ")
    when = int(
        input(
            "In how many days would you like to be reminded? (e.g: 0 for today, 1 for tomorrow, etc.)"
        )
    )
    remind_time = input(
        "Enter the time (24-hour format) you want to receive your notification (HH:MM): "
    )
    user_email = input("Enter the email address to receive notification: ")
    reminder_message = input("Enter the reminder message: ")

    today = datetime.today().date()
    remind_date = today + timedelta(days=when)
    remind_date_str = remind_date.strftime("%Y-%m-%d")
    remind_datetime = datetime.strptime(
        remind_date.strftime("%Y-%m-%d") + " " + remind_time, "%Y-%m-%d %H:%M"
    )
    print(
        f"You will be reminded on \033[1;32m{remind_date_str} at {remind_time}\033[0m about the following job application:"
    )

    for application in applications:
        if application.id == int(app_id):
            subject = f"Reminder about the {application.job_title} Application"
            body = f"Regarding {application.job_title} at {application.company.name}.\nHere's your message: {reminder_message}\nGood luck!"

            scheduler = BackgroundScheduler()
            scheduler.add_job(
                send_mail,
                "date",
                run_date=remind_datetime,
                args=[user_email, subject, body],
            )
            scheduler.start()

Here's an explanation of the reminder function:

The reminder function takes a parameter applications, which represents a list of job applications. The function starts by displaying the list of job applications using the view_app function.
It then prompts the user to enter the ID of the application they want to set a reminder for, the number of days from today they want to be reminded, the time (in 24-hour format) they want to receive the notification, their email address, and the reminder message.
Next, the function calculates the remind date by adding the specified number of days to the current date using the datetime.today().date() and timedelta functions. It also formats the remind date as a string in the format "%Y-%m-%d" using strftime.
The function combines the remind date string and the remind time entered by the user to create a remind_datetime object using datetime.strptime. This object is required in the APScheduler method.
Then, the function prints a message indicating the remind date and time.
It then iterates over the list of applications to find the application with the matching ID entered by the user.
Inside the loop, the function creates a subject and body for the reminder email based on the selected application and the reminder message entered by the user.
It creates an instance of the BackgroundScheduler class. The function adds a job to the scheduler using the add_job method. The job is scheduled to run at the remind_datetime specified. It calls the send_mail function with the provided email address, subject, and body as arguments.
Finally, the scheduler is started using the start method.

By following the steps above, you'll be able to create an email reminder feature for your CLI app. If you'd like to check out our OnTrack app, check out this Github repo. Hope you find this helpful!

Happy coding!

Common Mistakes React Beginners Make and How to Avoid Them

Mai G. — Wed, 07 Jun 2023 18:57:53 +0000

React is such a powerful tool once you've mastered its efficient component-based architecture and powerful state management capabilities. However, as a beginner in React, there were a few (silly) mistakes I made that kept me hung up for several hours. In this article, I will discuss three common mistakes and provide tips on how to avoid them with the hope to help other developers save time and energy from frustration. Lettuce begin!

Using the Wrong Brackets: {} vs. ()

One of the most frequent mistakes beginners make in React is definitely mixing up the use of curly brackets '{}' and parentheses '()' when passing props, rendering components, writing functions. Both of these brackets serve different purposes in React. To avoid this mistake, remember the following guidelines:

When passing props to a component within a component, use curly brackets
<ExampleComponent propName={prop}/>
When passing props to a component.js file, use {} inside of ()
function Example({prop1, prop2, prop3}) {}
When writing the return for the main function, use () next to return if you have multiple elements within your main div (which is almost always the case)

function Example () {
   return (
      <div>
          <div>Example Div 1</div>
          <div>Example Div 2</div>
      </div>
   )
}

When writing an arrow function inside of your component, use {} if it's multiple lines, but remember you'd need to add "return" so that React knows what to return. But if you're rendering a React component inside a JavaScript function then, you'd need to use ()

function Example () {

   const filteredArray = array.filter((item) => {
       return what-you-want-to-return });

   return (
       <div>
       ...
       </div>
   )
}

// Rendering React Component

function ExampleRender () {
   return (
      <div>
      {array.map(item => (
         <FunctionYouWantToRender 
             key={item.id} 
             prop={item.prop}
         />
      )}
      </div>
   )
}

By adhering to these guidelines, you can ensure that you use the correct brackets in the appropriate contexts, prevent unnecessary errors in your React code, and avoid pulling your hair due to frustration.

Passing Props Down Multiple Components

Being able to pass props down multiple layers of nested components in React is a privilege, but also a curse for beginners as we struggle with passing props through these component hierarchies correctly. Failing to pass props down to child components can result in rendering issues and data inconsistencies.

To avoid this mistake and ensure you're passing props properly, follow these steps:

Identify the parent-child-sibling relationship between components. Remember you can pass data between a parent and a child component, but you can't pass data directly between siblings.
Identify the necessary data or state that needs to be passed down to a child component.
Pass the required props from the parent component to the child component through its attributes.

<ParentComponent>
    <ChildComponent prop={value}/>
</ParentComponent>

Inside of the child component, receive the props using destructuring or by directly accessing them from the **props** object.

function ChildComponent ({prop}) {
}

function ChildComponent (props) {
}

By following this approach, you establish a clear flow of data between components and ensure that the necessary information is available at each level of your application.

Forgetting to Save All Edited Components Before Testing in the Browser

I cannot remember how my times I was going insane because I couldn't figure out why changes don't reflect in my browser. Going straight from Vanilla JavaScript to React, it took some time for me to get used to saving all affected components before testing in the browser.

To avoid this mistake, make it a habit to save all modified components before testing your application. This ensures that the latest changes are applied and visible in the browser. You can either do this manually or turn on that autosave feature. Additionally, using a version control system like Git can help you keep track of changes and revert back if needed.

These are the most common mistakes my peers and I made while when we first got into React. I hope sharing these would help fellow developers enhance their development workflow and save some time and effort in debugging.

Happy coding!

Manipulating the DOM with JavaScript 101

Mai G. — Sun, 14 May 2023 21:44:07 +0000

What is DOM?

DOM stands for Document Object Model, a programming interface that allows web developers to manipulate HTML and XML files. Using scripting languages such as JavaScript, developers can access and modify the structure, style and content of the DOM to generate dynamic and interactive web pages. In this post, we'll go over the basic steps to manipulate the DOM with JavaScript.

Access DOM Elements

First and foremost, we need to access the element in the DOM that we need to modify. This can be done in a number of ways, but my favorite way is by the method of .querySelector(). It would be best to assign that element to a variable. The syntax looks like below:

Access element based on id

const idName = document.querySelector('#idName');

Access element based on a class

const className = document.querySelector('.className');

Access element based on a tag

const h2 = document.querySelector('h2');

To access all elements sharing the same class or tag, use .querySelectorAll()

Access all h2 elements
const h2 = document.querySelectorAll('h2');

Adding and Removing HTML Elements

Adding or removing HTML elements is one of the most common ways to manipulate the DOM with JavaScript. Before adding an element, we first would need to create it. To create a new element, we use the .createElement() method:

const newDiv = document.createElement('div');

After that, we would want to use .append() to add the new div element to a another element:

For example, we would like to add it to the end of the body element, we would first need to grab the body element

const body = document.querySelector('body');
body.appendChild(div);

To remove an element from the DOM, we can use the .remove() method.Of course, we need to start by retrieve the element we would like to remove:

const example = document.querySelector('#example');
example.remove();

Modifying HTML Element Attributes

It is also possible to modify HTML element attributes such as class, id, src, and href using JavaScript. See examples below:

- Retrieve the image we want to update

const image = document.querySelector('#imageID');
image.src = "new URL";

- Add a new class to an element

const element = document.querySelector('#elementID');
element.classList.add('newClass');

- Remove a class from an element
element.classList.remove('className');

As you can see, DOM manipulation with JavaScript is a powerful tool for creating dynamic and interactive user interfaces. Once you are proficient in manipulating the DOM with JavaScript, you can open up a world of possibilities for web development projects. In this post, we only cover the most basic DOM manipulation methods. If you're interested in learning more, head to MDN for more detailed documents.

Happy coding!