DEV Community: Rembrandt Reyes (He/Him)

Ahhhh CVEs!

Rembrandt Reyes (He/Him) — Wed, 02 Nov 2022 03:44:18 +0000

Let me start by apologizing. I haven't been keeping up to date on my blog and I am ashamed of it.

I also almost forgot how to upload GIFs it's been that long!

Back to the topic

So recently in my career, we have been heavily focused on addressing CVEs in our code. If you don't know what CVE stands for it is Common Vulnerabilities and Exposures (read more about it in the link). I am not going into too much detail about their history and whatnot. I want to focus on why we have been addressing them. So I assume you already know what CVEs are.

Who cares about this stuff?

It's all about your situation, are you delivering a product that needs ironclad security? Do you have customers that are knocking on your door to address these CVEs? Are you developing a project for yourself e.g. side-project? For me, we have customers that are scanning the bundle of code that we deliver to them and they report back if it passes their security inspection. For my projects, I have some repos that tell me I have double-digit security issues and I don't plan on addressing them 😂.

Are all CVEs the same?

Again, that depends. There is a scale called Common Vulnerability Scoring System (CVSS) to determine its severity NOT risk. Meaning these scores are meant to inform you of which vulnerabilities you should be prioritizing which could translate to risk, but I digress.

CVSS 3.x
Low - 0.1 - 3.9
Medium - 4.0 - 6.9
High - 7.0 - 8.9
Critical - 9.0 - 10.0

Should they all be fixed?

Short answer: Yes. Long answer: Yes, eventually. This is a huge oversimplification of the CVE world. So we'll dive into it a bit more. I primarily deal with front-end code and if you are a "smart" developer you'll be utilizing open-source packages to build your web app. And as gracious as I am to all the developers pushing packages to NPM I also get annoyed (for a few seconds) with them when the package they've created is no longer supported or has a very slow upgrade cycle. More about this below. I am not trying to start a witch hunt 😅.

Let's get to fixing

So you finally get around to addressing those Critical CVEs and you start to look through your lock file to find the culprit. Let's say in this instance you are trying to resolve issues with minimist <= 1.2.5. You are looking for all the packages that list minimist as a dependency and start upgrading them one by one. You almost have all packages upgraded, nearing the finish line and you get to eslint-plugin-import a pretty popular plugin. eslint-plugin-import has a dependency on tsconfigs-path which has a dependency on json5 which has a dependency on minimist with a version, you guessed it, <= 1.2.5. You fire off yarn add -D eslint-plugin-import because YOLO and no upgrades were found. You check their GitHub to see if they have any updates to the package and you see this.

The same package I have and it's been over a year since its last release. Jeez. Ok, let me take a look at PRs and see if they have something cooking. I find a draft PR https://github.com/import-js/eslint-plugin-import/pull/2447 and in that PR there is a long thread of people going back and forth about this upgrade. With some comments from people, you may know 👀

TL;DR the CVE isn't an issue for their package and they will not upgrade tsconfig-paths to fix it. Great, this doesn't help me, because this is not an acceptable answer for our customers.

What are my options?

At this point, you have to make a decision.

A: Don't upgrade (big negative).
B: Use the package that JounQin forked called eslint-plugin-i which removes tsconfig-paths and addresses the CVE (No, because I don't know JounQin's track record).
C: Remove the plugin from your project (I was very tempted).
D: Use resolutions in your package.json (this).

"resolutions": {
  "minimist": "1.2.6"
}

Then run yarn install or npm install and notice your lock file has "forced" an upgrade to the package version you specified.

Resolutions are a great way to have your lock file to use a specified version. BUT be careful with the versions you are upgrading from -> to. You are mostly safe with minor and patch versions, but when breaking changes are introduced in major versions that can cause you a lot of headaches for your builds. For my use case, I went with option D, we want to address the CVEs and rarely want to use an exception if a resolution to the vulnerable package works.

Change of pace

There are a few benefits to fixing CVEs:

