DEV Community: Rayan Abid

Setup multiple Github accounts on mac. 💻

Rayan Abid — Tue, 19 Jul 2022 18:48:56 +0000

Introduction

So, I was once a happy boy. I just had one Github account, That I could use to do all that git stuff, but then I got hired and was required to use Github with company email. That shouldn't be a big deal but who likes git profiles with no commits on them. So to continue that grind I had to find a way to use multiple accounts on the same machine because last I checked I didn't have money to buy two separate machines.

So I looked around and finally found a solution and thought of sharing it with you guys. So let's start hacking.

Before getting started

Now that you are here I assume you already have the two emails ready. So I'll be referring to these emails as

personal@mail.com - Personal

work@mail.com - Work

Creating the SSH keys for your accounts.

First, we will have to generate the key for the Git accounts. So open your terminal and enter the following command.

cd ~/.ssh

If for some reason you get an error saying that this path does not exist , Then don't worry you will have to create this directory using the command.

mkdir ~/.ssh

This will create this dir. After you've done that run this command.

ssh-keygen -t rsa -b 4096 -C "personal@email.com"

Now you will be asked to name this key. You can type id_rsa_personal and save that. You might be asked to enter a password just leave that empty and press enter.

Now do the same for the work email

ssh-keygen -t rsa -b 4096 -C "work@email.com"

Now name the key id_rsa_office and leave the password empty.

After successfully running the above commands will create four files inside the .ssh directory. You can list those by running this command:

After you're done running these commands it will create 4 files inside the .ssh directory. If you wanna see it you can run the following command.

ls -al ~/.ssh

The generated files should look like this,

id_rsa_personal
id_rsa_personal.pub
id_rsa_office
id_rsa_office.pub

Now we have the keys required for Github.

Adding SSH keys to GitHub accounts

Ok, so the process that I'll mention will be the same for the other accounts as well. So you can just follow the same steps for the other accounts as well.

To copy the key you can run this command.

pbcopy < ~/.ssh/id_rsa_personal.pub

If you want to get copy the work email you can use this command.

pbcopy < ~/.ssh/id_rsa_office.pub

Now go to Github log in using your personal account or the other account. Now you just have to follow these 6 steps.

Click your avatar on the top right corner and click the Settings menu.

On the left side, under the Personal settings menu , click on SSH and GPG keys.

On the top right corner, click on New SSH key button.

Add a meaningful title to identify your key.
Press cmd + v to paste the copied key.
Click on Add SSH key to add your key and enter your password if it is asked.

Go through the same steps to add your office SSH key.

Creating configuration files to add two keys

Now head back to your terminal enter cd ~/.ssh create a configuration file by using bellow command.

touch config

This will create a file named config.

nano config

This will open the file using the nano editor

Then add the following configurations for two accounts.

# Personal account
Host github.com-personal
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa_personal

# Office account
Host github.com-office
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa_office

To save and exit press ctrl+o then press Enter and then press ctrl+x

Creating git configuration files

Using two git configuration files for our personal and office accounts will reduce the stress of managing those accounts by automating the manual process. We'll create a one git configuration file globally for our personal account and the other one in our Office works folder.

Using your terminal navigate to the root folder to create a global git configuration file for your personal account.

cd ~
nano .gitconfig

Then add following configurations.

[user]
    name = Your Name
    email = personal@email.com

[includeIf "gitdir:~/office/"]

    path = ~/office/.gitconfig

Please note that to work the office configuration above, git assumes you have all the office work-related stuff located in a folder called Office. So if it's not the case for you, please feel free to change above config according to your folder structure

Then, create an office work-related git configuration file. To do that, navigate to your Office folder and type the following commands.

nano .gitconfig

Then add following configurations.

[user]

    email = office@email.com

Save key identities in local machine

First, we have to remove any existing identities by running the following command.

cd ~
ssh-add -D

After delete, check if the newly added keys were saved successfully by running the following command.

ssh-add -l

Now you have to authenticate the keys with GitHub by running following commands.

ssh -T github.com-personal
ssh -T github.com-office

Now you can use your multiple accounts on your Mac.

Now if you want to use your personal email you will have to pass -personal after github.com as shown below.

git@github.com-persoanl:USERNAME/REPO_NAME.git

If you face any issues or have any questions please do ask in the comments below.

This was inspired by Nadun Malinda blog on the same topic.

Follow me on Github and Youtube

Bye for now.

How to get TypeWriter Effect In ReactJS

Rayan Abid — Sun, 17 Jul 2022 19:17:06 +0000

Hey everyone. Hope you all are well. Recently when I was working on my portfolio site which you can checkout at rayanabid.com, I wanted to get a typewriter effect that I saw on most sites. So I thought I might as well share it as I found this method very easy and useful to implement.

