DEV Community: Alexander Garcia

Looking at quality of Hacktoberfest PRs as a Maintainer

Alexander Garcia — Thu, 02 Nov 2023 16:28:26 +0000

Intro

Hello, all 👋 I'm Alexander Garcia and one of the maintainers of several open source projects. This is my 3rd year doing a Hacktoberfest

Project

Our process for reviewing and merging pull requests is about what you'd expect from a normal open source project. Our typical reviewing process checks that all unit tests and E2E tests have passed. That initial review is then followed by a quality and content check. Does the PR follow our guidelines, are there spelling mistakes, what issues does it solve, are the issues reproducible, etc.

Highs and Lows

Some of the highs and lows are having to review low quality PRs that have not completed those checks. One thing I think is really awesome is that the E2E tests review catches a lot of things that would otherwise go unnoticed especially with platform utilities and helper functions.

Growth

My skillset remained about the same however I think I am getting more interested in contributing to computer vision projects in the future.

Maintainer

https://github.com/department-of-veterans-affairs

Contributing to Open Source

Alexander Garcia — Thu, 02 Nov 2023 16:10:16 +0000

Intro

Hello all, I am a frequent contributer in Open Source. This is my third year contributing to Hacktoberfest. Check out my Github

Highs and Lows

I didn't have one big accomplishment but more along the lines of several smaller accomplishments that helps the community and open source projects I contribute to.

Growth

I always try to remember that all contributions are valuable even if its not directly related to code. That can include documentation, design, translations, or even discussions and RFCs. While my career goals haven't changed my interests in which projects I contribute have in fact changed. In future Hacktoberfests I hope to contribute to more Aritifical Intelligence projects with a focus on Computer Vision

PRs for contributor

JavaScript OAuth 2.0 (part 1) - Crypto

Alexander Garcia — Tue, 05 Sep 2023 23:38:58 +0000

JavaScript OAuth 2.0 (part 1) - Crypto

This is part 1 of a 3 part series that specifically goes through the code necessary to build your own OAuth 2.0 library in JavaScript. We're gonna review how to use some basic OAuth 2.0 crypto utility functions to generate randomized state and a code verifier. Then we will review how to take a code verifier and generate a code challenge which is a HMAC (SHA-256) base64 url-encoded string.

How to generate a code verifier

Implementation

const generateCodeVerifier = () => {
  const PREFERRED_BYTE_LENGTH = 48;
  const webCrypto = getWebCrypto();
  if (webCrypto?.subtle) {
    const arr = new Uint8Array(PREFERRED_BYTE_LENGTH);
    webCrypto.getRandomValues(arr);
    return base64UrlEncode(arr);
  } else {
    // Node fallback
    const nodeCrypto = require("crypto");
    return nodeCrypto.randomBytes(PREFERRED_BYTE_LENGTH).toString("base64url");
  }
};

Unit test

// minimum 43 characters & maximum of 128 characters
describe("generateCodeVerifier", () => {
  it("should generate a 32-byte base64url encoded string", () => {
    const codeVerifier = cryptoLib.generateCodeVerifier();
    expect(codeVerifier).toMatch(/^[A-Za-z0-9-_.~]{64}$/);
    expect(codeVerifier.length >= 43).toBeTruthy();
    expect(codeVerifier.length <= 128).toBeTruthy();
  });
});

How to generate a code challenge

Implementation

const generateCodeChallenge = async (codeVerifier) => {
  if (!codeVerifier) return null;
  const webCrypto = getWebCrypto();
  if (webCrypto?.subtle) {
    return base64UrlEncode(
      await webCrypto.subtle.digest("SHA-256", stringToBuffer(codeVerifier))
    );
  } else {
    // Node fallback
    const nodeCrypto = require("crypto");
    const shaHash = nodeCrypto.createHash("sha256");
    shaHash.update(stringToBuffer(codeVerifier));
    return shaHash.digest("base64url");
  }
};

Unit test

// Code verifier + Code Challenge directly taken from https://datatracker.ietf.org/doc/html/rfc7636
const codeVerifier = "dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXk";
const codeChallenge = "E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM";

