DEV Community: vinoo

How To Setup SSH Keys For Multiple Hosts

vinoo — Fri, 16 Sep 2022 03:23:58 +0000

SSH is a very powerful way to access remote servers. Learn how to easily setup SSH in your system.

This article was originally posted here

There are probably hundreds, even thousands of articles on this topic. And that's precisely the reason why it can also get daunting, confusing, and borderline nauseating to understand how to setup, much less use SSH as a beginner.

This post is aimed to be a no-nonsense, no-fluff guide to creating multiple SSH keys for difference Git based accounts like GitHub or BitBucket, and manage all of them easily, simultaneously.

Disclaimer: This is not an expert guide, and the steps here are simplified to ensure all levels of developers can follow. In case of any discrepancy or incorrect steps, please let me know in the comments and I would be happy to correct.

It is recommended to complete the below steps from beginning to end for one key and then repeat the process for all keys thereafter.

Step 1 - Check for existing keys

Use the command below to check if there are existing SSH keys -

ls -al ~/.ssh

If you need a clean slate and start setting up everything afresh, delete the existing entries with this command -

ssh-add -D

Note that this will only delete the manual entries previously done by you and not the ones automatically added by other agents/tools. To ensure that the .ssh folder is empty, simply delete the contents of the folder like you normally would.

Files beginning with a dot '.' are irrelevant in this context. SSH key names look like this -

Step 2 - Generate new SSH key

Type in this command to generate a new SSH key -

ssh-keygen -t ed25519 -C "your@email.com"

Meaning of different flags in the above command -

-t : defines the type of algorithm that generates the key; RSA, ed25519, etc. ed25519 is a more encrypted, more secure algorithm
-C : used to define any comment to identify the particular entity who generates the key. Optional, but always recommended

Once entered, the above command generates the SSH key. Make sure you enter a unique name within the path, else the file name will default to id_rsa. Your screen should resemble like so -

Hit Enter through the next steps (paraphrase, et al), and your keys will be generated; Two files - a private key and public key will be generated.

Step 3 - Create a `known_hosts` file

Nothing fancy; simply go inside the .ssh folder with cd .ssh and create a file named known_hosts_yourkeyname. This helps you easily diagnose issues should they occur in future. Use the command below to create it -

touch known_hosts_yourkeyname

Leave it untouched after this.

Step 4 - Create/Edit the config file

The config file is used to define and set options for each key and its corresponding host. Open the .ssh folder in your preferred editor and create a new file named config (without any extensions) and paste the following lines into it -

Here is a brief breakdown of what each line means -

Host : This is used to identify each key amidst the different ones in your system. Keep it simple with the URL of the host as above.
HostName: This is where your remote repository exists. This is what is used to match with your repo's base URL.

For a default SSH key which is usually a personal one, keep the HostName entry the same as the Host. For work SSH keys, you can modify the HostName like so -

User : For git based hosts/servers, the entry will be git. If it is a Digital Ocean Droplet or AWS instance, it may vary accordingly.
AddKeysToAgent : In a further step, we will add the SSH keys to the ssh-agent in the system - which is a program that keeps track of identities and passwords, so that you do not have to enter your credentials each time you perform git read/write operations. In this line, we are prompting the private key to be authenticated by the ssh-agent.
IdentityFile : This is the path of the SSH key
UserKnownHostsFile : This is used to store all connections to hosts that your key connects to. Specify the name of the known_hosts file you created earlier using the touch command.
IdentitiesOnly : This entry is used to ensure that only the specified keys are used to connect to a host, and no other.

NOTE: Once you generate more keys, you will need to simply add the same set of lines as above for those new keys. We will see an example of this at the end of the article.

Step 5 - Add the keys to `ssh-agent`

Enter the command below -

eval "$(ssh-agent -s)"

A unique Agent PID will be displayed which means that the ssh-agent is now running.

Next, add the keys to it -

ssh-add --apple-use-keychain ~/.ssh/your_keyname

If you are not on a Mac, do not use the --aple-use-keychain flag. This is for the newer keychain access management in MacOS versions after Monterey. If you are using an older version or are on Linux, replace it with this -

ssh-add -K ~/.ssh/your_keyname

You will get a line confirming the key was added.

Step 6 - Add the key to your host

