Forem: webit

TIP: Dealing with multiple SSH key repositories

webit — Tue, 16 Apr 2024 09:08:44 +0000

I have different Git repositories cloned with different SSH keys. Say, one is work code and one is personal / side project.
When I finish work on one repository and start to work on the another and want to fetch the latest changes, I have to switch SSH keys.

That is sometimes annoying as I have to execute following command every time I switch from one repo to another:

ssh-add -D # delete cached key
ssh-add ~/.ssh/my-key # add key I need to use to the ssh-agent

There are some solutions for this, like Configuring SSH
But I found it not so nice solution, although maybe they are fully automated. You have to configure hosts, clone repository with different host, etc. I prefer something else.

Shell aliases for the rescue

I created shell script aliases that will do commands listed above:

alias sshWork="ssh-add -D; ssh-add ~/.ssh/my-work-key"
alias sshPersonal="ssh-add -D; ssh-add ~/.ssh/my-personal-key"

Now, all I need to is to execute either sshWork or sshPersonal command and it will delete previously cached key + add new identity to the authentication agent.

It's that simple.

Coding task: implement mechanism that increments counter once 2 seconds

webit — Fri, 15 Dec 2023 14:15:10 +0000

During the last technical interview, I received a coding task. The task description says:

click event from button element should change count value not more often than 2 seconds

Seems simple. The initial code looked like this:

The first notable issue: clicking the button reloads the whole page; that's bad behavior, but we will fix it later - no worries.

First iteration

Looking at a Counter's code, I thought about creating some kind of lock. We will set a lock on click and release it after 2 seconds. Clicking the button when the lock is set - won't increment the counter value.

I used useState for storing the lock flag and useEffect with the cleanup function to release it when the component was removed from the DOM.
Additionally, since we click the button I added Event.preventDefault() to prevent page reload on button click.

My code looked like this:

That code worked perfectly fine... but was far from perfect.

Second iteration

Then, I realized I had made heavy over-engineering here.
Instead of using the useState hook, I could use useRef to store timeoutID (value returned by setTimeout). By using this solution, I knew that when the value stored in useRef hook is truthy (not null/undefined) I could not increment the value. In that case, I also added useEffect with cleanup (to remove running setTimeout callback). Finally, I've added type="button" attribute to the button - I was told I can do this to prevent page reloads. That attribute makes the button "has no default behavior, and does nothing when pressed by default". Now the code looked much cleaner and was still working correctly:

In both cases, you can click the button to implement counter value once per 2 seconds. Clicking multiple times won't increment the value many times and only once when 2 seconds pass since the last increment.

Lessons learned:

iterate solutions (you can find better ones after a while)
button[type="button"] functionality (I missed it, and it's so easy to use)

I'm wondering how would you resolve this coding task. What would you improve / change / do better? Let me know, I'm super curious :)

You can find (initial) code task in codesandbox

Fixing vulnerabilities found in a dependency tree

webit — Fri, 04 Feb 2022 09:24:45 +0000

I'm working on the app that is not yet publicly available and during the preparation for the launch, we made a full code scan to find any vulnerabilities.
We discovered that some of the dependencies used in our codebase depend on old and potentially harmful packages.

It was like we need packageA but that library depends on the vulnerable library packageB.

We needed to take proper action as soon as possible.

Yarn solution

What I've found was the fact that it's relatively easy to force some deeply nested dependencies in the yarn package manager:

Yarn supports selective version resolutions, which lets you define custom package versions or ranges inside your dependencies through the resolutions field in your package.json file.

How to use it?

We need to add resolutions to our package.json instructing Yarn how to handle dependencies:

{
  "name": "project",
  "version": "1.0.0",
  "dependencies": {
    "left-pad": "1.0.0",
    "c": "file:../c-1",
    "d2": "file:../d2-1"
  },
  "resolutions": {
    "d2/left-pad": "1.1.1",
    "c/**/left-pad": "^1.1.2"
  }
}

That will install version 1.0.0 of left-pad alongside locally stored c and d2. But it will install version 1.1.1 of left-pad for d2 and version ^1.1.2 for any dependencies requiring left-pad somewhere under c.