describe("generateCodeChallenge", () => {
  it("should generate the matching code challenge for a given code verifier", async () => {
    expect(await cryptoLib.generateCodeChallenge(codeVerifier)).toEqual(
      codeChallenge
    );
  });
  it("should not generate a code challenge if not code verifier parameter passed", async () => {
    expect(await cryptoLib.generateCodeChallenge()).toBeNull();
  });
});

How to generate state

Implementation

const generateRandomString = (length = 24) => {
  if (length === 0) return null;
  const webCrypto = getWebCrypto();
  if (webCrypto?.subtle) {
    const buffer = new Uint8Array(Math.ceil(length / 2));
    webCrypto.getRandomValues(buffer);
    return Array.from(buffer, (byte) =>
      byte.toString(16).padStart(2, "0")
    ).join("");
  } else {
    // Node fallback
    const nodeCrypto = require("crypto");
    return nodeCrypto
      .randomBytes(Math.ceil(length / 2))
      .toString("hex")
      .slice(0, length);
  }
};

Unit test

describe("generateRandomString", () => {
  it("should generate a secure random string", () => {
    expect(cryptoLib.generateRandomString()).toMatch(/^[A-Za-z0-9-_]{24}$/);
  });
  it("should return null if length is 0", () => {
    expect(cryptoLib.generateRandomString(0)).toBe(null);
  });
});

Helper functions

function stringToBuffer(string) {
  if (!string || string.length === 0) return null;
  const buffer = new Uint8Array(string.length);
  for (let i = 0; i < string.length; i++) {
    buffer[i] = string.charCodeAt(i) & 0xff;
  }
  return buffer;
}

function base64UrlEncode(input) {
  if (!input || input.length === 0) return null;
  const inputType =
    typeof input === "string"
      ? input
      : String.fromCharCode(...new Uint8Array(input));

  return btoa(inputType)
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=+$/, "");
}

Hopefully some of you found that useful. Cheers! 🎉

Connect with me on Dev.to!

Web scraping Jogathon data with JavaScript

Alexander Garcia — Sun, 18 Sep 2022 15:31:00 +0000

Web scraping Jogathon data

Background

So I'm sure many of you parents have children in school who run the jog-a-thon to raise funds for the school. When dropping off my son for his jog-a-thon fundraiser today I asked his teacher if he could tell where he stood compared to the rest of his class.

The teach just mentioned that he would not be divulging that information because he just closed his computer. 😅

Assumptions

I assume that the reader is knowledgable using Node.js and JavaScript.

The Problem

Because I'm nosy curious I wanted to find out where Noah is in the running with his classmates. So the website presented to students to see their progress is on this page: https://ultrafunrun.com/pledge/print_progress.php?par=125001 with the par query parameter representing a specific student's participant number.

I don't know the upper and lower bounds for the participant number (par query parameter) for a particular school or class.
I don't want to make requests to parse HTML pages we've already filtered out

Let's get poppin'

So first I want to import some libraries to help us out.

cheerio used to parse HTML pages
axios used to perform network requests

// scraper.js
const axios = require("axios");
const cheerio = require("cheerio");

Next I wanted to perform a single network request just to see how the cheerio library worked and to see what data I needed to filter on. So using the following URL for UltraFunRun.com I made a single network request and log the results when grabbing the school name.

// scraper.js
const axios = require("axios");
const cheerio = require("cheerio");

const url = `https://ultrafunrun.com/pledge/print_progress.php?par=`;

async function scrapeData() {
  const participantId = 125000;
  try {
    const { data } = await axios.get(`${url}${participantId}`);
    const $ = cheerio.load(data);

    const schoolName = $("body > table > tbody > tr:nth-child(2) > td");

    console.log(schoolName); // School Name: <Specific Elementary Name>
  } catch (err) {
    console.error("problem with request", err);
  }
}

scrapeData();

I then ran modified the scripts in my package.json to run the script like so to see the results.

{
  "scripts": {
    // rest of scripts
    "scrape": "node scraper.js"
  }
}

I found that reading through the cheerio documentation it has a built-in method called text which helps with transformations. Additionally, I noticed when grabbing the school name with the selector it included the School Name: as part of the .text() call.

Let's loop it up

So from here after learning that the <td> elements were grabbing the entire field names (ie. School Name, Participant Name, Score, and Teacher Name). I modified the function to set an upper and lower bounds of around 1000 requests.