Make sure you're inside the .ssh folder. Then, copy the contents of your public key like so -

cat your_keyname.pub | pbcopy

cat is to display the contents of the public key, and simultaneously, with the pipeline operator, we use pbcopy to copy the contents to the system's clipboard.

Next, add this to your host. If you are on GitHub, go to your account Settings>SSH and GPG Keys and add the key.

Step 7 - Verify and start SSHing

The last step is to verify that your configuration is up and running. Enter this command -

ssh -T git@github.com

Suppose you have repeated the process up until Step 6 for two other keys and you now have two keys, with the second key supposedly on GitHub again, and the third key on BitBucket, then your config file should look similar to this -

As you can see, there are multiple hosts with multiple corresponding keys and all of them are pattern matched by the ssh-agent to connect only as specified. Notice how the Host entry for GitHub work account and BitBucket account are unique.

You can now verify the configuration for all of them -

ssh -T git@github.com

ssh -T git@github-work

ssh -T git@bitbucket.org

You should get a success message for each of them indicating that authentication was successful -

Hi some_user! You've successfully authenticated, but GitHub does not provide shell access.

Voila! 🎉 You are now all set to clone your repos from the hosts you have setup.

An important thing to notice here is that in our example above, we have 2 GitHub hosts where the HostName entry points to github.com but the Host entry is kept different in order for the ssh-agent to uniquely identify each of them.

Therefore, when you are cloning a repo from the Default Personal account, you can simply type in -

git clone git@github.com:your_username/your_repo_name.git

However, when you want to clone a repo from the Work GitHub account, you would have to change the base URL of the repo after the part git@, with your corresponding Host entry, like so -

git clone git@github-work:your_username/your_repo_name.git

If it is a different host altogether like the Bitbucket one, then you can simply use the clone command like usual.

This brings us to the end of this rather long, but detailed article on how to setup multiple SSH keys for multiple hosts in your system.

Have fun setting up, and do let me know in the comments, if you have any suggestions. Until next time 🖖

Deeper Into this In JavaScript

vinoo — Thu, 18 Nov 2021 07:49:04 +0000

In a previous article, we saw how to use this keyword with objects. In this post, we shall dive deeper into different bindings of this that we will encounter when dealing with it in functions. Bindings mean the different ways this behaves in different contexts in a function.

1. Default Binding

Consider the following example -

function defaultThis() {
 console.log(this);
 alert(`Welcome ${this.username}`);
}

defaultThis();

Since there is no username variable declared or defined, this keyword gets the default binding - it references the global Window object here, as can be seen below -

2. Implicit Binding

This binding is created by the behaviour of the function. Let's take an example to understand -

let hobbit = {
  name: 'Bilbo',
  welcome() {
    alert(`Hello ` + this.name);
  }
} 

hobbit.welcome();

The output would be as exptected -

Here, since there is an object that calls the function welcome(), this implicitly refers to the object inside the function.

3. Explicit Binding

Explicit binding means to explicitly bind the value of this to any specific object.

There are 3 methods to implement explicit binding -

call()

Consider the code snippet we used above in Implicit Binding - the property name and method welcome are both defined inside the object hobbit. This makes the binding for this fairly..implicit 🌝. What if the object is separate from a method? Consider the snippet below -

function welcome() {
  alert(`Welcome ${this.name}`);
}

let hobbit = {
  name: 'Frodo'
}

welcome(); // Welcome
welcome.call(hobbit); // Welcome Frodo

The first function call welcome() has no reference to an object, so it would not return anything in the alert statement after Welcome.

The second function call is where we have accessed the object with the call method. This means that we are specifying to the browser to assign the object hobbit being passed as parameter to this using call method.

Another use case for call is that we can pass parameters to signify the value for this along with arguments for the function. Example -

function foo(spellOne, spellTwo) {
  alert(`${this.name} cast the spells ${spellOne} and ${spellTwo}`);
}

let wizard = {
  name: 'Ron Weasley'
};

foo.call(wizard, 'Expelliarmus', 'Slugulus Eructo');

Here, the function foo is called with the call method and the object wizard is passed as the first argument which automatically gets assigned to this in the function, along with the rest of the arguments. Note that the first argument always gets assigned to this.

The output is as below -

