DEV Community: Salvador Hernandez

Provide better time estimations with PERTify📈

Salvador Hernandez — Sat, 23 Jan 2021 22:09:50 +0000

As I was reading Robert Cecil Martin's The Clean Coder I stumbled upon a section in chapter 10 about estimating tasks. Using Project Evaluation and Review Technique (PERT) you can provide three values for a task: Optimal, Nominal, and Pessimistic, and generate how long it was expected to finish a task. I wanted to try it out, but didn't want to write all the equations when being asked to provide estimates. I could have used any of the PERT calculators out there, but like a typical developer, I set out to create a tool that fitted my needs, hence PERTify. PERTify is hosted on AWS using CloudFront and S3.

This application is optimized for desktop screens!

PERT

PERT is a statistical tool used in project management, which was designed to analyze and represent the tasks involved in completing a given project. The scheme provides a simple and effective way to convert estimates into probability distributions. For PERTify, we will be using tasks and subtasks, instead projects and tasks.

For an in depth explanation of the calculations, please visit The Clean Coder: Estimation, Wikipedia, and LinkedIn.

PERTify

For each row (subtask) you will see the calculated probability distribution (μ) and standard deviation of the probability distribution (σ). σ measures how uncertain the task is.
At the top left of the card you will find μ sequence which is the sum of all the subtasks' expected duration, and σ sequence which is the standard deviation for all the subtasks.

We will using hours as the unit of measurement.
Alpha is estimated to be done in 4.2 (μ) hours. However, the estimated time to finish Alpha, Beta, and Gamma is 14.2 (μ sequence) hours with a standard deviation of 3.1 (σ sequence) hours.

Using the standard deviation we can calculate different estimates:

14.2 hours
- μ sequence + ( 0 * σ sequence )
17.3 hours
- μ sequence + ( 1 * σ sequence )
20.4 hours
- μ sequence + ( 2 * σ sequence )

The task is set to take 14.2 hours, or 17.3 hours, or 20.4 hours, etc... But will most likely take 14 hours after rounding down 14.2.

Demo

What I learned

How to use

Links

What is your favorite Task Estimation tool? Let me know in the comments!

Emojify 🦕 text of a webpage with a Chrome Extension

Salvador Hernandez — Fri, 27 Nov 2020 05:06:49 +0000

Ever wondered what would happen if you replaced all the words of a webpage with their emoji equivalent, like t-rex replaced with 🦖, and dolphin replaced with 🐬? Well look no further, I've created this Chrome Extension so you don't have to.

Visit the repository for usage and installation instructions: Emojify Repository

Demo

The Chrome Extension replaces single word emojis in the p, h1, h2, h3, h4, h5 and h6 tags.

Resources needed to complete project

List of emojis and their aliases
- https://github.com/github/gemoji/blob/master/db/emoji.json
Chrome Storage API
Chrome Tabs API

Containerize branches from React Application using ReactBranchContainer

Salvador Hernandez — Sat, 31 Oct 2020 19:20:48 +0000

When I'm developing a React Application and want to compare the output of the current work with another branch like develop on my local I have to go through a series of time-consuming steps to get develop branch up and running. Because of this ReactBranchContainer was born.

Steps without ReactBranchContainer:

Stash local changes with git stash
Checkout develop branch with git checkout develop
Re-install dependencies npm install
1. Re-install dependencies when using new libraries
When using SASS: Generate CSS from SCSS files with npm run css
Run application npm run start
Go to localhost:3000 to see output

Solution

I embarked on a journey to create a tool that would allow me to keep run the application with the use of Docker, Dockerfile, Docker-Compose and a bash script. Now I can compare my current work with another branch side-by-side.

Steps with ReactBranchContainer:

Run ./rbc.sh -b develop
Go to localhost:5000 to see output

Demo

Left window is watching for latest code changes and serving them on localhost:3000 and right window is running a Docker container with develop branch on localhost:5000.

I spent many hours creating a tool that alleviates a 5 minute problem. Is the Remedy worst than the decease? Maybe. Did I have fun learning about Docker? Yes. Am I a Docker know-it-all? No.

What I learned

How to add Private SSH Key to Node Docker Image
How to pass build arguments(--build-arg, ARG) from docker-compose.yml to .Dockerfile
How to access environment variables in docker-compose.yml
How to containerize a React Application in a Docker image
How to accept flags in bash script with getopts