I am getting very intimate with the projects I work on.
When investigating a CVE in a package I use as a dependency I search through the code to see where these vulnerabilities live and get a better understanding of how the code works.
It's nice to get away from coding, investigation work is always a nice little bonus and I believe it helps me build better maintainable code.
Gives you a chance to interact with the OSS community. Raising issues or creating PRs to get some fixes in is great! And it shows you are trying to build a safer experience for your users and theirs.

Wait... how does React.useState work?

Rembrandt Reyes (He/Him) — Thu, 20 Aug 2020 00:54:55 +0000

So React hooks have been released for a while now and they are great! I have used them in production code and it makes everything look nicer. As I continued to use hooks, I started to wonder how all this magic works.

Apparently I was not the only one because there was a Boston React meetup on this topic. Big Thank you to Ryan Florence and Michael Jackson (Not the Moonwalking legend) for giving such a great talk around the subject. Continue watching and you will learn more about useEffect and how that works!

How does it work?

You create a functional component and throw some React hook at it that tracks state, can also update it, and it just works.

Many of us have seen some variation of this example before:

One `useState`



import React from "react";

const App = () => {
  const [count, setCount] = React.useState(1);

  return (
    <div className="App">
      <h1>The infamous counter example</h1>
      <button onClick={() => setCount(count - 1)}>-</button>
      <span style={{ margin: "0 16px" }}>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default App;

👏 👏 👏 It works!

Ok great, but how does it do that magic? Look at the React.useState line. It's so easy to read that I never questioned it. I have a destructed array that extracts the count value and some function called setCount and it will initialize count with the default value that I passed into useState. What happens when I add another React.useState to the picture?

Two `useState`, ha-ha-ha

Count Dracula anyone?



const App = () => {
  const [count, setCount] = React.useState(1);
  const [message, setMessage] = React.useState("");

  const adder = () => {
    if (count < 10) {
      setCount(count + 1);
      setMessage(null);
    } else {
      setMessage("You can't go higher than 10");
    }
  }

  const subtracter = () => {
    if (count > 1) {
      setCount(count - 1);
      setMessage(null);
    } else {
      setMessage("You can't go lower than 1, you crazy");
    }
  }

  return (
    <div className="App">
      <h1>The infamous counter example</h1>
      <button onClick={subtracter}>-</button>
      <span style={{ margin: "0 16px" }}>{count}</span>
      <button onClick={adder}>+</button>
      <p>{message}</p>
    </div>
  );
};

Now we are showing a message whenever a user is trying to go outside the bounds of 1 - 10

In our component, we have two destructured arrays that are using the same React.useState hook with different default values. Whoa, now we are getting into the magic of it all.

Alright so lets delete our React from React.useState we should get a referenceError saying, "useState is not defined"

Let's implement our own useState function.

Reverse engineering the `useState` function

A useState function has a value and a function that will set that value

Something like this:



const useState = (value) => {

  const state = [value, setValue]
  return state
}

We are still getting referenceErrors because we haven't defined setValue. We know that setValue is a function because of how we use it in useState
Our count useState: const [count, setCount] = React.useState(1);

Calling setCount: setCount(count + 1);

Creating the setValue function results in no more error but the - and + buttons don't work.



const useState = (value) => {
  const setValue = () => {
    // What do we do in here?
  }

  const state = [value, setValue]
  return state
}

If we try and change the default value in useState it will update count 👍🏽. At least something is working 😂.

Moving on to figuring out what the hell `setValue` does.

When we look at setCount it's doing some sort of value reassignment and then it causes React to rerender. So that is what we are going to do next.



const setValue = () => {
  // What do we do in here?
  // Do some assigning
  // Rerender React
}

We will pass in a new value argument to our setValue function.



const setValue = (newValue) => {
  // What do we do in here?
  // Do some assigning
  // Rerender React
}

But what do we do with newValue within the setValue function?



const setValue = (newValue) => {
  // Do some assigning
  value = newValue // Does this work?
  // Rerender React
}

value = newValue makes sense but that does not update the value of the counter. Why? When I console.log within setValue and outside of setValue this is what we see.

So After I refresh the page. The count is initialized to 1 and the message is initialized to null, great start. I click the + button and we see the count value increase to 2, but it does not update count on the screen. 🤔 Maybe I need to manually re-render the browser to update the count?

Implement a janky way to manually re-render the browser



const useState = (value) => {
  const setValue = (newValue) => {
    value = newValue;
    manualRerender();
  };
  const state = [value, setValue];
  return state;
};
.
.
.
const manualRerender = () => {
  const rootElement = document.getElementById("root");
  ReactDOM.render(<App />, rootElement);
};

manualRerender();

This still doesn't update count in the browser. What the heck?

I was stuck on this for a little while and now I know why. Let's console.log state right after we create it.



const state = [value, setValue];
console.log(state)

Our call to useState causes the first render, and we get:
[1, setValue()]

And on our second call to useState we render:
[null, setValue()]

resulting in:

To help visualize this a bit better, let's add a render tracker to count how many times we render the screen.



let render = -1

const useState = (value) => {
  const setValue = (newValue) => {
    value = newValue;
    manualRerender();
  };
  const state = [value, setValue];
  console.log(++render)
  console.log(state)
  return state;
};

How does our setValue function know which value to update? It doesn't, therefore we need a way to track it. You can use an array or an object to do this. I choose the red pill of objects.

Outside of useState function, we are going to create an object called states



const states = {}

Within the useState function initialize the states object. Let's use the bracket notation to assign the key/value pair.

states[++render] = state

I am also going to create another variable called id that will store the render value so we can take out the ++render within the brackets.

You should have something that looks like this:



let render = -1;
const states = {};

const useState = (value) => {
  const id = ++render;

  const setValue = (newValue) => {
    value = newValue;
    manualRerender();
  };
  const state = [value, setValue];
  states[id] = state;
  console.log(states);
  return state;
};

What does our states object look like?



states = {
  0: [1, setValue],
  1: [null, setValue]
}

So now when we click the add and subtract buttons we get... nothing again. Oh right because value = newValue still isn't doing anything.

But there is something that is happening. If you look at the console you will see that every time we click on one of the buttons it will keep adding the same arrays to our states object but count isn't incrementing and message is still null.

So setValue needs to go look for value, then assign the newValue to value.



const setValue = (newValue) => {
  states[id][0] = newValue;
  manualRerender();
};

Then we want to make sure we are only updating keys: 0 and 1 since those will be our two useState locations.

So head down to the manualRerender function and add a call to render and reassign it to -1



const manualRerender = () => {
  render = -1;
  const rootElement = document.getElementById("root");
  ReactDOM.render(<App />, rootElement);
};

We do this because every time we call setValue it will call the manualRerender function setting render back to -1

Lastly, we will add a check to see if the object exists. If it does then we will just return the object.



if (states[id]) return states[id];

Now we work again!

Phew. That was a lot to process and this is just a very simplistic approach to useState. There is a ton more that happens behind the scenes, but at least we have a rough idea of how it works and we demystified it a bit.

Take a look at all the code and try and make a mental model of how it all works.

Hope this helps 😊

What interview questions have you been asked?

Rembrandt Reyes (He/Him) — Fri, 07 Aug 2020 03:48:36 +0000

If you want to get specific great! If not just a general overview of your interview process will be fine.

How many rounds of interviews?
What kind of behavioral questions were you asked?
What type of technical questions were you asked?
Were you given a take-home project?
How many people did you interact with during your interviews?

Let's solve LeetCode! Fibonacci Number

Rembrandt Reyes (He/Him) — Wed, 05 Aug 2020 04:09:59 +0000

Problem 509 - Fibonacci Number

The Fibonacci numbers, commonly denoted F(n) form a sequence, called the Fibonacci sequence, such that each number is the sum of the two preceding ones, starting from 0 and 1. That is,

F(0) = 0,   F(1) = 1
F(N) = F(N - 1) + F(N - 2), for N > 1.

Given N, calculate F(N).

This problem is a great introduction to recursion and a little fun concept called dynamic programming (DP).

Conceptual Overview

In mathematics, the Fibonacci numbers form a sequence called the Fibonacci sequence, such that each number is the sum of the two preceding ones starting from 0 and 1.

For example: 0, 1, 1, 2, 3, 5, ...

So how do we solve this? I mentioned earlier that this problem is an introduction to recursion and DP. It is, but there are a few ways we can solve this problem.

If you want to learn more about Dynamic Programming, check out Dynamic Programming I: Fibonacci, Shortest Paths from MIT OpenCourseWare.

So there are a few solutions:
1) Recursion
2) Recursion with DP
3) Iteratively