NPM implementation

If you use npm instead of yarn, you can achieve a similar effect using the overrides setting in package.json. There are some differences though.

We can't use glob matching (double asterisk - **) instead, we have to nest dependencies:

{
  "overrides": {
    "foo": {
      ".": "1.0.0",
      "bar": "1.0.0"
    }
  }
}

In that example, we're overriding foo package to be at version 1.0.0 and making bar at any depth beyond foo also 1.0.0.

Final words

With those, maybe, lesser-known options, we can force a newer (or simply other) version of any deeply nested package. This is a way for fixing issues when one of our dependency packages relies on e.g. not maintaining any more packages containing e.g. vulnerabilities.

Composing functions in JavaScript

webit — Tue, 16 Mar 2021 12:12:43 +0000

Recently I read an article about using Pipeline style in JavaScript.
An article described how to pipe functions together so data flows through all of them.
What I've missed in this article was functional programming taste.
Let's go a step further and add some FP flavor.

Using pipelines in *nix shell

Imagine *nix command line where we want to find all index.js files in a certain directory. When we will get a list of files we would like to count them.
Let's say we got source code placed inside src/.
It's a trivial example but explains how we can use pipe commands (using |) in *nix shell to pass data through them.

To achieve what we want we have to execute the following command:

tree src/ | grep index.js | wc -l

Where:

tree recursively lists directories (in the example I limit it to src/ directory)
grep is used to filter results (single line) with provided pattern - we want only lines that contain index.js
wc (word count) returns newline count, word count, and byte count. Used with -l returns only the first value so the number of times our index.js was found

Example output from the above command can be any number, in my case, it's 26.

What we see here is how data is passed from one command to another. The first command works on input data and returns data to the second one. And so on until we reach the end - then data returned by the last command is displayed.

Using pipelines in JavaScript

We can achieve a similar thing in JavaScript.
First, let's build a function that serves for certain purpose mimicking shell commands.

// node's execSync allows us to execute shell command
const { execSync } = require("child_process"); 

// readFiles = String => Buffer
const readFiles = (path = "") => execSync(`tree ${path}`);
// bufferToString = Buffer => String
const bufferToString = buffer => buffer.toString();
// makeFilesList = String => Array
const makeFilesList = files => files.split("\n");
// isIndex = String => Boolean
const isIndexFile = file => file.indexOf("index.js") > 0;
// findIndexFiles = Array => Array
const findIndexFiles = files => files.filter(isIndexFile);
// countIndexFiles = Array => Number
const countIndexFiles = files => files.length;

Let's see what we got so far:

readFiles() function executes tree command for provided path or in location where our JS file was executed. Function returns Buffer
bufferToString() function converts Buffer data to String
makeFilesList() function converts received string to array making each line of text separate array element
isIndexFile() function check if provided text contains index.js
findIndexFiles() function filters array and returns new array with only entries containing index.js (internally uses isIndexFile() function)
countIndexFiles() function simply counts elements in provided array

Now we got all the pieces to do our JavaScript implementation. But how to do that?
We will use function composition and the key here is using unary functions.

Function composition

Unary functions are functions that receive exactly one parameter.

Since they accept one argument we can connect them creating a new function. This technique is called function composition. Then data returned by one function is used as an input for another one.

We can use compose function that you can find in the popular functional programming library Ramda.
Let's see how to do that...

// returns function that accepts path parameter passed to readFiles()
const countIndexFiles = R.compose(
  countIndexFiles,
  findIndexFiles,
  makeFilesList,
  bufferToString,
  readFiles);

const countIndexes = countIndexFiles("src/");

console.log(`Number of index.js files found: ${countIndexes}`);

Note: we can actually compose functions without even using compose function (but I think this is less readable):

const countIndexes = countIndexFiles(findIndexFiles(makeFilesList(bufferToString(readFiles("src/")))));

console.log(`Number of index.js files found: ${countIndexes}`);

As you can see function composition allows us to join functions and don't worry about handling data between them. Here's what we have to do without using composition:

const filesBuf = readFiles("src/");
const filesStr = bufferToString(filesBuf);
const filesList = makeFilesList(filesStr);
const indexFiles = findIndexFiles(filesList);
const countIndexes = countIndexFiles(indexFiles);

Compose vs pipe

As you might have noticed when using compose we need to pass functions in the opposite order they are used (bottom-to-top).
It's easier to read them in top-to-bottom order. That's the place where pipe comes in. It does the same compose does but accepts functions in reverse order.

// even though not takes functions list in reverse order 
// it still accepts path parameter passed to readFiles()
const countIndexFiles = R.pipe(
  readFiles,
  bufferToString,
  makeFilesList,
  findIndexFiles,
  countIndexFiles);

const countIndexes = countIndexFiles("src/");

console.log(`Number of index.js files found: ${countIndexes}`); // same result as before

It depends just on us which one method we will use - compose or pipe.
Try to use one you (and your colleagues) feel better with.

Bonus: use full power Ramda gives you

We can use other Ramda methods to even more shorten our code. This is because all Ramda functions are curried by default and come with the "data last" style.
This means we can configure them before providing data. For example R.split creates new function that splits text by provided separator. But it waits for a text to be passed:

const ipAddress = "127.0.0.1";
const ipAddressParts = R.split("."); // -> function accepting string

console.log(ipAddressParts(ipAddress)); // -> [ '127', '0', '0', '1' ]

Enough theory 👨‍🎓
Let's see how our code could look like in final (more FP style) form:

const { execSync } = require("child_process");
const R = require("ramda");

// readFiles = String => Buffer
const readFiles = (path = "") => execSync(`tree ${path}`);
// bufferToString = Buffer => String
const bufferToString = buffer => buffer.toString();
// isIndex = String => Boolean
const isIndexFile = file => file.indexOf("index.js") > 0;

const countIndexFiles = R.pipe(
  readFiles,
  bufferToString,
  R.split("\n"),
  R.filter(isIndexFile),
  R.length);

const countIndexes = countIndexFiles("src/");

console.log(`Number of index.js files found: ${countIndexes}`);

HackerRank Big Sorting challenge

webit — Mon, 15 Mar 2021 08:35:26 +0000

I love to take HackerRank challenges. Those are great to practice programming and improving your overall skills.
I do them quite often - just like today, on Monday, before actually starting my daily work...

It was easy challenge called Big Sorting.
Difficulty: Easy
Max Score: 20

You have to implement the function that receives array of strings where each element in an array can have length between 1 and 10⁶.

Consider an array of numeric strings where each string is a positive number with anywhere from 1 to 10⁶ digits. Sort the array's elements in non-decreasing, or ascending order of their integer values and return the sorted array.

I immediately though I have to use JS' BigInt to sort those arrays because standard number (Integer type) will "corrupt" values.
This is because:

In JavaScript, the Number type cannot safely represent integer values larger than 2⁵³

-- Smashing magazine

Alright, my first idea was to go with:

function bigSorting(unsorted) {
    return unsorted
        .sort((a, b) => BigInt(a) - BigInt(b));
}

Well it was working. Kind of. Just for example cases.
It didn't pass all the Test cases of submission because it hit Time limit exceeded.

I've realized BigInt has to be slow. This is because it uses lot more memory to store values and that's why it's slower than e.g. Number or String while comparing.

So I sit back and had to make new solution for this problem.
Almost immediately I realized that when we sort string values that have different number of digits we don't have to convert those values to BigInt - it's enough to compare them by string length.

My final solution was:

function bigSorting(unsorted) {
    return unsorted
        .sort((a, b) => {
            if (a.length === b.length) {
                return BigInt(a) - BigInt(b);
            }
            return a.length - b.length;
        });
}

And it worked like a harm 🎉

Of course it can be further improved by checking if string length is longer than Number actually can accept and only then convert string to BigInt otherwise convert to Number.

That's right that was easy challenge but even though required some thinking 🤔.

Great to start new week 👨‍💻