But there is a drawback for this use case. What if there are tens of arguments to be passed for multiple objects? Very cumbersome 😕 We have the next binding method to improve usability a little better.

apply()

Take a look at this snippet -

function foo(spellOne, spellTwo) {
  alert(`${this.name} cast the spells ${spellOne} and ${spellTwo}`);
}

let wizard = {
  name: 'Ron Weasley'
};

foo.apply(wizard, ['Expelliarmus', 'Slugulus Eructo']);

The format is the same, except that instead of call, we use the method apply, and instead of passing the arguments one after the other, we just wrap them in an array. The output remains the same.

bind()

The bind() method creates a new function which when invoked, assigns the provided values to this.

Take a look at the snippet below -

function foo(spellOne, spellTwo) {
  alert(`${this.name} cast the spells ${spellOne} and ${spellTwo}`);
}

let wizard = {
  name: 'Ron Weasley'
};

let castSpell = foo.bind(wizard, 'Expelliarmus', 'Slugulus Eructo');

castSpell();

Here, we are using bind() to be referenced by the variable castSpell, which can then be invoked as a normal function call.

The advantages of using bind() are that -

We are explicitly binding the foo() method to the instance castSpell such that this of foo() is now bound to castSpell
Even though the wizard object does not have castSpell as its property, because we are using bind(), wizard now recognises castSpell as its method

bind() returns a new function reference that we can call anytime we want in future.

4. new Binding

new binding is used specifically for constructor functions. Take a look below -

function Wizard(name, spell) {
  this.name = name;
  this.spell = spell;
  this.intro = function() {
    if(this.name === 'Hermione') {
    alert(`The witch ${this.name} cast the spell ${this.spell}`);
    } else {
    alert(`The wizard ${this.name} cast the spell ${this.spell}`);
    } 
  }
}

let hermione = new Wizard('Hermione', 'Occulus Reparo');
let ronald = new Wizard('Ronald', 'Slugulus Erecto');

Constructor functions are special functions that are used to create new objects. The use of new keyword means that we are creating a new object (or instance) of the (constructor) function.

Whenever new is used before any constructor function (name with the Capitalized convention followed), the JS engine undertands that this inside the function will always point to the empty object created by new.

5. HTML Element Event Binding

this can be used to bind the values of specific events or elements in HTML.

Take a look at this example -

<button 
class ="this-one"
onclick="console.log(this)">
this One
</button>

In this case, this will always bind itself to the element where the event happened; in this case, the this-one class button.

The output will be as below -

Now take a look at this snippet -

<button 
class ="this-two"
onclick="this.style.backgroundColor='orange'">
this Two
</button>

Here, this is again bound to the button with the class this-two, and the onclick event happens only on that specific button.

Output -

How about when we call a function within the element?

<button 
class ="this-three"
onclick="changeColor()">
this Three
</button>

<script>
  function changeColor() {
    console.log(this);
  }
</script>

Note that we are calling the console.log() function along with this.

So, the value of this is as below -

Here, this points to the global Window object. We can see that Default Binding occurs here since the function changeColor() is called without a prefix.

this is definitely strange. However, the use cases provide us with flexibility to use objects effectively.

Function.Prototype in JavaScript

vinoo — Sun, 14 Nov 2021 12:15:27 +0000

This article was originally published here

In the previous article , we saw how objects behave and what Dunder Proto means. In this post, let us discuss why Dunder Proto is used and how it can help us write better, optimised code.

Dunder Proto is mainly used for two cases -

To manage user methods for the objects that are created at runtime
To increase usability through better memory management

So how exactly does this efficiency happen?

We know that __proto__ is a special property present in every object that we create in JavaScript. This property presents (and holds) different methods/key-value pairs for each object being created.

And since every function is also an object, each function holds a set of methods as well that can be invoked right off the bat (like map(), filter(), etc).

Here lies the advantage - you can (and should!) put all your methods in one place, in the Dunder Proto.

Why?

Because since it is already an existing property present in every object, there is no need to explicitly create a variable to manage those methods. Think about it - with each object you create, a whole list of methods get attached to it, leading to a bigger mess in terms of memory management. But by putting it all in the special bag that is the Dunder Proto, it is implicitly managed.

Example -

let userMethods = {
  sayHello: function() {
    alert(`Welcome ${obj.name}!`);
  },
 changeName: function(newName) {
   this.name = newName;
   return this.name;
 }
};