Each with different time and space complexities.

Coding walkthrough

Recursion only

Any function that uses Recursion you must remember that there needs to be a base condition to stop the recursion. If the base case is not reached or defined then there will be stack overflow due to memory limitations.

/**
 * @param {number} N
 * @return {number}
 */
const fib = (N) => {
    if (N < 2) return N; // base condition

    return fib(N - 2) + fib(N - 1); // recursion
};

Pretty straight forward, there's a base condition that will stop the recursion when it evaluates to true.

Time & Space Complexity

Time: O(2^N) & Space: O(N)

Memoized dynamic programming algorithm

/**
 * @param {number} N
 * @return {number}
 */
const fib = (N) => {
    let memo = {}
    memo[0] = 0 // Given
    memo[1] = 1 // Given

    if (N in memo) return memo[N] // Base condition
    else  {
        memo[N] = fib(N - 1) + fib(N - 2) // Memoize results
        return memo[N] 
    }   
};

Whenever we compute a Fibonacci number we put it into the hash table. We do this to "store" or memorize the value so we do not have to do the calculation again. We can look up the key-value in constant time.

Time & Space Complexity

This would be considered a top-down approach
Time: O(N) & Space: O(N)

Iterative approach

const fib = (N) => {
    const lastTwo = [0, 1]
    let counter = 3

    if (N <= 1) {
        return N;
    }
    if (N == 2) {
        return 1;
    }

    while (counter <= N) {
        const nextFib = lastTwo[0] + lastTwo[1]
        lastTwo[0] = lastTwo[1]
        lastTwo[1] = nextFib
        counter++
    }

    return lastTwo[0] + lastTwo[1]
};

