DEV Community: AidanSTucker

How You Can Easily Enhance Your Companies Workflow

AidanSTucker — Mon, 05 Feb 2024 20:01:18 +0000

Creating A Simple & Free Task Manager CLI

Utilizing the power of Python and built in CLI's, you too can create your very own CLI. A CLI or otherwise known as a Command Line Interface is a user portal of sorts thats is ran through your Mac or Windows OS (Terminal for Mac and Linux for Windows). It holds access to all of your computers inner files, and this code is meant to utilize that OS to run it.

My project in particular is a CLI program that is designed to help a company with their task / workload. The project consists of two different classes, users, and tasks. Users have the following attributes (Department and name), and tasks have these following attributes (description, length to complete, and the foreign key to point to the user that is belongs to)

In this CLI, as a user you are able to create and assign tasks to users, as well as complete / delete them. You are also able to create and remove users & or just view the tasks they currently have.

How Does This Benefit "My" Company

For numerous online companies across the US, whether you have 3 employees or 300, chances are you have a regular workload that you need to keep track of. Not tracking the work being done can foresee many issues such as; mistakes in completing the work assigned or missing deadlines, wrong assignees of said work, employees not meeting expectations and taking advantage of a misaligned system, and much more.

By utilizing a free workflow program as such, you avoid all those problems, as well as avoiding incurring the heavy monthly fees of some of the well known workflow programs such as a popular one "Acello".

At it's current base functionality, the main uses of the program are CRUD functions for both the user and task classes. But with additional code implemented, you can completely expand the functionality of the program to add features such as time tracking, deadline reminders, and so much more.

How To Use The CLI

On the lowest level of setup, all you need to do to successfully run the code is git fork and clone the projects repository, then run the code in your terminal window, install the dependencies from the Pipfile using (Pipenv install, then pipenv shell), then finally running python lib/cli.py to ultimately run the code. Any changes made to the code hereafter are kept in the database. For example if you make a new user or a new task, and or update a certain attribute of one of those, then those changes are kept in the database.

By forking your own copy of the project, you can easily remove all the current users, tasks, and even departments etc to put in your own functionality, without affecting the main project source.

Deep Dive Into The Code

The project itself is mainly consisted of the following files:

user.py & task.py (Defining classes)
init.py (initializing file)
helpers.py (file that contains the function library)
cli.py (defines the structure of the cli menu)
company.db (holds all of the data for users and task)
Pipfile (contains the needed dependencies to run the code_
README.md (instruction booklet of the code and how to use it)

In our helpers.py file where all of our functions are defined, we have a simular structure among all of the function definitions:

def get_all_users(): ##Complete
    cursor.execute("SELECT * FROM Users")
    users = cursor.fetchall()
    print(users)

The structure contains the function name, then input value (if one exists) the value we want the cursor to execute, then we create a variable to hold the value of what we just retrieved, then finally the print statement to return the value that we just found.

After this method is created, we have to import to be used in our CLI, first from our import statement;

from helpers import (
    get_all_users,
    ...other methods...
)

Then we create the event handling. If a user selects the menu option (number value we display), then we call the method that is associated with it:

elif choice == "2":
     get_all_users()

So in summary, in our CLI we display a menu with options to do things like view all users, create a user or task, etc. Then when a certain menu option is selected, we call the method which we imported from our helpers.py file where it's created, to run and show the user whatever they were looking for or trying to achieve.

Key Takeaway

With this project, streamline your workload, manage and monitor your employees, departments, and their prospective workload, and enjoy a more organized company.

With the main setup created, all that's left for you, is to create your own users, departments, and start assigning some work. Good luck!

How Can State Management Be Applied To A Real World Case-Scenario

AidanSTucker — Mon, 27 Nov 2023 20:16:54 +0000

Using State Management In Your Life

Introduction

Whether you're a new coder, or a complete newbie trying to save costs by building out your own website and it's functionality, State is a huge deal!

Understanding State

In React, "state" refers to the data that a component manages and can change over time. It represents the current condition or values within the component, affecting its behavior and rendering. State allows components to dynamically update and re-render based on user interactions, data changes, or other triggers without requiring a full page refresh. It's crucial for building interactive and dynamic user interfaces in React applications. In other words, it's basically the memory that holds the values of whatever data you want to manipulate.

How To Use State

State itself is a product of React, so for starters you need to have react imported within your file, and within that import statement you add the "useState" hook to signal react to pull that hook from it's libraries. Then once you have it imported, you have to define what variables you want to hold state. That whole section looks something like this:

import React { useState } from "React";

const [cars, setCars] = useState([]);

We see on line 1 our import statement, then below we set the value of state to the 'cars' variable, which also defines it, then we use a setter function 'setCars' which we will use to update state. For example if we want to add cars to the cars variable, we would call the setCars function once we have the new data, to then update state.

Real World Example Of State In Action

For my Phase 2 project, I opted to make a car buying / selling site, and the main goal I had to accomplish first was showing all the cars for sale on the home page. I first had to set cars to state, fetch the list of cars from my server, then set those cars to the 'cars' variable. so now that empty state variable holds the value of the cars array of objects:

const Home = () => {
  const [cars, setCars] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/cars')
      .then((response) => response.json())
      .then((data) => setCars(data));
  }, []);