// scraper.js
const axios = require("axios");
const cheerio = require("cheerio");

const url = `https://ultrafunrun.com/pledge/print_progress.php?par=`;

async function scrapeData() {
  const scrappedData = [];
  try {
    for (let participantId = 125000; participantId <= 126000; participantId++) {
      const { data } = await axios.get(`${url}${participantId}`);
      const $ = cheerio.load(data);

      // select all elements to filter on
      const schoolName = $("body > table > tbody > tr:nth-child(2) > td");
      const teacherName = $("body > table > tbody > tr:nth-child(3) > td");
      const student = $("body > table > tbody > tr:nth-child(4) > td");
      const studentPoints = $(
        "body > table > tbody > tr:nth-child(9) > td:nth-child(3)"
      );

      if (
        schoolName.text().includes("School Name: <Specific Elementary Name>") &&
        teacherName.text().includes("Teacher Name: <Mr. Teachers Name>")
      ) {
        scrappedData.push(`${student.text()} Points: ${studentPoints.text()}`);
      }
    }
  } catch (err) {
    console.error("problem with request", err);
  }
  console.log(scrappedData);
}

scrapeData();

So this definitely got us a few results (around 8 students in his class) and their points however I have a problem. The scrappedData array only exists in-memory and every time I ran this scraping function it would take about 5-8 minutes to run. So that would mean I would have to increase the upper and lower bounds and thus the time it takes to run would increase.

To address these annoying issues I wanted to do the following:

Log the participant numbers I already attempted that were not within our filters
- Skip the ones I already attempted
Log the saved students data to a JSON file

Tweaking and refactoring

Let's start with saving both the found students and attempted participant numbers to a JSON file. I will need to use Node.js built-in file system using fs, so let's go ahead and import it.

// scraper.js
// ... rest of imports
const fs = require("fs");

Our filtered students is good to go but before I can create a file I need some data for the attempted numbers. I first initialized an empty array for attemptedNumbers and every time I did not get a hit I would push the participantId to that array, and when I did get a hit I added it to the scrappedData.

const url = `https://ultrafunrun.com/pledge/print_progress.php?par=`;

async function scrapeData() {
  const scrappedData = [];
  const attemptedNumbers = [];
  try {
    for (let participantId = 124000; participantId <= 127000; participantId++) {
      if (attemptedNumbers.includes(participantId)) {
        break;
      }
      const { data } = await axios.get(`${url}${participantId}`);
      const $ = cheerio.load(data);

      // select all
      const schoolName = $("body > table > tbody > tr:nth-child(2) > td");
      const teacherName = $("body > table > tbody > tr:nth-child(3) > td");
      const student = $("body > table > tbody > tr:nth-child(4) > td");
      const studentPoints = $(
        "body > table > tbody > tr:nth-child(9) > td:nth-child(3)"
      );

      if (
        schoolName.text().includes("School Name: Barnett Elementary") &&
        teacherName.text().includes("Teacher Name: Kinsey")
      ) {
        scrappedData.push(`${student.text()} Points: ${studentPoints.text()}`);
      } else {
        attemptedNumbers.push(participantId);
      }
    }
  } catch {
    console.log("with request error");
  }
}
// calling `scrapeData` function

Now that both of those arrays of data exist, let's save these to a JSON file to ensure I can help speed it up next time it runs. We're going to create the files at the end of our data scraping right after the ending of the for-loop.

I did write all of this code in about 15-20 minutes so you'll see that it's not very DRY code (aka It definitely repeats itself). I didn't feel the need to write out an abstraction to help with file creation but you can do as you like.

    } // ending of for-loop
    fs.writeFile(
      "students.json",
      JSON.stringify(scrappedData, null, 2),
      (err) => {
        if (err) {
          console.error(err);
          return;
        }
        console.log("written <Mr. Teachers Name> class successfully");
      }
    );
    fs.writeFile(
      "attemptedNumbers.json",
      JSON.stringify(attemptedNumbers, null, 2),
      (err) => {
        if (err) {
          console.error(err);
          return;
        }
        console.log("written attempted numbers successful");
      }
    );
  } catch {
    console.log("with request error");
  }
} // end of function