Also on a side note, If you speak urdu/hindi then you can wacth this instead if you prefer video format youtube.

So this is the effect we will try to achieve in this article.

So to get this effect. You only need to be sure of two things.

You need to have a react project setup.
You need to install this package

Open this link and paste this command in your terminal

npm i typewriter-effect

After that this package will be installed on your react project.

Now we just have to import this component in our JSX file. like this

import Typewriter from 'typewriter-effect';

Once you have imported it you can use it in your return statement.

<Typewriter
  options={{
    strings: ['Hello', 'World'],
    autoStart: true,
    loop: true,
  }}
/>

You can replace the strings array with any text you want.

and viola your typewriter effect is ready.

Now you can add this to your projects as well.

Please do share your thoughts as well. and checkout the repo on github

Bye for now.

What is the Blockchain?

Rayan Abid — Sat, 22 Jan 2022 19:46:24 +0000

Introduction

How many times a day do you hear about bitcoin, Ethereum, web3, blockchain, etc, you might have wondered What is it? How does it work? Can I a piece of the pie? If you've ever wondered about any of these questions then I hop this article can help you in understanding the what and how of blockchain.

What is the Blockchain?

Now there are multiple interpretations and ways to explain Blockchain but I find this definition to be the most comprehensive

Blockchain is a distributed immutable ledger.

-- Kshitij

I know that this is not clear at first but let me explain it and I'm sure that you will have a clear image of what it actually is and what is meant by this definition.

What is a ledger?

To define it simply, A ledger is a collection of transactions. For example: You went to a super market to purchase some goods, When you are at the checkout The cashier enters data into their systems and then that transaction is stored on there system. Now the place where this data is being stored is called a ledger. Given below is a dummy ledger.

Now as you can see that each row shows a transaction similarly, each block in blockchain stores a transaction. The image below will help you in visualizing in what a blockchain looks like.

As you can see in this image it's a series of blocks joined by chains, each block stores a transaction. Now that that's clear.

What is immutable?

unchanging over time or unable to be changed.

-- Definitions from Oxford Languages

As suggested by the definition immutable means unchangeable. Now, what does that have to do with what we are learning?

Now if you see the ledger or the example is given above, We are using some database or some paper to record the transactions , But one thing that you might find common in these methods is that these can be easily altered.

Compare that to blockchain Once a transaction has been recorded it cannot be changed this is one of the most important concepts to keep in mind when working with the blockchain.

What does distributed mean?

Distributed means shared or spread out. Now keeping this in mind we now know that blockchain is spread out, But what do I mean by that.

This means that all the information is spread out to all the systems in the blockchain. Each system has a copy of the blockchain.

Now that we have Defined the blockchain, Let's see how it works.

-- codedamn.com

Now this is what the systems look like. Now each system has a copy of the blockchain. Containing all the transactions.

-- codedamn.com

Now consider one system process a transaction. After it's done processing it sends out all the information to rest of the systems.

-- codedamn.com

The process of processing transactions is known as mining. Now that we know how the blockchain works let's look into why some cryptocurrencies are worth more.

Different blockchains

Yes, the heading is totally right there are multiple blockchains and each cryptocurrency lives on it's own blockchain. Think of it like this each company has it's own ledger similarly each cryptocurrency has it's own blockchain.

Judging the worth

Now one question that comes into our minds is why some blockchains are worth more than others. That is because each blockchain has it's own unique pros and cons to further elaborate let's compare the two most popular cryptocurrencies/blockchains.

Comparing eth and btc

Now even if you are new to all of this I'm 90% sure you might have heard of eth and btc. Btc was the first cryptocurrency but you couldn't actually do anything with it. That is where the Ethereum blockchain introduced itself, Because not only was it a currency but you could also make Dapps for it which means we can actually buy something with it. NFT's are a great example of how this works. Stay tuned for an article on introduction to that as well.

Keep in mind the shit coins that are getting popular day by day have no uses as well as they are just being used for pumps and dumps which means to just buy low and sell high.

I hope that this article was useful and helped you in better understanding the blockchain and how it works. I'll also be uploading an article on what are the generations of web and how to get started on building Dapps etc. So if you are interested then drop a follow and join my newsletter.

If you have any questions ask away in the comment section below. I'll be happy to help.

Bye for now.

Level up your terminal

Rayan Abid — Fri, 14 Jan 2022 09:05:31 +0000

Introduction

Well, how many of you think while working on your terminal that why do I have to write everything, Can't there just be some kind of auto-complete. Oh, no one here, maybe my Mom is right that I'm spoiled, Anyways let me introduce you to fig.io IntelliSense for your terminal.

