DEV Community: ihtesham510

React Ecosystem in 2023.

ihtesham510 — Sat, 17 Jun 2023 07:04:07 +0000

React Ecosystem in 2023

As the technology are evolving the tools and library are also evolving. recently the million.js was released that makes react 70% faster. For a beginner it can be quite challenging to chose the correct library.

Here i will list some react libraries which you can learn and become a react developer.

Build tools.

Routing

react router
tanstack router
if your are using nextjs you don't need a router because it comes with builtin router.

Client State Management

Server State Management

Form Handling

Testing

Styling

UI Components library

Animation

Data Vizualization

Table

Tanstack table

Internationalization (i18n)

DevTools

react developer tools
Redux dev tool
testing playground
react hook form dev tools
AxeDev Tool (Accessibility)
Tanstack query dev tools

How to install MongoDB on Ubuntu 22.0 LTS

ihtesham510 — Fri, 09 Dec 2022 13:00:17 +0000

Install the Dependencies

sudo apt update
apt install dirmngr gnupg apt-transport-https ca-certificates software-properties-common

Add MongoDB GDB key

wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add -

Create a list for MongoDB

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

update the local package Datebase

sudo apt-get update

install the mongodb using the following command

sudo apt-get install -y mongodb-org

if you run into an error like this

Some packages could not be installed. This may mean that you have
requested an impossible situation or if you are using the unstable
distribution that some required packages have not yet been created
or been moved out of Incoming.
The following information may help to resolve the situation:

The following packages have unmet dependencies:
 mongodb-org-mongos : Depends: libssl1.1 (>= 1.1.1) but it is not installable
 mongodb-org-server : Depends: libssl1.1 (>= 1.1.1) but it is not installable
E: Unable to correct problems, you have held broken packages.

Run the folloing commands:

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

sudo apt-get update

sudo apt-get install libssl1.1

Start the MongoDB service and enable it to start automatically after rebooting the system.

systemctl start mongod
systemctl enable mongod

Now, check the status of the MongoDB service.

systemctl status mongod

Output:

root@crown:~# systemctl status mongod
● mongod.service - MongoDB Database Server
     Loaded: loaded (/lib/systemd/system/mongod.service; enabled; vendor preset>
     Active: active (running) since Wed 2022-03-23 18:54:34 UTC; 51min ago
       Docs: https://docs.mongodb.org/manual
   Main PID: 3619 (mongod)
     Memory: 172.3M
        CPU: 18.403s
     CGroup: /system.slice/mongod.service
             └─3619 /usr/bin/mongod --config /etc/mongod.conf

To verify whether the installation has completed successfully by running the following command.

mongo --eval 'db.runCommand({ connectionStatus: 1 })'

Output:

root@crown:~# mongo --eval 'db.runCommand({ connectionStatus: 1 })'
MongoDB shell version v5.0.6
connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("9722b711-f1f0-43f2-aec6-f6172da9d237") }
MongoDB server version: 5.0.6
{
        "authInfo" : {
                "authenticatedUsers" : [ ],
                "authenticatedUserRoles" : [ ]
        },
        "ok" : 1
}

Creating Administrative MongoDB user

First, access the MongoDB shell.

mongo

Output:

root@crown:~#  mongo
MongoDB shell version v5.0.6
connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("08890b80-d543-47c1-8523-57ac3c66cf73") }
MongoDB server version: 5.0.6
================
Warning: the "mongo" shell has been superseded by "mongosh",
which delivers improved usability and compatibility.The "mongo" shell has been deprecated and will be removed in
an upcoming release.
For installation instructions, see
https://docs.mongodb.com/mongodb-shell/install/

Connect to the admin Database:

use admin

Output:

> use admin
switched to db admin

List the users and see if you can list the created user.

show users

Output:

> show users
{
        "_id" : "admin.mongoAdmin",
        "userId" : UUID("861b55a3-eaf2-4617-ac4e-34f5284f8a87"),
        "user" : "mongoAdmin",
        "db" : "admin",
        "roles" : [
                {
                        "role" : "userAdminAnyDatabase",
                        "db" : "admin"
                }
        ],
        "mechanisms" : [
                "SCRAM-SHA-1",
                "SCRAM-SHA-256"
        ]
}

This concludes the installation and setup of MongoDB on your Ubuntu 22.04 server.

Spice up your Ubuntu terminal (Using zsh and powerlevel10k repo.)

ihtesham510 — Sun, 13 Nov 2022 16:42:46 +0000

Install zsh

First install zsh using

sudo apt install zsh

now set zsh as your shell

chsh /bin/zsh

now restart your machine and open your terminal

if you see some option just press (2)

now check if your using the zsh by running the following command

echo $0

Install oh my zsh.

now install oh my zsh

using

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

here you will see something like this

now add your fonts