The only other thing I decided to do was to replace the initialized attemptedNumbers with the data that was imported via the newly created attemptedNumbers.json file like so:

// scraper.js
const axios = require("axios");
const cheerio = require("cheerio");
const fs = require("fs");
const attemptedNumbers = require("./attemptedNumbers");

const url = `https://ultrafunrun.com/pledge/print_progress.php?par=`;

async function scrapeData() {
  const scrappedData = [];
  // deleted const attemptedNumbers = []
  // ... rest of code

Final thoughts

This was a fun little web scraping project to find out real information about how many points my son received compared to the others. Not to sound boastful but he got 54.45 points which was more than the rest of the class combined.

Originally posted here

Hopefully some of you found that useful. Cheers! 🎉

From Cookie strings into usable JavaScript

Alexander Garcia — Fri, 17 Jun 2022 20:31:50 +0000

Background

Hello all, this will be a slightly in-depth post that I hope helps some developers out there.

We are using OAuth and one of the ways we are using session management on the Front-end is by providing cookies of each of the Access Token and Refresh Token expiration dates.

Assumptions

I assume that the reader is knowledgable on using .split, .map, and .reduce array methods.

The Problem

Our Backend is built using Ruby on Rails and the problem I was facing when the response cookies were set were:

Multiple cookies were stored for the Frontend
Both the access token expiration and refresh token expiration are stored as a Ruby hash in an encoded string.

// document.cookie
'FLIPPER_ID=flipper_on; token_info=%7B%3Aaccess_token_expiration%3D%3EFri%2C+17+Jun+2022+16%3A11%3A58.265440745+UTC+%2B00%3A00%2C+%3Arefresh_token_expiration%3D%3EFri%2C+17+Jun+2022+16%3A36%3A58.147084176+UTC+%2B00%3A00%7D'

Requirements

From here I had a few requirements of my own to ensure the session management work as I expected

An object with both the access token & refresh token expirations
Having the expirations be usable JavaScript dates

Part 1 of the Creating Our Cookie Object

const oAuthCookieObject = document.cookie
  // Creates an array of each cookie
  .split(';')
  // Maps the cookies to <key>=<value> pairs
  .map(cookie => cookie.split('='))
  /*
   Reduces it down to a single object of our access token and 
   refresh tokens by checking if our cookieKey includes the
   'info_token' value we are looking for
  */
  .reduce((_, [cookieKey, cookieValue]) => ({
    ...(cookieKey.includes('info_token') && {                
     ...formatOurCookie(decodeURIComponent(cookieValue))
    })
  }), {});

Part 1 Breakdown

1) We create a variable from document.cookie

2) We split each cookie string

// original string
'FLIPPER_ID=flipper_on; info_token='
// after .split
['FLIPPER_ID=flipper_on', 'info_token=%7B%3Aaccess_token_expiration%3D%3EFri%2C+17+Jun+2022+16%3A11%3A58.265440745+UTC+%2B00%3A00%2C+%3Arefresh_token_expiration%3D%3EFri%2C+17+Jun+2022+16%3A36%3A58.147084176+UTC+%2B00%3A00%7D']

3) We map each cookie to a new array of arrays by splitting on the '='

// original array after .split
[
 'FLIPPER_ID=flipper_on', 
 'info_token=%7B%3Aaccess_token_expiration%3D%3EFri%2C+17+Jun+2022+16%3A11%3A58.265440745+UTC+%2B00%3A00%2C+%3Arefresh_token_expiration%3D%3EFri%2C+17+Jun+2022+16%3A36%3A58.147084176+UTC+%2B00%3A00%7D'
]
// after we use .map
[
  ['FLIPPER_ID', 'flipper_on']
  ['info_token', '%7B%3Aaccess_token_expiration%3D%3EFri%2C+17+Jun+2022+16%3A11%3A58.265440745+UTC+%2B00%3A00%2C+%3Arefresh_token_expiration%3D%3EFri%2C+17+Jun+2022+16%3A36%3A58.147084176+UTC+%2B00%3A00%7D']
]

4) We reduce to a single usable object by destructing the cookie's key|value pair if it matches our 'info_token' and call another function with the value being interpreted as a decodedURIComponent string.

