DEV Community: koushik chatterjee

How to Use Different SSH Keys for GitHub and Bitbucket on the Same Machine

koushik chatterjee — Sat, 29 Mar 2025 06:45:19 +0000

When working on multiple projects that use different Git hosting services like GitHub and Bitbucket, we sometime need to configure separate SSH keys on the same machine. This step-by-step guide will show you how to set up multiple SSH keys on Ubuntu 22.04 for managing different Git accounts seamlessly. I have done this for ubuntu system but this approach is more or less for windows and mac os.

Step 1: Check Existing SSH Keys

Before generating new SSH keys, check if you already have any keys in your system:

ls -l ~/.ssh/

Step 2: Generate a New SSH Key for GitHub

Since you already have an SSH key for Bitbucket, create a separate key for GitHub:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

When prompted:

Do not overwrite the existing key (id_rsa).

Instead, save it as id_rsa_github (or another recognizable name).

Example:

Enter file in which to save the key (/home/your-user/.ssh/id_rsa): /home/your-user/.ssh/id_rsa_github

This will generate:

~/.ssh/id_rsa_github (private key)

~/.ssh/id_rsa_github.pub (public key)

Step 3: Add Your New SSH Key to GitHub

Copy your public key: cat ~/.ssh/id_rsa_github.pub
Go to GitHub → Settings → SSH and GPG keys.
Click "New SSH key", paste the copied key, and save it.

Step 4: Configure SSH to Use the Correct Key

To ensure Git uses the correct key for each service, configure SSH by editing (or creating) the

~/.ssh/config file:
nano ~/.ssh/config

Add the following:

# Bitbucket Configuration Host bitbucket.org HostName bitbucket.org User git IdentityFile ~/.ssh/id_rsa

# GitHub Configuration Host github.com HostName github.com User git IdentityFile ~/.ssh/id_rsa_github

Save and exit (Ctrl + X, then Y and Enter).

Step 5: Add SSH Keys to the SSH Agent

To ensure the keys are loaded, start the SSH agent:

eval "$(ssh-agent -s)"

Save and exit (Ctrl + X, then Y and Enter).

Then add both keys:

ssh-add ~/.ssh/id_rsa ssh-add ~/.ssh/id_rsa_github

Step 6: Test the SSH Connections

Verify that SSH is correctly using each key:

ssh -T git@bitbucket.org

Expected output:

logged in as <your-bitbucket-username>.

ssh -T git@github.com

Expected output:

Hi <your-github-username>! You've successfully authenticated.

Step 7: Clone Repositories Using the Correct SSH Key

When cloning repositories, always use the correct SSH URL:

For Bitbucket:

git clone git@bitbucket.org:your-bitbucket-username/repository.git

For GitHub:

git clone git@github.com:your-github-username/repository.git

Reactjs 19 - some key points to discuss

koushik chatterjee — Fri, 01 Mar 2024 05:04:04 +0000

No need to say that Reactjs is now one of the most demanding javascript library using and loved by most of the technology companies and so developers. As ReactJS 19 approaches its release, several exciting new features are expected to empower developers to create even more dynamic and efficient web applications. In this document, I am trying to explore some of the anticipated features of ReactJS 19.
1.Own Compiler : In new react 19 we are going to get its own compiler which will compile and convert the react code into regular javascript code. This will make reactjs 2 times faster its execution and boost its power or rendering.
2. Concurrent Rendering: This new version of Reactjs will improve in concurrent rendering capabilities. Concurrent rendering allows React to work on multiple tasks simultaneously, making UI updates smoother and more responsive. This feature enhances the overall performance of React applications, especially for complex user interfaces with high interactivity.
3. Improved Server-Side Rendering (SSR): Server-Side Rendering is crucial for delivering fast initial page loads and improving SEO for web applications.Once major goal of ReactJS 19 is to enhance SSR capabilities further, optimising the rendering process on the server-side. This improvement will lead smooth running of application, make the application run faster and user will gain better experience when using this application.
4. Suspense for Data Fetching: Suspense is a powerful mechanism introduced in previous versions of React for handling asynchronous operations such as data fetching. The new React is expected to redefine and rescale the suspense mechanism and this will help developers in data fetching and doing asynchronous operations more effectively.
5. Asset loading faster: This is probably one of the best feature in new Reactjs where necessary assets like images or videos or files will load in background when user is doing some other important work in page. In that way it will minimize the loading time of webpage or reduce time to load an image.
6. Built-in Error Boundaries: Error boundaries enable developers to handle errors that occur during the rendering process, preventing the entire application from crashing. Expected that ReactJS 19 will introduce built-in error boundaries as a standard feature and helps developer to gain more flexibility in error handling and showing error page in more controlled ways.
7. Improved DevTools Integration: React Developer Tools is an essential to developers for debugging and profiling React applications during development. ReactJS 19 aims to enhance DevTools integration, providing developers with some more features and develop existing controls which will help developers to gain more power in debugging and measure application perforce as well.
8. Context API over Redux : State management is one challenge in React which we solve using Redux and context API. Normally redux we used to mange global state of an application and context api do the same job but not like react. But in this new Reactjs version it will be more powerful and can complete redux where in cases it might beat redux in global state management.

