DEV Community: Devansh Shah

Telescope: Small Bug becomes a Feature? (3/3)

Devansh Shah — Sat, 12 Dec 2020 00:24:34 +0000

Intro

The last blog I wrote was about the small bug I was fixing. This blog is about how that small bug fix turned into a feature with testing implemented. The function I wrote to solve one problem can now solve the root problem anywhere that needs to have a proper host and port URL. The issue I fixed it with the small fix mentioned in the last blog.

What I added

But, Like we talked about in the last post this would not fix the root issue. So, Implement a parse function module.

// parsesUrl to make sure there is only a single port
const parseUrl = (url, port) => {
  try {
    const urlObj = new URL(url);
    urlObj.port = port;
    return urlObj.href;
  } catch (e) {
    return null;
  }
};

module.exports = parseUrl;

This one is also much more simple than the function in the last post.

const parseUrl = (url, port) => {
  let result;
  try {
    const urlObj = new URL(url);
    urlObj.port = port;
    if (urlObj.port !== '') {
      result = urlObj.href;
    }
  } catch (e) {
    result = null;
 }
return result;
}

So, I learned that the IF statement is useless because if there is a double port I can just replace it with its self. If, there is no valid port we get an error that is caught and we return a null value. So, the new function only return either a valid URL or null.

I also added testing for the following scenarios

URL with port and valid port
URL is invalid
port is undefined
port is null
port is a number
port is a string
port is an invalid string
port is a number outside the port range (e.g., 65535 + 1)

Testing Reflection

I also learned from code review that the tests I write should be more isolated instead of me using higher scope variables I should encapsulate each test with its own testing variables. But, it was okay with this one because I made sure all my testing variables were immutable.

With this contribution I also update all legacy URL library use to instead use the current URL class. I also made sure that all code that was using an environmental variable to create a host+port URL used my new utility function.

More info on everything added/changed can be found here.

Contribution Reflection

With this contribution I got a greater understanding of NodeJS's URL library, testing with jest and going through the process of code reviews. Even though the bug was a simple fix it allowed me to get to the bottom of the real issue now if the function is used properly this type of bug will not happen as we fixed the real issue. So, we now do not care how someone has there environment variables setup with a port or without a port this fixes that issue.

What's next?

For telescope, I am still assigned on a issue to route all our logs to Kibana. This issue is taking a while to do because it requires a lot more research. I have tried to use a couple of solutions like filebeat to route the logs but this will probably take me a while to understand. The other thing I need to also make it work in dev and prod which will require greater knowledge of docker which I am still lacking but this issue is something I want to figure out and will try my best to solve it.

I am also working on trying to contribute to larger repos I have a current ask on the electron repo.

Telescope: Fixing the "small bug" (2/3)

Devansh Shah — Fri, 11 Dec 2020 23:46:21 +0000

Intro

In the last blog I talked about fixing a small bug in telescope. Well while I was trying to follow the plan. Someone on slack said that previous commit caused this issue and there is also a comment on the issue. Well the fix is simple I can just revert the change which was to edit a docker file.

Issue -> ELASTIC_URL=http://elasticsearch:${ELASTIC_PORT}
Solution -> ELASTIC_URL=http://elasticsearch

Code Review

This was a simple solution but this would not fix the root of the issue in the future if someone changes the environment variable we would have the same problem. So, I created a function in the Elastic.js file to parse the URL.

The First version was the following.

const parseUrl = (url, port) => {
  let result;
  try {
    const urlObj = new URL(url);
    urlObj.port = port;
    if (urlObj.port !== '') {
      result = urlObj.href;
    }
  } catch (e) {
    result = null;
 }
return result;
}
const elasticUrl = parseUrl(ELASTIC_URL, ELASTIC_PORT) || 'http://localhost:9200';

This version changes the port and if it is not an empty port we send the href back or else we can have undefined or null. This version has a couple problems we are returning 2 false values null and undefined and we do not need to have an if statement. I also found out that telescope had many instances of using the legacy NodeJS URL library. So, This function can now globally for all URL with ports coming in from the environment for example redis.js. So, the next step was to make this function global and also update the utilization of NodeJS URL Library throughout the project. I also want to add a bunch of tests for this function.

The difference between the legacy URL library and the current URL library is that the legacy version does not use a class, It instead used an object and functions to parse. So if I wanted to destructure it or parse it I would need to use the parse function like this

// legacy
  const { port, host } = url.parse('http://localhost:3000', true);