// String before decodeURIComponent is called
const nonDecoded = '%7B%3Aaccess_token_expiration%3D%3EFri%2C+17+Jun+2022+16%3A11%3A58.265440745+UTC+%2B00%3A00%2C+%3Arefresh_token_expiration%3D%3EFri%2C+17+Jun+2022+16%3A36%3A58.147084176+UTC+%2B00%3A00%7D';
// String after decodedURIComponent is called
const decoded = '{:access_token_expiration=>Fri,+17+Jun+2022+16:11:58.265440745+UTC++00:00,+:refresh_token_expiration=>Fri,+17+Jun+2022+16:36:58.147084176+UTC++00:00}'

Part 2 of Creating our Cookie Object `formatOurCookie` function

function formatOurCookie(unformattedCookieString) {
  return unformattedCookieString
    // Creates an array by splitting on ',+:' to get the access token and refresh token
    .split(',+:')
    .reduce((obj, cookieVal) => {
      // Destructure the key|value pair of the token's name and its expiration date and uses Regex to remove {: and }
      const [key, val] = cookieVal
        .replace(/{:|}/g, '').split('=>')
      // Update the value by replacing the '+' with spaces and removing the UTC timezone ending
      const formattedValue = val
        .replaceAll('++00:00', '')
        .replaceAll('+', ' ')
      // Return's the accumulator and the key|value pair with a usable JavaScript Date object
      return {
        ...obj,
        [key]: new Date(formattedValue)
      }
  }, {})
}

Part 2 of Breakdown of `formatOurCookie` function

1) Take the unformattedCookieString parameter which will be a decodeURIComponent string and use the split method on ',+:' to get the access_token_expiration and the refresh_token_expiration into an array

// original string
'{:access_token_expiration=>Fri,+17+Jun+2022+16:11:58.265440745+UTC++00:00,+:refresh_token_expiration=>Fri,+17+Jun+2022+16:36:58.147084176+UTC++00:00}'
// array split on the `',+:'`
[
 '{:access_token_expiration=>Fri,+17+Jun+2022+16:11:58.265440745+UTC++00:00',
 'refresh_token_expiration=>Fri,+17+Jun+2022+16:36:58.147084176+UTC++00:00}'
]

2) Use the .reduce method to loop through the split array with the goal being to reduce it into a single object.

3) We want to destructure the key|value pairs by

a. First removing all instances of :{ and } from the string.

// original (removes `:{`)
'{:access_token_expiration=>Fri,+17+Jun+2022+16:11:58.265440745+UTC++00:00'
// after removes `:{`
'access_token_expiration=>Fri,+17+Jun+2022+16:11:58.265440745+UTC++00:00'
// after removes `}`
'refresh_token_expiration=>Fri,+17+Jun+2022+16:36:58.147084176+UTC++00:00'

b. Then by splitting the string on the => using the .split method

// original
'access_token_expiration=>Fri,+17+Jun+2022+16:11:58.265440745+UTC++00:00'
// transformed
[
 'access_token_expiration', 
 'Fri,+17+Jun+2022+16:11:58.265440745+UTC++00:00'
]

c. Format the key's value into a usable format by replacing the + with a single space and removing the ++00:00

// original
'Fri,+17+Jun+2022+16:11:58.265440745+UTC++00:00'
// formatted
'Fri, 17 Jun 2022 16:11:58.265440745 UTC'

4) Return the accumulator and coerce the above string into a usable JavaScript Date

TL/DR

const oAuthCookieObject = document.cookie
  .split(';')
  .map(cookie => cookie.split('='))
  .reduce((_, [cookieKey, cookieValue]) => ({
    ...(cookieKey.includes('info_token') && {
      ...formatOAuthCookie(decodeURIComponent(cookieValue))
    })
  }), {});

function formatOurCookie(unformattedCookieString) {
  return unformattedCookieString
    .split(',+:')
    .reduce((obj, cookieVal) => {
      const [key, val] = cookieVal
        .replace(/{:|}/g, '').split('=>')
      const formattedValue = val
        .replaceAll('++00:00', '')
        .replaceAll('+', ' ')
      return {
        ...obj,
        [key]: new Date(formattedValue)
      }
  }, {})
}

Hopefully some of you found that useful. Cheers! 🎉

Easiest list formatting you'll ever use.

Alexander Garcia — Tue, 26 Apr 2022 16:29:00 +0000