function createUser(name, age) {
  let obj = Object.create(userMethods);
  obj.name = name;
  obj.age = age;
  return obj;
}

As can be seen, the methods sayHello() and changeName() are both put in a single object variable, which is then assigned to a variable using Object.create() method that accepts this object of methods as a parameter. These are now stored in __proto__ as shown below -

Neat, right? 🥳

There is another property that exists to make your job even more easy, and the code more organised. Say hello to F.prototype.

Function.Prototype

In the previous ways of creating and using object and methods, we used separate variables to store methods and object data. As our application becomes more complex, there are chances of code going out of hand. Using function prototypes can help us organise our code better.

What is function prototype?

Just like every object has a special property called Dunder Proto, every function in JavaScript also has a property called the Function Protoype. The use case for this property is that since it is a property of a function, it has its own Dunder Proto as well. Take a look below for clarity -

Here, the function foo() has the prototype() property which in turn contains the __proto__ property.

This means that there is an even better bag to hold all our object data and methods in one place without the need for a separate function to create objects and a separate variable/object to hold methods. Using the function_name.protoype property, we can push all the data and methods to be stored in one single bag, for any number of objects that are created in future.

Example -

function Hobbit(name, age) {
 this.name = name;
 this.age = age;
}

Hobbit.prototype = {                  // Using the function.prototype property to put object's methods
  displayName: function() {
  alert(`Hobbit's name is ${this.name}`);
 }
}

Below, we can see that the methods as well as data are collected inside this F.prototype property.

The question here is - we used the F.prototype property to store the methods and data; but how did we instantiate the data to be stored along with the methods?

This is where the new keyword in JavaScript comes into picture.

new keyword is used to create an "instance" of an object. An instance here means that -

A new object is created
The methods are added to the prototype property of the function
The this keyword automatically binds the newly created property to the object (and its prototype)
The newly created object is then returned as well

Like below -

let hobbitOne = new Hobbit('Samwell', 120);

That's it - a simple new keyword to make code (and life) easier 😁

Notice that the code above looks almost the same as the previous method of object creation, except that the object is now returned implicitly with the usage of new keyword, as well as the data and methods are managed under a single property with the use of Function.prototype.

Confused much? 😐 I would expect so; JavaScript is by no means easy. However, the way it offers such flexibility in writing code is what makes it interesting.

In the next article, I go into class, constructor and how our code can be even more organised than ever, binding all this knowledge neatly. Stay tuned to clear all your confusion 🙂

Until next time 🤠 Keep shipping 🚀

OOPs in JavaScript - Deeper Into Objects & Dunder Proto

vinoo — Wed, 27 Oct 2021 14:18:17 +0000

In this post, originally published here we shall dive a bit deeper into nature of objects, and cover the Dunder Proto concept.

This post is part of the Advanced JavaScript series where I try to explain essential advanced JS concepts in a simple manner.

Nature of Objects

Consider the below object -

let details = {
name: 'Richard Hendricks',
company: 'Pied Piper',
};

In the above object, if we try to access the property company, it is possible since company is an existing property of the details object.

However, the below snippet would return undefined -

console.log(details.designation); //undefined

This is because there is no property named designation inside details. This is exactly how we would expect an object to behave.

However, take a look at the example below -

let arr = [1, 2, 4, 5, 7];