How to use it

Setup

Before using it, you need to update rbc.sh with the proper variables:

REPOSITORY_URL
- Contains the SSH URL to your repository
PROJECT_NAME
- Name of the project (name of repository)
BRANCH_NAME
- Branch to build
- Defaults to develop
NODE_VERSION_REACT_APP
- Node version used to develop React Application
- Defaults to latest
- This is used to create pull correct image: node:latest
LOCAL_PORT
- Port used by host
- Defaults to 5000
REACT_CONTAINER_PORT
- Port used by react application
- Defaults to 3000
ID_RSA_PATH
- path to SSH RSA Key

# Project Information
REPOSITORY_URL="git@github.com:salhernandez/test-react.git"
PROJECT_NAME="test-react"
BRANCH_NAME="develop"
NODE_VERSION_REACT_APP="latest"

# default create-react-app port
REACT_CONTAINER_PORT=3000
LOCAL_PORT=5000

# path to SSH RSA KEY
ID_RSA_PATH="/c/Users/User/.ssh/id_rsa"

rbc.sh will copy the SSH key into the container and use it to pull the repository.

Run it

# run with defaults
./rbc.sh
# access application via localhost:5000

# run with a specific branch
./rbc.sh -b bug-fix
# access application via localhost:5000

# run with a specific branch and set local port
./rbc.sh -b bug-fix -p 4001
# access application via localhost:4001

# run with a specific branch, set local port and container port
./rbc.sh -b bug-fix -p 4001 -c 3001
# access application via localhost:4001

Under the hood

What you need

Working SSH private key that has access to your GitHub account
1. This can also be configured for other remotes
Docker
Bash Shell

`rbc.sh`

BRANCH_NAME, PROJECT_NAME, REPOSITORY_URL, REACT_CONTAINER_PORT, and ID_RSA_PATH are passed into docker-compose build as build-time variables(--build-arg) and IMAGE_NAME is added as an environment variable with a value of ${PROJECT_NAME}/${BRANCH_NAME}:latest which translates to test-react/develop:latest

# build image
docker-compose build \
$BUILD_CACHE \
--build-arg BRANCH_NAME=$BRANCH_NAME \
--build-arg PROJECT_NAME=$PROJECT_NAME \
--build-arg REPOSITORY_URL=$REPOSITORY_URL \
--build-arg REACT_CONTAINER_PORT=$REACT_CONTAINER_PORT \
--build-arg NODE_VERSION_REACT_APP=$NODE_VERSION_REACT_APP \
--build-arg SSH_PRIVATE_KEY="$(cat ${ID_RSA_PATH})"

# translates to 
docker-compose build \
$BUILD_CACHE \
--build-arg BRANCH_NAME="develop" \
--build-arg PROJECT_NAME="test-react" \
--build-arg REPOSITORY_URL="git@github.com:salhernandez/test-react.git" \
--build-arg REACT_CONTAINER_PORT=3000 \
--build-arg NODE_VERSION_REACT_APP="latest" \
--build-arg SSH_PRIVATE_KEY="$(cat /c/Users/User/.ssh/id_rsa)"

After the image is built, it will be tagged with the name test-react/develop:latest.

Then it runs the image

# in interactive mode
docker run -it --rm -p $LOCAL_PORT:$REACT_CONTAINER_PORT $IMAGE_NAME

# translates to
docker run -it --rm -p 5000:3000 test-react/develop:latest

`docker-compose.yml`

BRANCH_NAME, PROJECT_NAME, REPOSITORY_URL, REACT_CONTAINER_PORT, and SSH_PRIVATE_KEY are passed into .Dockerfile as build-time variables(ARG). Image will have the name defined by environment variable IMAGE_NAME

version: '3.7'
services:
  the_container:
    image: ${IMAGE_NAME} # environment variable
    build:
      context: ./
      dockerfile: .Dockerfile
      args:
        BRANCH_NAME: ${BRANCH_NAME} # --build-arg
        PROJECT_NAME: ${PROJECT_NAME} # --build-arg
        REPOSITORY_URL: ${REPOSITORY_URL} # --build-arg
        REACT_CONTAINER_PORT: ${REACT_CONTAINER_PORT} # --build-arg
        NODE_VERSION_REACT_APP: ${NODE_VERSION_REACT_APP} # --build-arg
        SSH_PRIVATE_KEY: ${SSH_PRIVATE_KEY} # --build-arg
    stdin_open: true