This will be a pretty short post that I hope that many of you find helpful. So we originally had an inelegant solution for dealing with lists as we wanted the ability to dynamically use <strong> tags.

// ORIGINAL
export default function ListText({ isBold = false }) {
  const animals = ['Dog', 'Cat', 'Rhino', 'Penguin'];

  return animals.map((animal, index) => {
    const totalAnimals = animals.length;
    const last = index === totalAnimals - 1;
    const comma = !last && totalAnimals > 2;
    const or = totalAnimals >= 2 && last;

    const renderAnimal = isBold ? <strong>{animal}</strong> : animal;

    return (
      <React.Fragment key={index}>
       {or && 'or '}
       {renderAnimal}
       {comma && ','}
       {!last && ' '}
      </React.Fragment>
  })
}

The above piece of code would render
Dog, Cat, Rhino, or Penguin

Because my team was on a tight deadline this piece of code however unsightly was allowed through to production. To be fair, this code works as expected but I took it upon myself to see if I could find a better solution.

Intl.ListFormat to the rescue

I encourage you all to read the MDN documentation about Intl.ListFormat but essentially it allows you to enable language-sensitive list formatting. That's right, this will work with any language 🤯

export default function ListText({ isBold = false }) {
  const animals = ['Dog', 'Cat', 'Rhino', 'Penguin'];

  return new Intl.ListFormat('en', { style: 'long', type: 'disjunction' })
  .formatToParts(animals)
  .map(({ type, value }) => {
    return type === 'element' && isBold ? <strong>{value}</strong> : value;
  })
}

The above piece of code would still render
Dog, Cat, Rhino, or Penguin

Let's break this down.

We create a new instance of the Intl.ListFormat
We set our list format to use English 'en' and set our config to use a style of 'long' and type of 'disjunction'.
We pass our animals array to the formatToParts method which will return us a new array with the commas and or inserted (the length becomes 5)
We map through the returned array and check if the type is an element. The element will always coincide with the value from our array where as the type literal will be the comma or or respectively.
We check if our isBold prop is set to true and return the value between the <strong> tags, otherwise we just pass the value.

More extensible

Our code is now more extensible. For example we could pass in an array as one of our props instead of the declared animals array. We could also add a prop to change the type in the Intl.ListFormat to allow us to have 'and' instead of 'or'.

Finishing up

I hope developers running into a similar issue find this to be a bit more useful. You can mess around with the CodePen below.

How would you rate your dev skills

Alexander Garcia — Tue, 13 Aug 2019 21:24:27 +0000

I'm sure everyone here has had a preliminary phone interview. My question is how do you answer this question:

How would you rate yourself in x language on a scale from 1-10?

Recently, I was asked this question and I gave an answer of 7.5-8 out of 10. To me this translates that I can figure out the answer if I don't know it and can break down problems into manageable chunks.

What do you all think? How would you rate your skills in JavaScript, Python, etc?

DEV Community: Alexander Garcia

Looking at quality of Hacktoberfest PRs as a Maintainer

Intro

Project

Highs and Lows

Growth

Maintainer

Contributing to Open Source

Intro

Highs and Lows

Growth

PRs for contributor

JavaScript OAuth 2.0 (part 1) - Crypto

JavaScript OAuth 2.0 (part 1) - Crypto

How to generate a code verifier

Implementation

Unit test

How to generate a code challenge

Implementation

Unit test

How to generate state

Implementation

Unit test

Helper functions

Web scraping Jogathon data with JavaScript

Web scraping Jogathon data

Background

Assumptions

The Problem

Let's get poppin'

Let's loop it up

Tweaking and refactoring

Final thoughts

From Cookie strings into usable JavaScript

Background

Assumptions

The Problem

Requirements

Part 1 of the Creating Our Cookie Object

Part 1 Breakdown

Part 2 of Creating our Cookie Object formatOurCookie function

Part 2 of Breakdown of formatOurCookie function

TL/DR

Easiest list formatting you'll ever use.

Intl.ListFormat to the rescue

Let's break this down.

More extensible

Finishing up

How would you rate your dev skills

Part 2 of Creating our Cookie Object `formatOurCookie` function

Part 2 of Breakdown of `formatOurCookie` function