// current
  const { port, host } = new URL(''http://localhost:3000'');

The New Plan

To finish this feature I now need to add

Make the function global
Add Testing
Update all instances of legacy URL library use

Telescope: The Plan Is to fix a small bug (1/3)

Devansh Shah — Fri, 11 Dec 2020 23:00:56 +0000

Intro

I saw a message on the Telescope Slack that there was a bug with the URL parser for elastic search where the URL would have the port twice for example if the URL was http://elasticsearch:9200 the parser would add the port without checking if it had one. So, there would be an error because the URL was this http://elasticsearch:9200:9200. Which was causing an error for obvious reasons. My solution was to check if the URL has a port and it would not add a port but if it did not it would. I was going to implement it with the URL in NodeJS. The URL class in NodeJS allows us to check for port and host very easily and I though it would be the perfect solution.

NodeJS URL

The NodeJS URL Library has the URL class, to use it you can do the following

const link = new URL('http://localhost:3000');

console.log(link); 

/*
URL {
  href: 'http://localhost:3000/',
  origin: 'http://localhost:3000',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:3000',
  hostname: 'localhost',
  port: '3000',
  pathname: '/',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}
*/

This will create a class with a bunch of properties
which you can then call or add to.

The coolest part is, it will automatically decline invalid properties. For example lets say we have Class above and we wanted to change the port

const link = new URL('http://localhost:3000');
// valid port
link.port = 8000;
console.log(link.href); // http://localhost:8000/

// resetting port
link.port = "";

// invalid port
link.port = "invalid"

console.log(link.href); // http://localhost/

As, you can see the port is automatically declined and just does not accept it as an input.

The Plan

The plan is to use this class to fix the small bug. The Issue is here https://github.com/Seneca-CDOT/telescope/issues/1442 and I had the following plan use the URL class to fix this at the root of the problem and it would not matter what our environment host and ports are.

Telescope: a high severity vulnerability

Devansh Shah — Fri, 11 Dec 2020 22:11:22 +0000

So, I was trying to run telescope locally and I ran it and it had a high severity vulnerability in one of the npm packages. The Package that was of issue was passport-saml. The issue was having an outdated version and it needed an update I ran the npm fix command and it was fixed. This could have been very bad as I did not know if this would break telescope local login. I ran the tests and It worked.

I still did not know that I needed to test the local login system and had no clue as to how to. I submitted a pull request. I received a great review letting me know to test this the local login in order to test whether or not this update broke anything. I read the docs and found how to login locally using passport-saml. run docker build and get the SAML2 server up and running. Then, I needed to start backend and frontend. Then login with the fake user data to test passport-saml and I was able to login confirming that the update did not break anything.

Overall, I learned I probably should not update packages I don't know about, before knowing how it is being used and what is causing the issue. This experience did let me gain a greater insight in the telescope workflows and overall was not to diffcult.

Game of Life - Small Contribution

Devansh Shah — Fri, 11 Dec 2020 21:54:44 +0000

This Blog is about a contribution I did to get back in to a flow state. The repo I contributed to was a web version of Conway's Game of Life. Conway's Game of life is s zero-player cellular automaton game where evolution is determined by its initial state. The issues I contributed to was the addition of a Oscillator know as Muttering moat the specific one I added was a P29 traffic-farm hassler.

In terms of code, all I had to add was the initial stage of the Oscillator which is represented by an array of 0's and 1's.

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
    [0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0],
    [0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0],
    [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
    [0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0],
    [0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0],
    [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  ]

The above is the exact code I added. When I looked at the initial image
I noticed that there was a pattern where if divide the Image into 4 there is a pattern where I would only need to write 1/4 of the array and than I can create a script to add the other parts. Well, I sort of did that I typed the 1/4 up and the I used a simple JavaScript script to add the vertical image reflection of my 1/4th which was just going to each row of the array taking the elements as a string and then reversing it and appending it to the array. It would have been smart to then do that for the horizontal image reflection but I ended up just doing it manually using copy and paste. Even, Though I had a large array of 0's and 1's I could not visualize it so, I created this.


let rev = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
    [0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0],
    [0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0],
    [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
    [0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0],
    [0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0],
    [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
let print = "";
for (let i = 0; i < rev.length; i++) {
    for (let j = 0; j < rev[i].length; j++) {
        if (rev[i][j] === 0) {
            print = print + '⬜';
        }
        if (rev[i][j] === 1) {

            print = print + '⬛';
        }
    }
    print = print + '\n';
}

console.log(print);

node array
⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬜⬛⬜⬛⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬛⬜⬛⬜⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬛⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬛⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬜⬛⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬛⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬛⬛⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬛⬛⬜⬜⬜⬜
⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜
⬜⬛⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬛⬜
⬜⬛⬜⬛⬜⬛⬛⬛⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬛⬛⬛⬜⬛⬜⬛⬜
⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜
⬜⬛⬜⬛⬜⬛⬛⬛⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬛⬛⬛⬜⬛⬜⬛⬜
⬜⬛⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬛⬜
⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜
⬜⬜⬜⬜⬛⬛⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬛⬛⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬜⬛⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬛⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬛⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬛⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬜⬛⬜⬛⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬛⬜⬛⬜⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬛⬜⬜⬜⬜⬜
⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜

After, all that I finally had a working Oscillator and you can see it at work here https://troytae-game-of-life.netlify.app/p29-traffic-farm-hassler. I found that this was a great way to get into the flow and making a tedious task a bit more enjoyable.

FireLinker + Semantic Release

Devansh Shah — Mon, 07 Dec 2020 05:30:10 +0000

This week, I added auto semantic release to firelinker. This blog will go through how I did this. The way I did this was using the instructions on this repo https://github.com/zeke/semantic-release-with-github-actions allowed me to add it successfully. The process was very simple after I found this repo.

At first the most difficult part was connecting to npm registry but after I got my account and token and figured out about GitHub secrets I added an NPM_token to secrets. I also realized that GitHub already has a secret github_token saved automatically once created. The process on the repo is very simple but it requires to do squash merge commits.

The repo has the following steps

- [ ] Only allow squash merging of pull requests
- [ ] Install https://github.com/apps/semantic-pull-requests
- [ ] Create npm token using `npm token create` or https://www.npmjs.com/settings
- [ ] Add token to repo secrets as `NPM_TOKEN`
- [ ] Add release workflow file to `.github/workflows/release.yml`
- [ ] Set `version` to `0.0.0-development` in package.json
- [ ] `npm i -D semantic-release`
- [ ] Use semantic commit messages
- [ ] Create a pull request

The steps are very easy to follow with a great result. After, I added semantic release I had a couple friends test it and it worked just like before because I was first just installing it from the repo but now I'm doing it from the npm registry https://www.npmjs.com/package/firelinker/v/1.0.0

Overall, this process was very awesome with a few extra steps I have automated my release from this day. The way it works is it releases on each push to master and automatically decides the versioning useing commit messeages.

Firelinker + Testing

Devansh Shah — Sat, 28 Nov 2020 02:33:04 +0000

Intro

This week, I added testing to fireLinker. I always had my github action use npm test but I did not have any tests on fireLinker previously. This blog will talk about my experience with adding jest and mock testing. I also modularized my code to make a better experience when testing and adding new features.

Modularize

I knew I wanted to work with jest because I have been doing a lot of testing with jest on telescope and find it easy to use and it gets the job done. The thing I realized when testing telescope was that the code was modularized. So, the first thing I did was make 2 file classes and utils. Classes would include any global data structure and utils would include each function in it own file. This made adding jest simple as all I added was a tests folder and added jest to my dev dependences.

Mock Testing

A big part of Firelinker is the linkchecker and to test it appropriately I need to do mock testing. The reason for this is that a website can change its status at any point so there is no guarantee that the status of a website will always be the same so. We create a mock environment where before each call of the function in the test file we give fetch a mock return value. The way my function works is it uses node-fetch to retrieve the head and only check the status code. So, my mock return value is just an object with a status property with the the expected status code.

Problem

One thing that happened was I kept getting an error when I made a test function in my test files. but when I would save and run npm test it would work. The problem was with not including jest as a global in eslint.

Reflection

Overall, adding tests to FireLinker has been a positive experience and there are many more tests I could add to test each and every aspect of the code for Example each file in the modularized files get a test file. One thing I really want to add tests for is the Link class.

Devansh Shah

Telescope: adding and testing validation middle-ware

Devansh Shah — Thu, 19 Nov 2020 04:52:07 +0000

Intro

Last week, I worked on an issue to add a validation middle-ware to query param in the posts route using express-validator. When, I saw the issue I thought that I can definitely do the issue and I did complete the issue fairly quick. This blog, Is not about implementation a solution to the issue but the many things that go on after submitting a pr and getting it accepted.

Refactoring

After I submitted a pr with a excellent solution encompassing both the rules the Middleware checks for in the route and an appropriate Middleware that reports the error into one function Middleware. Although, the solution was sufficient there was a lack of evidence such as tests to test the middleware were not implemented. So, I had to implement more tests that would test the /posts middleware I had implemented. while, this was ongoing there were sevral issues on the project that dealt with adding validation middle ware for different routes and all of them lived in the validation.js file. After, I implemented my tests and I commited my changes. The project had already merged one of the other middlewares and the concept I used to implement my middleware was also used on the other merge. The problem now was I got a request to refactor the code to create a common validation.js function for all of the validation middleware

const validate = (rules) => {
  return async (req, res, next) => {
    await Promise.all(rules.map((rule) => rule.run(req)));

    const result = validationResult(req);
    if (result.isEmpty()) {
      return next();
    }

    const errors = result.array();
    return res.status(400).send(errors);
  };
};

Git Issues

After the refraction my problems began and the problems were not with the implementation itself but with the version-control system known as git. The problem that occurred was each time I rebased my commits into one commit and try to push the changes I would have to merge and there would be conflicts. This created a loop of me fixing the conflicts and the rebasing to one commit and then another iteration of the loop would begin. So, the problem that was happening here is that my pr was on the master branch of my fork and the way this works is that it will always want to merge before rebasing and with some help. I got the solution here are the steps if you are in a rebase loop I was in.

1. Create a branch for the issue and then use the cherrypick command in git to pick the commit that you want to push.

git checkout -b issue-name origin/master && git cherry-pick <commit-id>

2.Then we reset the master branch and update it with upstream

git checkout -B master upstream/master
git pull upstream master

3. rebase
git checkout issue-1313 && git rebase master

4. Also push by force if need be
git push --force

5. Create a new pr with the new branch

Following these simple steps will solve all problems/s

Lessons Learned

This issue taught me many things such as always create a branch for the issue to avoid conflicts like above. Even if the code is perfect if the appropriate testing is not done its not perfect and needs evidence. While completing this pr and after I had the opportunity to start reviewing others code and this really gives you new perspective, on what changes to make before committing a pr, such as following proper naming conventions.

Adding a Static Analysis Tool as a Open Source Contribution

Devansh Shah — Thu, 19 Nov 2020 04:07:39 +0000

Intro

This week, I took the knowledge from adding prettier in Fire Linker and found an issue to add prettier to a larger repo. The repo I found was an addon for ember.js .The addon makes it easier to add Content Security Policy (CSP) to a ember project. In this blog I will talk about my experience working with a bigger repo and the process.

Process over Implementation

So, last week I showed my intention to work on this issue. Though this is smaller addition to big project but the change affects almost all the files in the repository. So, there can be many merge conflicts if I made the change and the contributors for the project where working on a bigger pr. That is what exactly happened for this issue, one of the contributors let me know he was working on a rather big change and asked if I was okay with waiting till he merges his current pr. I told him I would wait before I add prettier to the repo. A couple days pass by and the contributor mentions me and say the pr is taking much longer than expected and that I should move ahead and implement the new addition. The biggest thing I learned from this experience is how important the process and communication is when contributing to the open source. What if I had just sent a pr right as I saw the issue or had done it before I was assigned to the issue. This small addition may have caused larger problems for the project.

Implementation

Implementing prettier at first I thought was simple, got slightly more complicated when I found out prettier does not support handlebars. Though the project is mostly javascript there are some test implementation that have a handlebars application. Though I wasn't sure, if I needed to implement prettier for handlebars. When, I saw the error I got a bit worried and then did research to find that handlebars is not supported by prettier and to use prettier on handlebars I need to use a different parser known as glimmer. As, I was unsure to implement and use a different parser for prettier. I created a simple prettier script for non handlebars files and mentioned in my pr that if they wanted me to implement and thing or change it. I would do so.

Implementation Reflection

Lastly, I just want to say that this small addition changed 500+ lines of code. I found it really interesting how something so small has such a big change in a project. This also reaffirmed my understanding that we should chose a code formatter at the beginning of the project to avoid a lot of conflicts in the future.

Static Analysis Tools + FireLinker

Devansh Shah — Mon, 16 Nov 2020 04:52:57 +0000

The Intro

This week, I added some Static Analysis Tools to my Firelinker. The Tool added was a Code Formatter known as prettier , a Linter known as eslint and IDE support from vscode. I also added a pre hook that formats my code before an commit using Husky. This blog will descibe the process of acquiring the tools and using them.

The Code Formatter

Prettier is a very popular code formatter for web technologies (HTML,CSS,JS,GRAPHQ,etc.) and it has very good documentation on how to add it as a dependency for your project
https://prettier.io/docs/en/install.html
Prettier is very easy to implment and has great default setting. Overall, I found the process to add Prettier very easy and very much rewarding. I added a script in my package.json to run prettier on my whole project and it one of the best tools ever.

The Linter

eslint is a linter for javascript code and it is very customizable with the settings. The linter helps keep my code clean and risk free. It as many standard you can choose from. I choose the following

. I also added 2 scripts 1 to find linting errors and the other to attempt to fix said linting errors.I have to say when i ran that script I had many linting errors and inconsistency in my code. The linter helped me find and fix them. This tool is very helpful and I will use it for all my future node projects.

The IDE

The ide support I added was for vscode and the things I added was the default linter and formatter for the ide and small things like tab spacing , format on save and end of line. The support also recommend the needed extension on IDE start up with my project. This tool was an interesting addition some of the feature like format on save are great.

The Pre-Commit Hook

I added a pre-commit hook which calls a prettier script that formats my whole repo.

"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }

This is a simple but a great addition to the project this doesn't depend on any IDE or anything like that it does it automatically on commit. This is very needed for any project with multiple developers so its perfect for an open-source project.

The Reflection

Overall, the tool are a great addition to the project and automate a lot of the processes making the code the focus of everyones work. The pre-commit hooks really amazed me and I want to find more stuff I can automate pre-commit maybe I can lint and stop commits if they aren't linted properly but that for the next time or I might add an issue to see if anybody is up to adding it.

FireLinker + TeleScope

Devansh Shah — Sat, 07 Nov 2020 23:33:33 +0000

What is this Blog About?

This week, I used my Open Source project FireLinker to interact with Telescope.Last week, I wrote a blog about my first contribution to telescope in that blog I already had setup telescope on my local machine and I also talked about working with it more in the future. So, here we are I am using my FireLinker to check links in the posts API for telescope.

previous blog about telescope with setup: https://dev.to/zg3d/telescope-my-first-contribution-19en

API How does it work?

The way the posts API works is every time you go to /posts on the backend server you get a JSON of the 10 latest post with a relative URL and post id.

How did I connect FireLinker and Telescope?

I made a new command for my FireLinker So it can interact with APIs. I tried to generalize it but my goal was to connect with the telescope API. So, I did make some assumptions like I knew it was a relative path, so I found the base URL and added it. I also made an assumption that there was a attribute for URL in the API. But with those assumptions I got it working on my local machine. FireLinker basically uses the given API URL and fetch it with a get request and from there the code parses the JSON and checks on the URL links.

What are my Thoughts?

This was a very quick and dirty way of doing things. I still need to add check to see id the API URL is valid and proper error code messaging. This was a simple thing to do as I am comfortable with working with API like rest. And this was a basic API.

Update

So, I also made it so that FireLinker check all links in the 10 recent posts. Which made my code more modular and now I am happy with the state of my code.

The Month of October 2020

Devansh Shah — Mon, 02 Nov 2020 03:31:53 +0000

The Intro

This, month I have a had ups and downs with the first being me successful completing 4 pull requests for Hacktoberfest. But I am not exactly proud of all my contribution 2 of them were for school purposes and the other 2 that I did were fairly minor in that I wrote very minimal code. This blog will be me going over The other 2 pull requests that were minor and why it was difficult to work on larger pull requests.

The Contributions

I did two prs that actually matters the 1st one was the one I wrote a blog about in the first week of October https://dev.to/zg3d/first-week-of-hacktoberfest-596e. This was a great pr to get started on and I enjoyed with working with something I was comfortable with. The last pull request was my first pull request on telescope https://dev.to/zg3d/telescope-my-first-contribution-19en. This was a good intro to the telescope project but the problem was I did this pull request in the last week of October. Those were my contributions that mattered.

The Problem

So, The biggest problem I made was me giving my self enough time to finish more pull requests and the other problem was me being to sacred to get involved in bigger issue like I learned from telescope just setting up the dev environment helps with getting involved in a project. I should have just picked a project I like earlier and set it up on my local machine. I did not, instead I spent hours and days scrolling through GitHub finding the perfect issue I could contribute to. But, I would just never find anything that felt comfortable so I would just look more and that ended with the month ending and me not finding anything that felt like a great contribution and was not a few lines of code.

The Plan

November is a new month and I plan to contribute more to telescope but I also want to finish the 2 pull requests I did not this month and contribute to something more than a few lines of code. This will require better time management and more just going for it and setting up the dev environment for a project that seems interesting. The time cost of getting the dev environment is a better investment then scrolling through issues on GitHub. It a much more hands on experience and I am learning something wile setting up dev environments instead of scrolling through GitHub.