Time & Space Complexity

Time: O(N) & Space: O(1)

My top terminal commands

Rembrandt Reyes (He/Him) — Mon, 03 Aug 2020 20:37:43 +0000

I was recently watching a video that was walking beginners through terminal commands and they listed over 50 commands that you should use. 50!? Who uses more than 10 terminal commands?

The ones that I use (off the top of my head)

1) `pwd`

The command pwd stands for "print working directory" which gives your current location in terminal

2) `cd` `directory`

The command cd stands for "change directory" which allows you to navigate through the terminal.

3) `ls`

The command ls will list all the computer files in your current directory.

4) `mkdir` `folder`

The command mkdir will create a new folder in your current directory.

5) `clear`

The command clear will... you guessed it, clear your terminal.

6) `🐈` aka `cat` file

The command cat will return the contents of a file.

If you cat command a directory it will let you know that as well.

7) `touch` `file`

The command touch file will create a new file in your current directory.

8) `rm` `file`

The command rm file will remove the file from your current directory

There are some special options that you can pass into some of these commands but for now, the basics are all that is needed to be a hacker!

Some honorable mentions - these are commands that I use here and there.

mv - move files or rename files
sudo - "SuperUser Do", this enables admin/root permissions, only use this if you know what you are doing
grep - search for something in a file
ping - check your connectivity status to a server.
echo - used to move data into a file

Part 8 - Trying to get eSlayers to MVP

Rembrandt Reyes (He/Him) — Mon, 03 Aug 2020 02:31:51 +0000

There are so many features that I want to get out before I launch this site but I need to remind myself that those are all things that can come later in the project's life. I need to stay to true to the MVP that I set out for this project

My checklist of things I wanted

Search for a summoner
Display top players in TFT
Summoner stats
Summoner match history