console.log(arr.map( () => 21 );

The output would be as below -

But map() is not a method inside arr. So how is this being computed and where is this coming from?

Dunder Proto `proto`

Inside every object in JavaScript lies a special property called Dunder Proto. The name is coined due to the way this object is represented - __proto__ (accompanied by double underscore on both sides of the word proto).

As we can see in the above image, the object arr (and basically every object you create in JS), has the [[Prototype]]:Array property, inside which lies __proto__. If we expand this [[Prototype]]: Array property in our example, we should be able to see __proto__, which in turn contains a huge list of methods like every, forEach, map, splice, etc.

The point to be noted here is that each object we create has a different set of key-value pairs in the __proto__ property.

Whenever we try to call/access a property that does not exist in the defined object, the JS engine goes down the __proto__ chain (or a rabbit 🐇 hole), to search for that property. In the above case, we tried to compute the map() method on an array (which is an object), and it went down the __proto__ chain to look for the same.

This is how the hidden nature of object allows for all array, object, and string methods to be carried out.

Since __proto__ is a special property of an object, it can be accessed as well. Suppose you want to add a new property under __proto__ to the details object above, this is how to do it -

details.__proto__.alertMsg = function () {
alert(`Hello Dunder Proto => __proto__`);
}

This function is now added to the __proto__ property as can be seen below -

We learnt a hidden nature of objects in JavaScript, and the basics of Dunder Proto. In the next post, we shall learn about why and where Dunder Proto can be used to make our code more efficient.

Until next time! 🙌

OOPs in JavaScript - Intro to Creating Objects and `this` Keyword

vinoo — Mon, 25 Oct 2021 05:13:03 +0000

This article as originally published here.

JavaScript is a flexible, object oriented language. This means that it allows developers to create different kinds of objects for different purposes. Almost everything in JavaScript (except Primitive types) is an object (Booleans, Strings, Numbers, Dates, Arrays, Functions, Objects, etc).

Creating Objects

Let us look at the different ways to create an object in JS.

1. Object Literal

This is the most popular and easiest way of creating objects. Object literal consists of the type of variable/object name (let, var, or const), object name, and the collection of properties inside it. Here's an example to understand it better -

let obj = {}; // Object Literal

A more detailed object literal -

let userDetails = {
firstName: 'Arya',
lastName: 'Stark',
occupation: 'Girl With No Name',
};

2. Object Constructor

Constructors are special functions that are called when an object is created with the new keyword. Take a look at the example below -

let person = new Object({ 
name: 'Jon',
family: 'Targaryen',
occupation: 'Dragon Rider',
});

Here, the keyword new is used along with the case-sensitive keyword Object, indicating that it is a special keyword used in creating objects through Object Constructor method.

The result is the same as creating object through Object Literals.

3. Object.create

This is another method to create new objects, which gives us more control over handling them. Object.create accepts a parameter, which can be either null or an object (key-value pairs).

let user = Object.create({
name: 'Vinoo',
designation: 'Developer',
});

If we pass null as the parameter, it still creates an empty object.

The `this` keyword

In simple words, this is a special predefined variable that is present in every function declaration. The value of this variable changes according to the way we call the function in which it is defined.

this is used in both global and function contexts. It always points to an object. More specifically, this references the object that is currently calling the function.

Example -

const add5 = {
    a: 10;
    addition: function() {
    return this.a = this.a + 5;
    }
};

add5.addition();

Here, addition() is a function which is a property of the add5 object (a function inside a property becomes a method). Hence, inside the addition() method, this references the add5 object.

Whenever we call a function through an object ( e.g -add5.addition()), this will always point to that object.

In Global context, this refers to the global object, which is the window object in a web browser.

If we run the following snippet, it can be seen thatthis points to the window global object -

console.log(this === window); //true

Essentially, if a property is assigned to this, then that property is added to the global object, and can be accessed by the window object.

Example -

this.value = 21;
console.log(window.value);

The output will be 21.

this keyword has more use cases in the Function context, which we shall see in an upcoming post.

Stay tuned! 🚀

JavaScript In Snippets - Intro and Fundamentals

vinoo — Sat, 06 Mar 2021 08:24:51 +0000

The History

There are cults.

There are followers.

And then, there is an entire world embroiled in JavaScript. A world full of engineers, developers, and designers - all ardently worshipping a language that has taken the web world by storm. Again and again.

JS was introduced to the world 26 years ago. I was introduced to it 9 years ago in a college classroom, and I felt.. nothing. It was taught as just another programming language, with almost the same syntax as the couple of other languages I knew, and to perform the familiar operations of "finding prime numbers", "generating Fibonacci sequence", etc. I learned the "how" but never the "what" or "why" of JS.

I admit, rather embarrassingly, that back then I did not even know that JS was a language that was developed for the web. Ignorance is NOT bliss 😐.

It was originally created for a browser called Netscape Navigator which was competing with Internet Explorer in 1995-1996 to take over the browser domain. Eventually, Internet Explorer won the battle and became the dominant browser at large (back then).

I know right? IE, of all browsers. Yikes!

JS slowly evolved to become a higher end programming language that could breathe interactivity to the browser world, and thus began its many avatars to come.

As popularity for JS started growing, ECMA (European Computer Manufacturers Association) was handed over the responsibility of overseeing JS' development, restructuring, and maintenance. The name was changed from JavaScript to ECMAScript, but the former name has remained attached to the language to this day.

The Present

Undeniably, JS has taken over the world of web as the main language, arguably beating its competitors by a huge factor. Gone are the days when it was only used for just interactivity. Today, we have a plethora of libraries and frameworks that have helped create an entire ecosystem around JS.

Such is the capability and demand that the masses and the indie hackers no less than revere this language for the intuitive, sleek, and nearly flawless experience the web provides today. All hail JavaScript.

The Learning

After years of forgetting the language and its fundamentals, I restarted my journey into the world of web development. This post will cover a few of the fundamentals, and the next series of posts will document my learning journey as I tackle the web world with JS.

Let's dive in!

Note: This post is not be a comprehensive one, nor explains the underlying concepts. This is, as the title suggests, a collection of snippets to refer to as a documentation in times of "developer peril😶".

Say Hello

The first order of things while learning a new language (or relearning for that matter), is to say Hello to the World. It's a time tested tradition for all newbies. However, considering JS is a whole other world (universe?) in itself, let's greet it instead!

alert() is a utility function that is essentially used to display a message in the browser. We shall come back to this later.

Another nifty little operator that is helpful is typeof(). It is used to identify the data type of a particular expression or variable in use.

In the above example, the variable a holds a value of 23. When we test with the typeof() operator, the value is identified as a number.

Value Types

There are 2 types of value types in JS:

Primitive Value Types

These are types that can collect / hold only one value. There are 5 Primitive types:

Number - A number type is any integer or whole number, including decimals. Examples: 44, -67, 41.67844, 3.1417258, 0.56
String - String type consists of letters and words encased in any of these quotes:

Boolean - Boolean data type is a function that can have only one of two values. These are binary in nature. Examples: true or false, 0 or 1, ON or OFF
Undefined - Undefined is a type that indicates that the variable in question is either not assigned a value or is not declared. This is better illustrated below -

In the example above, we see that when we declare variable a, the status is undefined since there is no assigned value. When we check for the type of this undefined variable, the value returned is "undefined", which is the primitive value of undefined.

Null - Much like undefined, null is also a type that indicates the absence of any value to a variable. However, unlike undefined, null does not have a value "type" to return. When tested for its type in the console, it returns the type as "object" which is what it is treated as while calling objects that are often not relevant.

Non-Primitive Value Type

Object - This is collection of different values of different data types in a single variable. The syntax is as follows -

As can be seen above, the values for the variable userDetails are enclosed in curly brackets. The values themselves are stored in what are known as key-value pairs. Here, userName is a key and "Vinoo" its corresponding value. Together, they are a key-value pair. Same goes with the userID value as well. In the image below, we can see that the console shows the result for the typeof value of userDetails as "object" data type.

This concludes the JS In Snippets post. Thanks for reading, and stay tuned for more articles on JavaScript. Keep Shipping!

DEV Community: vinoo

How To Setup SSH Keys For Multiple Hosts

Step 1 - Check for existing keys

Step 2 - Generate new SSH key

Step 3 - Create a known_hosts file

Step 4 - Create/Edit the config file

Step 5 - Add the keys to ssh-agent

Step 6 - Add the key to your host

Step 7 - Verify and start SSHing

Deeper Into this In JavaScript

1. Default Binding

2. Implicit Binding

3. Explicit Binding

4. new Binding

5. HTML Element Event Binding

Function.Prototype in JavaScript

So how exactly does this efficiency happen?

Function.Prototype

What is function prototype?

OOPs in JavaScript - Deeper Into Objects & Dunder Proto

Nature of Objects

Dunder Proto __proto__

OOPs in JavaScript - Intro to Creating Objects and `this` Keyword

Creating Objects

1. Object Literal

2. Object Constructor

3. Object.create

The this keyword

JavaScript In Snippets - Intro and Fundamentals

The History

The Present

The Learning

Say Hello

Value Types

Primitive Value Types

Non-Primitive Value Type

Step 3 - Create a `known_hosts` file

Step 5 - Add the keys to `ssh-agent`

Dunder Proto `proto`

The `this` keyword