Since ReactJs 19 still not introduced by React community officially so we can't validate these points now. But we hope that these above discussed points will make react more faster, robust, more poplular and more interesting from developers to IT companies.

AI in Web Development: Revolutionizing the Digital Frontier

koushik chatterjee — Mon, 19 Jun 2023 07:43:09 +0000

Artificial Intelligence (AI) and Machine Learning (ML) have permeated various industries, and web development is no exception. The integration of AI and ML technologies has brought a myriad of possibilities, enabling developers to create intelligent, interactive, and personalized web experiences. Technology is exploring and new ideas and innovations are coming every day. Some of the very common hence super useful AI tools I am discussing here,

1. Chatbots and Virtual Assistants: AI-powered chatbots and virtual assistants have transformed customer support and engagement on websites. These intelligent bots use Natural Language Processing (NLP) algorithms to understand user queries and provide instant responses, 24/7. They can assist with tasks like answering common questions, guiding users through processes, and even performing transactions. By automating routine tasks, chatbots enhance user experiences, reduce response times, and improve customer satisfaction.

2. Content Generation and Personalization: AI algorithms can analyze user behavior, preferences, and demographics to create personalized web content. By leveraging ML techniques, websites can tailor recommendations, product suggestions, and content offerings based on individual user interests. AI can also generate dynamic content by aggregating and curating relevant information from various sources, reducing manual content creation efforts while maintaining quality and relevancy.

3. Automated Testing and Bug Detection: AI can automate the testing and debugging process in web development. ML models can learn from existing codebases to detect potential bugs, vulnerabilities, or performance issues. Min toltivation here is not only reduce the time but also envhance overall users expereience and quality in web development. AI-powered testing tools can simulate user interactions, identify edge cases, and generate test cases to ensure comprehensive test coverage and minimize human error.

4. Image and Video Processing: AI algorithms can analyze and process images and videos on websites. Through computer vision techniques, ML models can automatically tag, classify, and describe visual content. This enables advanced image search functionalities, automated content moderation, and even augmented reality (AR) experiences. By harnessing AI's capabilities, web developers can create visually immersive and engaging user interfaces.

5. Natural Language Processing (NLP) and Sentiment Analysis: NLP techniques allow web applications to understand and interpret human language. Sentiment analysis algorithms can analyze user feedback, comments, and reviews to extract sentiments and gauge public opinion. This information can be invaluable for businesses to understand customer satisfaction levels, identify potential issues, and make data-driven decisions.

6. User Experience Optimization: AI can optimize web experiences by analyzing user interactions and feedback. ML models can learn from user behavior patterns to improve website navigation, layout, and content placement. AI-powered recommendation systems can suggest relevant content or products, reducing decision fatigue for users. By continuously adapting to user preferences, AI enhances user experiences and increases engagement and conversion rates.

7. Cybersecurity and Fraud Detection: AI-based cybersecurity solutions can detect and prevent various web threats. ML algorithms can analyze network traffic, user behavior, and system logs to identify potential security breaches, phishing attempts, and fraud. AI can also bolster authentication mechanisms through biometric recognition or anomaly detection techniques, enhancing web application security.

Conclusion: The integration of AI and ML technologies in web development has opened up a world of possibilities from the old monithic and legact form to hight tech intellegent form. From intelligent chatbots to personalized content generation, automated testing to image processing, and sentiment analysis to cybersecurity, AI revolutionizes the web development landscape. By harnessing these capabilities, developers can create intelligent, interactive, and user-centric web experiences, redefining the digital frontier.
Regenerate response

How to install mongodb community edition to ubuntu 22.04

koushik chatterjee — Fri, 27 Jan 2023 16:13:44 +0000