The last piece of data that I am working on is the top players for TFT. I want to display a list of players on the home page that will show the top 20 players in Challenger.

There are a couple of tricky things to this list that I have to consider. The API returns all the players in Challenger in no particular order. The list is an array of objects with 100 entries. Since I am trying to return only the top 20 players I will have to do some logic that will sort the players based on their League Points and filter out the rest.

This is what my index.tsx looks like for now.

And I get my top 20 players from Challenger on the home page

Awesome! So now that I am "finished" with the MVP data. I am going to move on to styling the pages.

Next up I will be deciding on a color scheme and then start on the layout of the website.

eSlayers part 7 - fetching more data for math history

Rembrandt Reyes (He/Him) — Sun, 02 Aug 2020 01:09:42 +0000

Last post I was working on fetching data and trying to get some information to display for player match history. Now that I can fetch data from the match API I am going through and pulling all relevant data for match history

So far I have

Player name
Placement
Gold left
In-game level
Players eliminated
Trait of units used
- Trait name
- Number of units
- Tier style
- Tier of trait
Units
- Unit name
- Tier
- Items

This is what my Match.tsx component looks like now

And how it looks in localhost

So now that I have match history I want to pull more information related to the summoner. So in my case, I would like to pull some stats for Rjeezy.

Here are the data points I am looking to get for the summoner:

Average placement
Trait stats for the last 20 games
Most used units

So next up I will create some logic that will filter out all players besides the summoner so I can get access to summoner specific data for the data points I am trying to show.

Let's solve LeetCode - Is Subsequence

Rembrandt Reyes (He/Him) — Fri, 31 Jul 2020 05:56:37 +0000

Problem 392 - Is Subsequence

Given a string s and a string t, check if s is a subsequence of t.

A subsequence of a string is a new string which is formed from the original string by deleting some (can be none) of the characters without disturbing the relative positions of the remaining characters. (ie, "ace" is a subsequence of "abcde" while "aec" is not).

Examples

Input: s = "abc", t = "ahbgdc"
Output: true

Input: s = "axc", t = "ahbgdc"
Output: false

Conceptual Overview

Since we want to check if s is a subsequence of t we will want to check every character of s against t and if a character at s matches a character in t (in order) then we can move onto the next character in s and do the check all over again.

Looking at the example above let's run through a couple of iterations. In ECMAScript 5 we can treat the string as an array-like object, where individual characters correspond to a numerical index.

1) At s[0] = a; t[0] = a; does s[0] === t[0]? Yes, move to the next character in s and t
2) At s[1] = b; t[1] = h; does s[1] === t[0]? No, move to the next character in t
3) At s[1] = b; t[2] = b; does s[1] === t[2]? Yes, move to the next character in s and t
...
6) At s[2] = c; t[5] = c; does s[3] === t[5]? Yes, and since we went through the length of s we found s to be a subsequence of t

Code

While-loop variation

/**
 * @param {string} s
 * @param {string} t
 * @return {boolean}
 */
const isSubsequence = (s, t) => {
    if (s.length === 0) return true

    let sPointer = 0
    let tPointer = 0

    while (sPointer < s.length && tPointer < t.length) {
        if(s[sPointer] === t[tPointer]) sPointer++

        tPointer++
    }

    return sPointer === s.length

};

For-loop variation

const isSubsequence = (s, t) => {
    if (s.length === 0) return true

    let sPointer = 0

    for (let i = 0; i < t.length; i++) {
        if (s[sPointer] === t[i]) sPointer++
    }
    return sPointer === s.length
}

In both code solutions, we need to keep track of our position in each string so we use pointers to help with that.

Time & Space Complexity

Time: O(n) - where n is the length of the array
Space: O(1)
Both variations have the same time and space complexity

Let's solve LeetCode! Two Sum

Rembrandt Reyes (He/Him) — Tue, 28 Jul 2020 06:05:58 +0000

Two Sum: Easy

Problem

Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

Example

Given nums = [2, 7, 11, 15], target = 18,