# translates to
version: '3.7'
services:
  the_container:
    image: test-react/develop:latest # environment variable
    build:
      context: ./
      dockerfile: .Dockerfile
      args:
        BRANCH_NAME: develop # --build-arg
        PROJECT_NAME: test-react # --build-arg
        REPOSITORY_URL: git@github.com:salhernandez/test-react.git # --build-arg
        REACT_CONTAINER_PORT: 3000 # --build-arg
        NODE_VERSION_REACT_APP: latest # --build-arg
        SSH_PRIVATE_KEY: <private_key> # --build-arg
    stdin_open: true

`.Dockerfile`

Using ARGs the dockerfile does the following:

Uses node:<NODE_VERSION_REACT_APP> as base image
Sets ARGs
Sets working directory
Copies SSH RSA key into the container
Clones repository from REPOSITORY_URL
Sets working directory again, but now it is based on the project folder cloned
Installs dependencies
Removes SSH key
Exposes port to be used by the application: REACT_CONTAINER_PORT
Runs the application with npm start

# latest version of Node.js
ARG NODE_VERSION_REACT_APP="latest"
ARG DOCKER_NODE_IMAGE="node:${NODE_VERSION_REACT_APP}"

# Builds from node image, defaults to node:latest
FROM "${DOCKER_NODE_IMAGE}"

# Will only be used once
ARG SSH_PRIVATE_KEY=0
ARG BRANCH_NAME=0
ARG REPOSITORY_URL=0
ARG PROJECT_NAME=0
ARG REACT_CONTAINER_PORT=3000
ARG BASE_WORKDIR="/app"
ARG PROJECT_WORKDIR="${BASE_WORKDIR}/${PROJECT_NAME}"

# Set working directory
WORKDIR "${BASE_WORKDIR}"

# Setup SSH
RUN mkdir ~/.ssh/
RUN echo "${SSH_PRIVATE_KEY}" > ~/.ssh/id_rsa

# Make sure your domain is accepted
RUN ssh-keyscan github.com >> ~/.ssh/known_hosts
RUN chmod 0600 ~/.ssh/id_rsa

# Clone repository via SSH
RUN git clone "${REPOSITORY_URL}"

# Set working directory again, now we're inside the react project itself
WORKDIR "${PROJECT_WORKDIR}"

# Get all branches from remote
RUN git fetch

# Checkout branch
RUN git checkout "${BRANCH_NAME}"

# Install dependencies
RUN npm install
RUN npm install react-scripts

# Remove SSH KEY
RUN rm -rf ~/.ssh/

# Expose port which is used by the actual application
EXPOSE $REACT_CONTAINER_PORT

# Finally runs the application
CMD [ "npm", "start" ]

Bundling it all together

rbc.sh runs two commands, one to build the image, and one to run it.

# build image
docker-compose build \
$BUILD_CACHE \
--build-arg BRANCH_NAME=$BRANCH_NAME \
--build-arg PROJECT_NAME=$PROJECT_NAME \
--build-arg REPOSITORY_URL=$REPOSITORY_URL \
--build-arg REACT_CONTAINER_PORT=$REACT_CONTAINER_PORT \
--build-arg NODE_VERSION_REACT_APP=$NODE_VERSION_REACT_APP \
--build-arg SSH_PRIVATE_KEY="$(cat ${ID_RSA_PATH})"

# run image
docker run -it --rm -p $LOCAL_PORT:$REACT_CONTAINER_PORT $IMAGE_NAME

# go to localhost:5000 to see the live react app

Warning!