What is fig

Fig is an open-source terminal that autocompletes most of your commands on your terminal. Whether it's installing npm packages , committing to Github or just changing directories with your terminal.

Fig is also open source which means if fig already does not have the commands available for your needs you can go ahead and add them yourselves.

Installing fig

Installing fig is super simple just visit the link fig.io/invite or fig.io which will then take you to their homepage and you can simply download it from there.

After it's done downloading, open it up and go through the installation process.

You can check out the installation process here

But their installer does a good job of getting you through it and familiarizing you with there terminal as well.

Time to enjoy

Now that you have fig installed you should be able to have the autocompletion. The gif below shows Fig in action.

Hope you found it useful. If you did please do let me know in the comments and by reacting to the blog. Plus if you have any topic ideas do let me know as I'm starting out and would love if you suggested something.

Thanks.

Bye for now.

Start making API calls using React redux-thunk

Rayan Abid — Wed, 12 Jan 2022 18:40:01 +0000

Introduction

Redux and React js an awesome pair to have, But a pain to work with if you're a beginner. Hopefully, this article will help in making it easy for you.

But first what is Redux.

Redux

Redux is a state management tool that helps you in managing the states. What do I mean by managing the state. Think of a scenario that you built a web app that allows users to login, Now after they have logged in you have to display there information on a lot of components.

The first option that would come to your mind if you're starting out is that you should pass it through props. But believe me when I say that this isn't the best option and will make things more complicated than it should be.

The second option you have is to use some state manager like Redux, Mobx, or context API. But we will be focusing on using Redux as this is the most popular and I'm most familiar with it.

Setting up a React project.

Now if you are trying to learn Redux you should be familiar with this, But let's go through it once more. First you have to run.

npx create-react-app your-app-name

as you can see I named my project redux-starter you can name it whatever you want.

Now once it has finished installing lets open the folder in VS Code.

you should see something similar to this.

Now let's install the required packages to setup redux with react js. Run the following command in the vscode terminal. You can open your terminal using ctrl + ` or