Mongodb is a widely used document oriented NoSQL database management system. Mongodb uses json like format called BSON ( Bianary Json) and it stores data in a collection of documents rather than storing in a table. Mongodb is designed in that way, it can be scaled and performed in an optional lavel and that became a choice for many large scale applications.
Mongodb is used in many web and mobile applications and here are the steps to install mongodb in ubuntu system 22.04,

step 1 : Import the MongoDB public GPG key:

sudo apt-get install gnupg
wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -

step 2 : Create a file for mongoDB

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list

step 3: Reload the package database

sudo apt-get update

Step 4: Install MongoDB Community Edition

sudo apt-get install -y mongodb-org

Step 5: Start mongoDB

sudo systemctl start mongod

you can also enable automatic start of mongoDB on boot by using this command

sudo systemctl enable mongod

Troubleshoot : While you are going to start mongoDB you might see this message,

MongoDB Install Fails on Ubuntu 22.04 - Depends on libssl1.1 but it is not installable as Ubuntu 22.04 has upgraded libssl to 3 and does not propose libssl1.1. as MongoDb has no official build for ubuntu 22.04. To overcome this issue ubuntu 22.04 installed in your system need to force the installation of libssl1.1 by adding the ubuntu 20.04 source:

step 1:

echo "deb http://security.ubuntu.com/ubuntu focal-security main" | sudo tee /etc/apt/sources.list.d/focal-security.list

Sep 2: Now again run the same previosly used command to install mongodb,

sudo apt-get install -y mongodb-org

now delete the focal-security list file you just created,

sudo rm /etc/apt/sources.list.d/focal-security.list

Now you you can start mongoDB in your system using command,

sudo systemctl start mongod

and it will start working fine in your sytem.

ReactJs commonly used Hooks

koushik chatterjee — Mon, 16 Jan 2023 13:04:59 +0000

React Hooks are a way to use state and other React features in functional components, rather than in class components. They allow you to use state and other lifecycle methods in functional components, which can make your code more readable and easier to understand. Hooks are introduced from react 16.8. In a simple sentence we can say that by using hooks we can use both the state and lifecycle methods in a class component. So before introducing hooks developers had to use class components to get the advantage of lifecycle methods like componentDidMount or componentDidUpdate.

There are lots of benefits of using hooks in your react code. Implementing hooks in your code gives a cleaner look of your code. It looks simple and understandable to a person who is even new in react and it is made for functional component and so it is ok if you don’t have a good knowledge in OOPs. By using hooks you can write a better code by splitting a big component into smaller components. Even hooks perform faster than the same code written in class component.

Hooks are made to use in functional component. So it should call only in functional component
Call hooks from react functional component and avoid to call from regular javascript functions.
Hooks should be called from top level only. That means you should avoid to call from inside a loop, nested if else of switch statements. So basically it ensures that the hooks call in the same order you have written whenever that components renders.
Hooks can be called from other hooks of any custom hooks

There are many hooks in react and some of them are

Basic Hooks : useState, useEffect, useContext

Additional Hooks: useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue

UseState : When called, this hook returns a stateful value. Use state hook is used in functional components.

import React, { useState } from 'react'; const [myVariable, setMyVariable] = useState(0);
Here setMyVaribale is a callback which will set the return value to myVariable.We set initial state as 0 by passing useState(0). In react class component we can do this using setStae() method.
ref: https://reactjs.org/docs/hooks-state.html

UseEffect : Use effect hook is used to perform side effect in reactjs functions. When we do some operations eg. fetch data from api, then useEffect hooks calls after dom render and it don't block browser.

useContext : This hook allows you to access context in a functional component. It takes a context object as an argument and returns the current value of the context. For example, the following code sets up a context for a theme and uses it to set the background color of a component. Context is used to pass down data from higher level component to lower level components without having pass props manually in each lavel.

useCallback: This hook allows you to optimize the performance of your component by memoizing a callback. It takes a callback and an array of dependencies as arguments and returns a memoized callback that will only change if one of the dependencies has changed. This can be useful if you have a component that re-renders often and has a callback that is expensive to create.

USeMemo : A React hook that allows you to memoize a component's expensive calculations and return a cached result for performance optimization. It takes two arguments: the first is the calculation to be memoized, and the second is an array of dependencies that should trigger a recalculation.

useRef : This hook in React allows to create a reference to a DOM element or a component instance. One can use this reference to access the element's properties and methods. Here is an example of using useRef to create a reference to a text input

There are many other hooks are available in reactjs. We discussed some of the commonly used hooks here . and These hooks helps to carry and maintain states inside a react component.