Because nums[1] + nums[2] = 7 + 11 = 18,
return [1, 2].

Conceptual Overview

Before we get to the solution lets think about this conceptually. Looking at the array from our example we would need to find the pair of indices that add up to 18.

Possible Solution #1

One way of finding the indices would be to iterate through the array with two for-loops. Create a for-loop that will traverse the array and nest a second for-loop that will traverse the rest of the array at an index of +1 to the first loop.

Time & Space Complexity

O(n^2) Time & O(1) | Two for loops with a constant lookup

Possible Solution #2

A solution that is faster but will require more space will be making use of hash tables or more simply using an object.

When we use a hash table to store values we have access to constant lookup which makes this solution much quicker than the first. So as we iterate through the array we will be checking the hash table to see if it has the value we are looking for that adds up to target. Let's write some arithmetic

X1 + X2 = target
Where:
target = 18
X1 = current value in for-loop
Find X2
X2 = target - X1

So as we loop through the array we are storing values to the hash table and checking to see if X2 exists in the has table. If X2 exists then we return indices of [X1, X2]

Time & Space Complexity

O(n) Time & O(n) Space | One for-loop and storing data to a hash table iterating through the array once

Solutions

Solution #1 O(n^2) Time & O(1) Space

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 */
let twoSum = (nums, target) => {
    for (let i = 0; i < nums.length; i++) {
        for (let j = i + 1; j < nums.length; j++) {
            if (nums[i] + nums[j] === target) return [i, j]
        }
    }

    return []
}

Solution #2 O(n) Time & O(n) Space

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 */
let twoSum = (nums, target) => {
    const hash = {}

    for (let i = 0; i < nums.length; i++) {
        if (hash[target - nums[i]] !== undefined) {
            return [hash[target - nums[i]], i]
        }

        hash[nums[i]] = i
    }

    return []
}

And there you have it! A couple of solutions for Two Sum. I would love to see what solutions you all came up with. See you all in the discussions :D

eSlayers part 6 - fetching matches... finally

Rembrandt Reyes (He/Him) — Fri, 24 Jul 2020 05:25:51 +0000

Finally made it to fetching some sort of match history. There is definitely a lot of refactoring that needs to be done, but for now, I am pretty content with what I got.

Things I completed today

Modified server.ts to add an additional proxy route.
Added a Match.tsx component which returns game_date and participants.
Added a Participant.tsx component which will return a summoner's name from their puuid.
Modified Summoner.tsx to test newly fetched data.
Modify fetchLeague.ts URL to the updated proxy API.
Modify fetchSummoner.ts URL to the updated proxy API and add in a new function to fetch summoner based on use puuid.
Add a new fetch to get data of a single TFT match.
Add a new fetch to get an array of matches.

Pain points

There were a lot of issues at first because I was trying to do some data manipulation on stuff that was not fully fetched yet. I thought I was doing things right with useSWR conditional fetching, but I just fooled myself, sorta. Lot's of console.logs and chrome debugger to see what was happening and where my code was breaking. I landed on a solution that seems to work 100% of the time now. I think once I start breaking things down even further the pieces will start to come together and things will play nicer with each other.

For the future

At some point, I am going to want to save this data to some sort of state manager. Deciding between redux or React.Context. I am also wondering if this app will be possible with just useState. I don't have a clear picture yet since I can do everything with fetching. Once I get to a "finalized" state of data that I am going to display I will decide on a state manager.

eSlayers part 5 - data fetching strikes back

Rembrandt Reyes (He/Him) — Thu, 23 Jul 2020 04:41:59 +0000

So I went back to working on my application, and my website broke. I was trying to fetch my summoner name and it would throw an error when it tried fetching data for my rankings.

I did some digging and it turns out the data that was being returned from the first fetch was not finished so by the time it got to the second fetch it would error out. Since I am using useSWR I had to read the docs to see if there was anything that I could use that would allow me to fetch data dependent on the first fetch.

Conditional Fetching

useSWR allows you to fetch data dependent on whatever you want. In my case, I need to make my fetch dependent on the summoner name and summoner ID being passed into my fetches.