Reimplementing JavaScript Array methods

webit — Thu, 07 May 2020 06:54:05 +0000

This is cross-post from medium, where I published it first.

Some time ago I’ve found list of JavaScript tasks. Those cover all developer career levels — Newbie/Junior/Mid and are fun way to practice programming.
NOTE those tasks are written in Polish language but I’m gonna translate task requirements to English :)

I’ve decided to give it a try and reimplement some of commonly used JavaScript Array methods.

The task

Task #6 —Array methods
since JS is functional language it’s worth mastering its basic methods

.map
.filter
.reduce
.reduceRight
.every
.some
.entries

Create functions that will work same way as original Array methods. Functions has to use for or while loops

We also got function signatures:

function mapFn(array, callback){}
function filterFn(array, callback){}
function reduceFn(array, callback, initial){}
function reduceRightFn(array, callback, initial){}
function everyFn(array, callback){}
function someFn(array, callback){}
function entriesFn(array){}

Easy, right?
Let’s check…

Array.map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
— MDN

That was easy to build. All we need is to execute callback function on each array element and return value into new array. When finished iterating over elements — return new array. Pretty easy…

function mapFn(array, callback) {
  const out = [];
  for (let i of array) {
    out.push(callback(i));
  }
  return out;
}

Array.filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.
— MDN

Again, nothing fancy here. We need to create new array and push there elements only if callback’s test is passed:

function filterFn(array, callback) {
  const out = [];
  for (let i of array) {
    callback(i) && out.push(i);
  }
  return out;
}

Array.reduce()

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
— MDN

Reduce, required a bit more work. Callback accepts up to 4 parameters, and function itself can have (optional) initial value. If initial value is omitted we need to take 1st array element instead of.

Callback functions accepts 4 parameters:

accumulator (accumulates callback’s return value)
currentValue (current array element value)
index (current array index)
array (complete entry array)

Additionally in case reducer has no initial value we need to take 1st array item as it!

function reduceFn(array, callback, initial) {
  let out = initial;
  for (let i in array) {
    // in case initial value is missing we take 1st element of an array
    if (out === undefined) {
      out = array[i];
      continue;
    }
    out = callback(out, array[i], i, array);
  }
  return out;
}

Array.reduceRight()

The reduceRight() method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.
— MDN

It is similar function to previous one but it starts executing callback function from the right (from the end). Iterates from highest array index to lowest one.

Similar to Array.reduce() initial value can be omitted — in such a case we need to take last array element as it.

Again, initial value might be omitted so we need to take array item as it. In case reduceRight() it's a last item of array!

function reduceRightFn(array, callback, initial) {
  let index = array.length;
  let out = initial;
  while (--index > -1) {
    // in case initial value is missing we take last element of an array
    if (out === undefined) {
      out = array[index];
      continue;
    }
    out = callback(out, array[index], index, array);
  }
  return out;
}

Array.every()

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
— MDN

According to the description we need to build function that checks if every element in array passes callback test. That means if at least one check won’t pass — we need return false. That’s all!

function everyFn(array, callback) {
  for (let i of array) {
    if (!callback(i)) {
      return false;
    }
  }
  return true;
}

That simple solution also covers special case:

Caution: Calling this method on an empty array will return true for any condition!

Array.some()

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.
— MDN

As you can see Array.some() is similar to Array.every() the difference is subtle — we got true response as soon as at least one element passes callback test.

function someFn(array, callback) {
  for (let i of array) {
    if (callback(i)) {
      return true;
    }
  }
  return false;
}

Again, special case is covered:

Caution: Calling this method on an empty array returns false for any condition!

Array.entries()

The entries() method returns a new Array Iterator object that contains the key/value pairs for each index in the array.
— MDN

That was most challenging for me. Most probably because I rarely create custom iterators or work with generators…

Even though I guess I’ve nailed it? ;)

function entriesFn(array) {
  const out = {};
  out[Symbol.iterator] = function* () {
    for (let i in array) {
      yield [+i, array[i]];
    }
  };
  return out;
}

What do you think?

Do you like such a practice tasks?