Using the useEffect hook (another function from the React library) I fetched the cars from the server and set that data to the cars variable using my setter function setCars. From here I could change the setCars to a console log statement to initially check I fetched the data properly, but since we already did that, I now can use the 'cars' variable in my return statement. for example, if I were to create a h1 I could input {cars.name} between the header, and now on my page, the first car on the lists name would show.

But I want to show all my cars so how can I do that? MAP! Since I want to show each cars name, I can map through the cars array and then for each car, I can make a h1 that shows {car.name}. Now every car on that list will have it's name rendered on the page. Seems pretty easy right?

How To Manipulate The Cars State

Just showing all the cars is nice, but I want people to be able to actually buy and sell cars, so heres how we do that:
This will require additional components (react files that take in props and return JSX). We need a purchase page, and a selling page, in which we have to obtain the state cars variable from our Home file. Once we do that, then we can input form handling to make it so on a submit of payment info or the details of the car they are selling, we then use a GET & POST request to that server to either add a new car to the list or remove one when it's purchased.

How This Benefits You -> "In Conclusion"

Understanding state management in React or any web development framework is akin to mastering the control panel of a complex system. It empowers new coders and website creators by offering a way to handle and control data dynamically. Imagine building a website where you want certain parts to change based on user actions, like updating a shopping cart's item count or toggling between light and dark mode seamlessly. State management provides the mechanism to make these changes without reloading the entire page, enhancing user experience and interaction. It enables smoother, more responsive websites by allowing components to communicate, update, and reflect changes instantaneously. Embracing state management not only enhances the functionality of websites but also lays a foundational skill crucial for crafting modern, interactive web applications

The When, Why, & Where Of Pseudocoding. How to bring logical thinking into your coding.

AidanSTucker — Mon, 14 Aug 2023 15:21:33 +0000

Overview of Pseudocoding

Pseudocoding is an essential skill in the world of programming that often flies under the radar. It's a method of problem solving simular to that of building a blueprint of floor plans of your house before bringing in the materials in building. Pseudocoding helps you put your prospective code into a light that may help you understand it better.

How Pseudocoding Affects Me

One issue I historically struggle with is tests, live ones at that. I get nervous, think about the time remaining and the consequences of not passing rather than the code itself. And that may be some undiagnosed ADHD talking but thats not a good excuse for poor planning. I was recently faced with a pass or fail program type of test and the one thing that helped me the most? Talking through the problem! My past issue was that I just jumped into the code and relied more on just hoping to know the code to write, which is why utilizing the powerful tool of pseudocoding and talking out loud is so valuable. It let's you understand the 'why' of what you're doing, and also figure out how your code should look before writing, that way you don't get blindsided by errors that stunt you early on. Below I will go through a few key topics; Why to pseudocode, When to pseudocode, Where to pseudocode, & finally how to translate that into real functioning and effective code.

What Does It Look Like

Psuedocoding can honestly look however you'd like it to work, as long as it's effective for you. But typically it looks like commented out code, that has a simular structure to a normal function or code, but is more descriptive and explanatory to what each line does, see below for an example:

function cash register (money amount we received from user) {
const change = money given minus price of item selected
if (change is a positive number) {
   return change amount and say 'have a nice day!'
   }
   else if (change is negative) {
      return amount still owed, and say 'you owe ${change} 
       still`
      };
else if (change is zero) { 
      return 'you are all set!'
      };
else (change is NAN) {
     return 'incorrect form of payment, please try again'
      };
}

Understanding the Purpose of Pseudocoding - (WHY)

Pseudocoding serves as a bridge between the abstract world of problem-solving and the concrete realm of coding. It involves crafting a high-level description of the logic and steps required to solve a specific problem without getting bogged down by the complexities of a particular programming language.

Knowing When to Use Pseudocode - (WHEN)

Pseudocode is particularly useful during the initial stages of problem-solving. It allows you to outline your approach, break down complex problems into manageable steps, and get a clearer grasp of the overall logic. Pseudocoding is not meant to be a replacement for coding itself, but rather a preparatory step that saves you from stumbling through the coding process without a clear plan.

Where Should Your Pseudocode Go? - (WHERE)

Now overall this comes down to a matter of preference for the most part, but it's always good to have a system of efficiency. If you have the time, and the neat handwriting skills, than hand writing your pseudocoding with pen and paper is a great way to go, otherwise writing commented out code underneath your functions is also a very viable choice. A large part of coding and also making it readable and in a good flow / order of operations, so keep that in mind when writing your pseudocode, You don't want to make a paragraph of pseudocode that stretches all over your file.

Why Pseudocode Matters

Clarity: Pseudocoding helps you crystalize your thoughts and ensure you've considered all aspects of a problem before diving into actual coding.
Less Language-Dependent: Pseudocode is language-agnostic, meaning you can focus on the logic rather than the syntax of a specific programming language.
Error Minimization: By ironing out the logic beforehand, you reduce the chances of making unnecessary mistakes when writing the actual code.

The Best Time and Approach to Pseudocoding

The most suitable time to engage in pseudocoding is immediately after understanding the problem statement. Follow these steps for an effective pseudocoding process:

Analyze the Problem: Understand the problem thoroughly before attempting to pseudocode. Identify inputs, outputs, constraints, and the main steps required.
Outline the Logic: Break down the problem into smaller steps. Use simple, clear language to describe the processes involved without getting bogged down in specifics.
Use Structured Constructs: Utilize common programming constructs such as loops, conditionals, and functions in your pseudocode to better mimic the structure of actual code.

Translating Pseudocode into Real Code

Translating pseudocode into actual code is a relatively straightforward process. Follow these guidelines:

Turn Blueprint Into Building: When writing your pseudocode you should typically write it in the form of what your actual code should look like, so when you're ready try to copy that into actual code, making changes as needed, then testing to see if theres anything you've left out.
Focus on Syntax: Pay attention to syntax details and conventions specific to the chosen language.
Test and Refine: Execute your code and debug as needed. The pseudocode serves as a guideline, but adjustments may be necessary based on the intricacies of the language.

In conclusion, pseudocoding might not be the most glamorous aspect of programming, but its impact on your coding journey cannot be understated. By providing a clear roadmap for solving problems and mitigating errors, pseudocode paves the way for efficient and effective coding. So, next time you're faced with a coding challenge, take a moment to pseudocode—it could be the difference between smooth sailing and a bumpy coding ride.

Sources:

Dev Ops Complete Pseudocode Tutorial

Wikipedia source from MDN Web Docs

NBA Logo Finder - Don't Forget Favorite Teams Logo!

AidanSTucker — Fri, 07 Jul 2023 20:23:53 +0000

NBA Logo Finder

With the NBA Logo Finder, you can easily search for any NBA team and instantly see its logo displayed on your screen. No more frantically searching through Google Images or scrolling through endless webpages. The NBA Logo Finder brings you the logos you crave with just a few clicks.

Issues I Encountered

The NBA Logo Finder utilizes many different functionalities of Javascript, HTML, & CSS. At first I had struggles for a while to even get a response from the API, and even with help from an instructor and many videos, I just couldn't crack it. So I switched directions and tried a whole new API, this time I was receiving a valid response but it wouldn't show on the site, only in my console. I thought all was hopeless until I added one pretty simple aspect to a section of my fetch request:

const firstResponse = result.response[0];
displayTeamStats(firstResponse);
else {
teamStats.textContent = 'Team not found.' 
};

This simple section under my fetch request finally let me have my response shown in the web screen, the only problem now was that I could only search for a single team, and any team I put in only ever showed a generic first team in the list. So next I made a change to the const URL API so dynamically update it with whatever 'teamName' was searched. And that looked liked this:

const url = `https://api-basketball.p.rapidapi.com/teams?league=12&season=2019-2020&search=${teamName}`;

The Promise

After All The Research I Had To Do To Fix My Fetch Request, I Learned More About A Topic I Wasn't Super Familiar With, The Promise.

A promise in JavaScript is a powerful mechanism for handling asynchronous operations. It represents a value that may not be available immediately but will be resolved or rejected in the future. When you create a promise, it starts in a pending state. As the asynchronous operation progresses, the promise can either be fulfilled with a value (resolved) or encounter an error (rejected).

Promises work by allowing you to attach callbacks to handle the outcome of the asynchronous task. You can add a .then() method to execute a function when the promise is resolved successfully. If the promise is rejected, you can use the .catch() method to handle errors. Additionally, you can use .finally() to run code regardless of whether the promise is resolved or rejected, useful for cleanup tasks.

In my code when I send my fetch request to the public API, I get a promise to either receive an error to receive the information I requested, or I receive the NBA teams logo I requested. The Promise is certainly a hard topic to grasp as you don't actually see it, and it is more of a concept than anything, a good analogy I heard was;

imagine you are at a diner and you ask the waitress for a cup of coffee. Them saying "I will be right back with that" is a promise, and they will either return with that cup of coffee (resolved), or they will come back and let you know they are out of coffee or sugar, etc (rejected).

Hopefully this analogy helps you like it helped me!