DEV Community: Jeremy Marx

PERSONAL ACCESS TOKENS ON GIT/GITHUB: A TALE OF A LESSON, MISTAKE, AND FUTURE QUEST

Jeremy Marx — Fri, 20 Aug 2021 04:42:45 +0000

Using Git/GitHub has always been a huge hole in my technical knowledge. Sure, I can add files to the staging area and make a basic commit, but anything beyond that has been beyond my comprehension. I'd like to walk through a couple things I've learned recently, a big mistake I made, and highlight a concept that is still eluding me.

REPLACING GITHUB'S DEPRECATED PASSWORD AUTHENTICATION WITH PERSONAL ACCESS TOKEN AUTHENTICATION

A couple days ago, I sat down and did some work on a project. When I got done making my changes, I made my commit. When I went to push to my remote repository, I got a message in my command line that GitHub had removed password authentication and replaced it with the use of personal access tokens (read their statement about the change here). So, let's walk through how to set up a personal access token on GitHub, remove the original remote, and how to add a new one with your token.

Go to your GitHub account, click on your profile picture icon in the top right corner, scroll down and click on Settings.
On the left hand side of the screen, there is a menu bar. Scroll down near the bottom of the menu, and click on Developer Settings.
Once again, on the left side of the screen, there is a menu bar. Click on Personal access tokens, and then click on Generate new token.
When the menu to create a token comes up, set your expiration date, set you permissions, and generate your token.
Copy your token down and KEEP IT HANDY! As the prompt says, you will not be able to see this again (I deleted the one I made for this example, so don't go trying to use it to add emojis to my codebases!).

Now, go back to your terminal. First thing we need to do is remove the remote so we can add it back using the token. In the terminal, run git remote remove origin.

Now, run

git remote add origin https://<GITHUB_ACCESS_TOKEN>@github.com/<GITHUB_USERNAME>/<REPOSITORY_NAME>.git

and replace the <PLACEHOLDERS> with their respective value. Then you should be free to run git push origin main with no problems. And if you go back to the screen we saw in Step 3, you should see your new token paired with the repository, along with the expiration date and permissions.

MY EMBARRASSING MISTAKE

So after I figure out how to do this, I go to repeat the process in other repositories. Since I'm lazy, I scroll up to run the command with the access token I had just run. I see some warning message in my terminal that I don't understand, so I brilliantly decide to use the --force flag and override and push to that remote. After doing this a few times, I go to check something on my GitHub repo homepage, and I noticed I wasn't seeing any of the commits I had just made. After some backtracking, I realize what happened - when I scrolled up to the remote add command with my token, I forgot to replace the <REPOSITORY_NAME> placeholder with the current repository name that I actually wanted to push to. I go to the previous repository homepage on GitHub, and sure enough, there were all my commits. I had basically just overwritten the entire codebase.

After a literal facepalm and a litany of swearing, I came up with a solution: go back to my local repo, and redo the push I had done earlier with the force flag. I'm pretty sure this was not the proper way to do it, but it did fix the problem. My GitHub remote repository reflected my local repo.

So the lesson I learned is: be very careful when re-using commands to modify them properly!

NEXT GIT CONCEPT I NEED TO TACKLE

Later that day, I was going through some old projects, and needed to make a GitHub repo to push to for a local repo. When I made the repo, I initialized it with a README.md, since I know I need to get better at project readme's. Note: there is not a readme in my local repo. When I go to set the GitHub repo as a remote, I can't push to it because of the file that is in the remote but not the local repo.

I wound up using my newly signature --force flag trick and just making my README locally, but I know there is a more conventional way to do this. Clone the repo? Use git pull or git fetch?
Let me know in the comments what you think!

If you liked this article, please give me a virtual like, a follow, share online, and if you REALLY liked it, feel free to

Buy Me A Coffee!

Create a memoized function in JavaScript

Jeremy Marx — Fri, 07 May 2021 07:30:47 +0000

One of the first software development courses I ever took involved recreating the well known JavaScript library Underscore.js from scratch.
Implementing more basic ones like each or map were manageable for me, but when we reached the more advanced ones, I was unable to keep up. One of the functions that really gave me a lot of trouble was memoize. I figuratively banged my head up against the wall with this function for countless hours until one of my peers had to just show me how to do it. I was definitely overthinking it, and even after my peer explained how it worked, I didn't fully understand it.
After encountering the memoization concept while learning React and researching more algorithmic functions, I revisited the memoize function and feel like I understand the concept and implementation.

What is memoize and when should you use it?

According to the Underscore documentation, it

Memoizes a given function by caching the computed result. Useful for speeding up slow-running computations.

Memoize takes a function as an argument, which is the function we are going to memoize. Memoize returns a function, which takes in an unspecified amount of arguments. When the memoized function (the function originally passed into memoize) is called, memoize checks if the function has already been called with that particular set of arguments. If so, memoize will already have the result of that computation stored in its cache. So it will look it up and return the already computed result. If the memoized function has not yet been called with a particular set of arguments, then memoize will perform the computation, store the result in its cache, and return the result.
Why use it? Say you have a function that is really "expensive" that you will be using frequently in your program. Instead of calling it over and over, with memoize, you can save the result of a particular computation. So if the function is called with the same set of arguments more than once, you won't have to repeat the computation.

Caveats and Pre-requisites.

ES6 Syntax. I'm going to use all ES6 Syntax, so all functions will be arrow functions. This has implications about the execution context of the this keyword, in addition to the syntax. I'll also be using the rest parameter as opposed to the arguments object, which will allow us to use JavaScript's built in Array methods more efficiently.
Closures. My favorite definition of a closure is an inner function that has access to an outer function's scoped variables, even after the outer function has returned. This will be key in implementing our memoize function. For additional information, consult the MDN documentation.
Function Methods/Apply. Functions are first class objects in JavaScript. Just like Arrays, they have prototype methods. Apply is used to change the execution context of a function. This will be key for our implementation, since we will be dealing with functions as parameters, returned functions, and using functions in different scopes. For additional information, consult the MDN documentation.
Primitive vs. Complex Data Types. Our example function will only be optimized for primitive data, such as strings or numbers. Complex data is passed by reference and would require us to implement logic that would check for objects being "deeply equal" to each other. For a review on data types in JavaScript, consult the MDN documentation.

Our Memoized Function

Ordinarily, we'd use the memoization technique for far more complex functions, but for this example we are going to use a simple adding function that takes in an unspecified amount of numbers and adds them all together.

const add = (...args) => {
  return args.reduce((s, e) => {
    return s += e;
  }, 0);
}

This function uses the rest parameter to collect all the arguments into an array and then uses the Array method reduce to add them all together.

Implementing Memoize

First, memoize takes in the function we want to memoize as a parameter. Then, we need a cache to store our previously computed results. Since we need to look up values, we'll need something with key-value pairs. So we'll go with an object literal.

const memoize = func => {
  const cache = {};
}

Memoize returns a function that takes in an unspecified amount of arguments.

const memoize = func => {
  const cache = {};
  return (...args) => {
  }
}

We are going to want to look up if the memoized function has been called with a particular set of arguments or have a way to create a key with which we can store the computation in the cache. So let's turn the arguments into a string and store it in a function scoped variable.

const memoize = func => {
  const cache = {};
  return (...args) => {
     let strKey = args.join(',');
  }
}

We use the join method to turn all the numbers into a string we can use for lookup or storage, which is our next step.

const memoize = func => {
  const cache = {};
  return (...args) => {
     let strKey = args.join(',');
     if(!cache[strKey]){
        cache[strKey] = func.apply(this, args);
      } 
       return cache[strKey];
   }
  }
}