you can skip this step if you want

First install gnome tweaks

sudo apt install gnome-tweaks

if you want to add custom fonts just create a folder and name it ( .fonts ) and add all your fonts init

now open gnome tweaks

then int the font option change the monospace text to the fonts you want to use.

Powerlevel10k Repo.

Now you can install the power level 10k repo

**git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k**

now open .zshrc

gedit ~/.zshrc

now change the roggyrussell to powerlevel10k/powerlevel10k and restart the terminal.

Now customize it to your liking and by any chance if your not happy with your customization you can restart from the beginning.

here’s what i did.

and here’s the final result.

JavaScript String methods

ihtesham510 — Fri, 11 Nov 2022 07:10:51 +0000

Method Description

charAt(index)   //returns the character at the specified index
concat()    //joins two or more strings
replace()   //replaces a string with another string
split()         //converts the string to an array of strings
substr(start, length)   //returns a part of a string
substring(start,end)    //returns a part of a string
slice(start, end)   //returns a part of a string
toLowerCase()   //returns the passed string in lower case
toUpperCase()   //returns the passed string in upper9 case
trim()  //removes whitespace from the strings
includes()  //searches for a string and returns a boolean value
search()    //searches for a string and returns a position of a match

JS-Project for Beginners.

ihtesham510 — Wed, 02 Nov 2022 08:15:20 +0000

In this Project, we will generate a random number between 0 and 10, then tell the number if its even or odd. Then finally we'll add the numbers generated randomly.

1.HTML file

First create an html file and add the Title with <h1> tag then, <h2> tag which will contain our number, <h2> tag which will tell us that the number is even or odd. <h2> tag for title saying Total, finally a <h2> tag for number for counting our total number.
Finally add a button.
This is how it should look like

    <h1 class="gen">Random Number Generator</h1> 
     <h2 id="num">0</h2> 
     <h1 id="id">Unknown</h1> 
     <h1>Total</h1> 
     <h2 id="total">0</h2> 
     <button class="btn" onclick="random()">Generator</button> 
     <script src="index.js"></script>

2.Random Number Generator.

Now we will create our JavaScript file.
First create a function and in it assign a variable num

function random() {
  let num = Math.floor(Math.random() * 11);
}

The Math.random() will generate numbers between 0.1 to 0.9, but we don't want that number so we will multiply them with 11 and round the numbers using Math.floor() .

Now add the code to change our inner text to randomly generated number just below the variable we assigned;

document.getElementById("num").innerText = num;

When the function random() is called it will change our inner text to randomly generated number.

3.even() or odd()

Now for the second part tell if its even or odd.
first assign a variable a which will get our element form html

let a = document.getElementById("id");

second create two functions within our function
named even() and odd() which will change our html inner text

  function odd() {                           
     a.innerText = "Number is odd."; 
   } 
   function even() {      
     a.innerText = "Number is even."; 
   }

Now add an if and else statement, if the number modulo 2 equals to zero then execute function even() if not then execute odd() .

if (num % 2 == 0)  {  // if the number is even
    even();         // the even function will be called.
  } else {  // if not 
    odd();          // then odd function will be called.
  }

The % in the code represents modulo

4.Total numbers

Now we can begin our final part.
First assign a variable above our random() function

let total = 0;

Now add another variable in the random() function and assign it to get the element by its id getElementbyId()

let equl = document.getElementbyId("total");

now we will add another variable which will add number randomly generated with the total variable that we declared above the random() function

let total = total + num;

if you don't use the total variable like given above and use it like this :

sum = total + num;

Then it will not work.
because total numbers are not adding to the total variable continuously.
we can also write it that another way :

let total += num;

finally change the innerText of the html to the total variable

equl.innerText = total;

Now you finall code should look like this :

let total = 0;


function random() {
  let num = Math.floor(Math.random() * 11);
  document.getElementById("num").innerText = num;

  let a = document.getElementById("id");    // creating a variable to short the code. LOL.


  function odd() {                          // if called this will change the text to "Number id odd".
    a.innerText = "Number is odd.";
  }
  function even() {                         // if called this will change the text to "Number is even".
    a.innerText = "Number is even.";
  }


  if (num % 2 == 0)  {  // if the number is even
    even();         // the even function will be called.
  } else {  // if not 
    odd();          // then odd function will be called.
  }

  let equl = document.getElementById("total");  // creating a variable to short the code. LOL.
  total += num; // will add the previous value and number generated.
  equl.innerText = total;       // this will change the inner text to the total amount
}

I tried my best to make my-self clear if you don't understand then let me know in the comments.
Now lets test it.

As you can see when i clicked the button it randomly generated our number, told us its even and added the number with our total number

when i click the button again it again added the number to the total number and told us that number is odd.

Here is the live Demo
And is the Github repo : Javascript-Projects