cmd + ` if you're on a mac.

npm i react-redux redux redux-logger redux-thunk

After installing these packages run

npm start

This will start the project.

Congratulations on starting your React project. Now a chrome tab should open up and you should see something similar to this.

Importing the required packages

Now that you have a running react project. Goto index.js and import the following at the top of the file.

// import Redux
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reducer from "./redux/reducers/reducer";
import logger from "redux-logger";

const store = createStore(reducer, applyMiddleware(thunk, logger));

Ok now to go through what each one is used for.

react-redux is the package that connects redux with react.
redux is the state management tool.
redux-logger is just a middleware that helps you by logging into the console if there is any change in any of states.
redux-thunk Thunk middleware for Redux. It allows writing functions with logic inside that can interact with a Redux store's dispatch and getState methods.

Now that all of that is out of the way. Wrap your tags inside the provider tag like this and pass it the store variable.

ReactDOM.render(
  <React.StrictMode>
    // add this
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

Now I know that some of you saved and tried to check the react app, And might be facing some errors. Don't worry this should happen as we don't have the reducer file yet so let's create that.

The redux folder

In the src directory create a new folder and name it redux and create two sub-folders inside the redux folder named action and reducers. It should look something like this.

Now that we have the files first open the index.js in the action folder and export action like this

export * from "./action";

Now in your action.js file add the following code.

export const firstAction = (data) => async (dispatch) => {
  var requestOptions = {
    method: "GET",
    redirect: "follow",
  };

  fetch("https://randomuser.me/api/", requestOptions)
    .then((response) => response.json())
    .then((result) => {
      dispatch({
        type: "firstAction",
        data: result.results[0],
      });
    })
    .catch((error) => console.log("error", error));
};

this is a dummy fetch request so that we can actually see if we are able to fetch data from the randomuser.me API. This is a simple fetch request you can also use axios if you like, But I'm using simple fetch to keep things simple.

ok the action part is done. Now let's add the following in the reducer.js file

const initialState = {
  firstState: [],
};

const changeState = (state = initialState, { type, ...rest }) => {
  switch (type) {
    case "set":
      return { ...state, ...rest };
    case "firstAction":
      return { ...state, firstState: rest.data };

    default:
      return state;
  }
};

export default changeState;

So, the variable initial state is the value of the state that it will be in beginning. The change state function is the actual stuff the type and rest are the parameters that are being passed from the action.js file. Hope that it's clear.

Updating App.js

Finally we are at the end.

In your App.js import the following

import { firstAction } from "./redux/action";
import { useDispatch, useSelector } from "react-redux";

firstAction is the action that we created in the redux/action/action.js directory, useDispatch is the hook that helps us in dispatching functions and useSelector is the hook that helps us to access our states.

in your App(props) function add a useEffect()

  useEffect(async () => {
    await dispatch(firstAction());
  }, []);

We are calling action that we created every time the component mounts.

Don't forget to import useEffect at the top

import React, { useEffect } from "react";

Ok, Finally let's call the useDispatch() and useState() at the top before the return and after initiating the function.

 const state = useSelector((state) => state);
  const dispatch = useDispatch();

Now just update your return and call the reducer state.

    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>test {state.firstState.gender}</p>
      </header>
    </div>

Once you are done your App.js should look like this.

import React, { useEffect } from "react";

import logo from "./logo.svg";
import "./App.css";

import { firstAction } from "./redux/action";
import { useDispatch, useSelector } from "react-redux";

function App() {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
  // To fetch data when component mounts.
  useEffect(async () => {
    await dispatch(firstAction());
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>test {state.firstState.gender}</p>
      </header>
    </div>
  );
}

export default App;

Now if you save and run the project you should see male or female. According to what the API returned. Like this.

Hopefully, you were able to get it running as well, But if in any case, you faced any issues you can ask me in the comment section I'll try my best to answer your questions, or if you want to the git repo you can find it here a follow and a star would be appreciated 😃

Bye for now.

Rayan Abid Github

Rayan Abid Youtube

An open source Javascript game engine.

Rayan Abid — Sat, 08 Jan 2022 12:16:16 +0000

Introduction

Well, we've all been there you want to make games but don't want to invest time in downloading some game engine and learn the language to make games on it, or the software ends up being too expensive. What I have for you today hits most of these points. It's open-source, it's free, and If you're familiar with javascript then you are all good to go.

Say hello to ct.js the open-source 2d game engine that is available on windows, mac, and Linux as well. It is small in size with great documentation to get you started with building your first game. I knew nothing about game development or ctj.s but was able to get a simple space-shooter game in about an hour.

Basic concepts

Importing Textures

Importing textures is super easy when you are in a project just goto the textures tab and import your textures.

Easy character animations

Animating your characters is also handled by CT.js you just have to import your character sprite sheet. You can find many sprite sheets from the sprite resource.

Builds

Ct.js allows you to build your games for web as well as desktop using the same code. And if you are skilled enough there is also a way of building your games using cordova to release it for android and ios as well.

Conclusion

CT.js is a very cool game engine if you are someone like me who knows javascript and has a low spec machine that can't run unity but want to build games. You can learn more about CT.js from this link

Have you tried CT.js yet or know of any other game engines do let me know and share your thoughts as well. Thank you for your time.

The basics of web

Rayan Abid — Fri, 22 Oct 2021 06:50:43 +0000

HTML is also known as a hypertext markup language which is a standard markup language that can be used to represent information on the internet. HTML plays a very important role in the journey of a front-end web developer as it is used to write down the structure of the website.

Now that the technical introduction is out of the way let's try to understand it in a nonexclusive way.

Let's think of a building now to compare it with HTML you can say that the structure of the building is what you would write for a website using HTML. Hope that makes it clear and helps you in understanding the bigger picture. But now one question that would be popping into your mind is then what will we use to make the building prettier i.e: painting etc. That is where CSS comes into play but that is our next topic.

Sidenote

I also have a video on this topic if you prefer watching instead of reading. In this video I go in depth in HTML.

Where to get started?

There are a lot of online resources that you can use to learn HTML which are as follows:

### W3Schools

W3Schools

W3Schools is a freemium educational website for learning coding online. Developed in 1998, its name is derived from the World Wide Web. It is run by Refsnes Data in Norway.

W3Schools has a collection of documents for all your HTML needs and it is not just HTML it includes education materials for all the other languages as well such as: Javascript, CSS etc.

### freeCodeCamp

freeCodeCamp

freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. They also have many video tutoriols as well if you think that you can learn more visually.

### Mike Dane

Mike Dane's website

Mike Dane has one simple goal, to create the highest quality and entertaining educational content on the internet.

and I gotta say I don't disagree with him. As he is the first person that I went to learn and understand the basics of HTML CSS and JS. He also has great content for C++ as well.

### Codecademy

Codecademy

Codecademy is an American online interactive platform that offers free coding classes in 12 different programming languages including Python, Java, Go, JavaScript, Ruby, SQL, C++, C#, Swift, and Sass, as well as markup languages HTML and CSS.

And there you go what do you think do you have any more places that I missed or I haven't listed down do let me know and if you feel like I can improve in any please do let me know and share your thoughts down below.

Thank you for your time.

Follow me on Github,Youtube

Image provided from unsplash.