In our if statement, we check if the memoized function has not been called/isn't present in the cache. If that is the case, we store it in the cache using the Function prototype method apply to call the memoized function in its new scope. Remember, even though we will already be working within the global scope after the outer function is returned, we still have access to the cache because of closures.
After we perform the computation and store it, the inner function returns the result from the cache. If the the computation is already stored in the cache, the if block is skipped and the value returned.

Using Memoize

Let's put this all to use and memoize our add function from earlier.

const memoize = func => {
  const cache = {};
  return (...args) => {
  console.log(cache)
     let strKey = args.join(',');
      if(!cache[strKey]){
        console.log('adding to cache!');
        cache[strKey] = func.apply(this, args);
      } 
       console.log('fetching from cache!');
       return cache[strKey];
   }
}

const add = (...args) => {
  return args.reduce((s, e) => {
    return s += e;
  }, 0);
}

const memoizedAddFunction = memoize(add);

memoizedAddFunction(1, 2, 3);
memoizedAddFunction(1, 2, 3);
memoizedAddFunction(4, 2, 3);
memoizedAddFunction(4, 2, 3);
memoizedAddFunction(8, 2, 3);
memoizedAddFunction(1, 2, 3);
memoizedAddFunction(4, 2, 3);
memoizedAddFunction(8, 2, 3);

And there we have it!
I encourage you to run this function in the JavaScript environment of your choice and add some more calls of the memoizedAddFunction with some more/different numbers. I've included some console logs in various places in memoize, so you can see the computations being added or fetched from the cache.
I hope this helps clarify a concept that gave me a lot trouble a few months ago in bootcamp. If you liked the article, please give me a like, share, or comment. If you REALLY liked it, help me out by buying me a cup of coffee!