DO NOT USE THIS TO PUSH AN IMAGE TO DOCKER HUB! If you run docker history <image_name> --no-trunc you will see all the variables passed into the image like your ID_RSA token! This should only be used for development purposes only! More information [here].(https://docs.docker.com/engine/reference/commandline/history/)

For a more secure way to pass build secret information use BuildKit: New Docker Build secret information

BuildKit is still experimental and not supported by Windows

Useful information

Since this will be generating new containers, you will want to clean up intermediate and unused containers every now and then, use the following commands to help you free up some space:

Docker provides a single command that will clean up any resources — images, containers, volumes, and networks — that are dangling (not associated with a container):

docker system prune

To additionally remove any stopped containers and all unused images (not just dangling images), add the a flag to the command:

docker system prune -a

Helpful URLs

Checkout the project on GitHub.

Q&A

What problem did you try to fix with a tool/project because you did not want repeat a series of tasks?

Get Screenshot + Console Logs + HAR log using Capture Page State Chrome Extension

Salvador Hernandez — Fri, 27 Dec 2019 07:05:27 +0000

What Problem do I want to solve?

As a developer whenever a bug is reported you want to have as much context as possible to be able to solve the issue in the most efficient manner. Depending on the technical level of the reporter, you can get a screenshot with reproduction steps, or maybe just a screenshot with no context. If the error happens on a web app it can be caused by many things...logic from the front-end may have failed, the network may have gone down, the back-end did not respond in time, or there was a server error. Many things could have gone wrong which is why providing as much context as possible is important when trying to squash a bug. As developers, we check the console logs in the Developer Tools to look for errors or look at the Network tab to check if any of the requests returned an error or timed out. If there was a tool that allowed you to get all three: Screenshot, Network requests aka HAR log, and Console Logs at once, it would make all developers' lives easier by providing as much context as possible.

Why do I care about this?

As a developer, when an issue is reported I find myself asking many questions that the reporter does not always have the answer to. Many of these questions can be solved by providing HAR log, Console Logs, and a Screenshot. This will allow me to narrow down in which part of the application needs to be fixed and not spend much time trying to replicate the issue.

Why create an extension to gather all of these if you can do it manually?

Because it is time-consuming! and no one wants to read instructions when they're mad because the web app is not working properly and you're trying to report an issue.

How to get each item individually

If you are curious as to how to get each of the three items I will explain them below

Taking Screenshot (using Snipping Tool)

Open Snipping Tool
Click on New
Draw rectangle on capture region
Click on Save Snip
Give it a name and click OK

Getting Console logs(On Google Chrome)

Open Chrome Dev Tools (F12)
Click on Console Tab
Right Click inside of panel
Click on Save as...
Give it a name and click Save

Getting HAR log (On Google Chrome)

Open Chrome Dev Tools (F12)
Click on Network Tab
Click on Export HAR...
Give it a name and click Save

How to get Screenshot + Console Logs + HAR log using Capture Page State

Click on Extension Icon
Select what you want to capture
1. Screenshot
2. Console Logs
3. HAR log
  1. Chrome Dev Tools needs to be open to get HAR log
Click on Get Snapshot
1. The items selected will now be downloaded, 1 file per item

Demo

Thank you for your time, if you want to install or read more about Capture Page State Chrome Extension you can visit the repository.

Introducing pomoDoNotDisturb

Salvador Hernandez — Wed, 28 Aug 2019 05:20:37 +0000

Not too long ago we got these signs at work:

Their purpose is to let co-workers know if you are available to chat or not. I liked the idea, but it was a hassle having to reach for the sign and change it. Also, since the sign is not within my field of view, I would sometimes forget what the sign was set for and would have to check. I thought that there should be a better way of handling this where I could change my status on a hub similar to an Elgato Stream Deck and it could show my current status on a screen.

That is how pomoDoNotDisturb was born. Since I use the Pomodoro method to focus on tasks, I figured that it would be nice if the hub could also include a timer that would let people know if I was available or not based on my Pomodoro status.

The end result consisted of a Raspberry Pi Zero W that talks to a Raspberry Pi 3 via USB as a USB/Ethernet Gadget. The Pi Zero has a screen attached to it, while the Raspberry Pi has a touchscreen attached to it. The Raspberry Pi 3 runs Flask which serves two pages:

/hub
1. Controls the status and Pomodoro session
/status
1. Shows current status

For more information please visit the Github repo: pomoDoNotDisturb

The toughest part was making the Pi's talk to each other. It ended up being as simple as assigning static IPs to the USB connection.

Feedback is welcomed! Leave a comment or open an issue.

What do you do at the end of the workday?

Salvador Hernandez — Tue, 05 Feb 2019 06:14:20 +0000

As a Software Engineer what do you do at the end of the day?
I want to start writing a summary about what I worked to document what I did well and what I can improve on such as responding to emails, communicating ideas, getting into the zone, etc...

Do any of you have end-of-day habits/rituals that made you better at your craft?