I refactored some of my code so now I can reuse fetching summoner and fetching league

fetchSummoner.ts

fetchLeague.ts

Summoner.tsx

Now that I figured that headache out I can move on to fetching match history.

How do you Open-Source with a full-time job? and work on side projects?

Rembrandt Reyes (He/Him) — Fri, 17 Jul 2020 04:46:01 +0000

I have been asked these questions a few times now.

Short Answer

"Spending a little time on each as much as possible."

But it goes a little deeper than that

Long Answer

I think right now I can maximize my time because I am remote and I do not have to spend 20, 40, or 60+ minutes commuting to work. That allows me to channel some of that time into open source and side projects. My current company is also based in Boston and I currently live in San Francisco so my 10 - 5 is actually 7 - 2.

My weekly schedule

Wake up around 6:30 AM
Check-in and stand up 7 AM
Do a bunch of work-related stuff.
Skip lunch to continue working or read some docs.
Clock out around 2 PM and recap with my team what I did for the day.
Check issues from a couple of OSS and see if there is something that I can work on or continue working on a ticket that I am assigned to (1 - 2 hours)
Work on my side project (1 - 2 hours)

I try to put a hard cap on work by 6 - 7 PM because I also have a family and I gotta eat 😅.

During the weekends I don't always get to OSS or side projects, but if I do have time on the weekends I do a similar 50/50 split so I can maximize my time on each. And if my time is limited I will probably study something related to coding instead. It's honestly hard for me to commit all this time to code. I am exhausted all the time, but I know the grid is worth it. Coding was something that was hard for me to enjoy until I started to understand it better. Now I push myself to code every day, I want to code every day. So 10 - 12 hour days dedicated to code. It's a lot, so do whatever you think is possible for you. Some think this is a sprint, some think this is a marathon. I would say it's a bit of both, so pace yourselves. We all get to the finish line eventually.

DEV Community: Rembrandt Reyes (He/Him)

Ahhhh CVEs!

Back to the topic

Who cares about this stuff?

Are all CVEs the same?

Should they all be fixed?

Let's get to fixing

What are my options?

Change of pace

Wait... how does React.useState work?

How does it work?

One useState

Two useState, ha-ha-ha

Reverse engineering the useState function

Moving on to figuring out what the hell setValue does.

Implement a janky way to manually re-render the browser

What interview questions have you been asked?

Let's solve LeetCode! Fibonacci Number

Problem 509 - Fibonacci Number

Conceptual Overview

Coding walkthrough

Recursion only

Time & Space Complexity

Memoized dynamic programming algorithm

Time & Space Complexity

Iterative approach

Time & Space Complexity

My top terminal commands

1) pwd

2) cd directory

3) ls

4) mkdir folder

5) clear

6) 🐈 aka cat file

7) touch file

8) rm file

Part 8 - Trying to get eSlayers to MVP

eSlayers part 7 - fetching more data for math history

Let's solve LeetCode - Is Subsequence

Problem 392 - Is Subsequence

Examples

Conceptual Overview

Code

Time & Space Complexity

Let's solve LeetCode! Two Sum

Two Sum: Easy

Problem

Example

Conceptual Overview

Possible Solution #1

Time & Space Complexity

Possible Solution #2

Time & Space Complexity

Solutions

Solution #1 O(n^2) Time & O(1) Space

Solution #2 O(n) Time & O(n) Space

eSlayers part 6 - fetching matches... finally

Things I completed today

Pain points

For the future

eSlayers part 5 - data fetching strikes back

Conditional Fetching

How do you Open-Source with a full-time job? and work on side projects?

Short Answer

Long Answer

My weekly schedule

One `useState`

Two `useState`, ha-ha-ha

Reverse engineering the `useState` function

Moving on to figuring out what the hell `setValue` does.

1) `pwd`

2) `cd` `directory`

3) `ls`

4) `mkdir` `folder`

5) `clear`

6) `🐈` aka `cat` file

7) `touch` `file`

8) `rm` `file`