DEV Community: muneebejazz

Complete Guide to install mongdb driver for XAMPP PHP

muneebejazz — Mon, 10 Oct 2022 07:20:45 +0000

Step 1:
Make sure that have downloaded an install the mongodb community edition if not download it from

https://www.mongodb.com/try/download/community2

Step 2:

Download the Mongodb PHP extension file from
https://pecl.php.net/package/mongodb

For Windows Users click the DLL button to download the Windows version of the extension
Make sure to download the file according to your PHP version.

Step 3:
Copy the downloaded php_mongodb.dll file to
C:\xampp\php\ext

Step 4:
Add the extension in php.ini File

method 1: open the php.ini file selected from xampp config and select php.ini

Find extension=php_

and add line
extension=php_mongodb.dll

method 2: open the php.ini file from C:\xampp\php\php.ini and follow the process from method 1.

Step 5:

create a testfile.php in folder C:\xampp\htdocs\

and add the code

<?php phpinfo(); ?>

and check if the mongodb extension is installed.

Antd Design: Table React

muneebejazz — Mon, 19 Sep 2022 07:17:14 +0000

Useful Stackoverflow Resources

https://stackoverflow.com/questions/44083948/using-react-component-in-ant-design-table

https://stackoverflow.com/questions/53778383/onmouseenter-on-a-cell-of-antd-table

https://codepen.io/gges5110/pen/GLPjYr?editors=0010

User Authentication in React using Context Api

muneebejazz — Mon, 11 Jul 2022 00:43:32 +0000

How to upload files in node.js using multer.

Understanding useEffect() lifeCycle hook in React with Examples

muneebejazz — Thu, 23 Jun 2022 19:41:00 +0000

useEffect hook corresponds to componentDidMount and componentDidUpdate depending on what we pass to the dependency array as the second parameter of useEffect method

Empty dependency Array useEffect(()=> {}, [])
The useEffect() will run once only for the lifecycle of the
component.

Example 1

Lets say we want to toggle (focus && display) input element whenever we press a button.

import React, { useState, useRef, useEffect } from "react";

const Test3 = () => {
  const [isEditing, setIsEditing] = useState(false);
  const textInputRef = useRef(null);
  useEffect(() => {
    console.log("useEffect Called.");
    if (isEditing && textInputRef.current) {
      textInputRef.current.focus();
    }
  }, [isEditing, textInputRef]);
  return (
    <div className="m-12 flex gap-2">
      <input
        ref={textInputRef}
        type="text"
        className={`border border-gray-400 px-3 py-1.5 rounded `}
        placeholder="Search"
        disabled={!isEditing}
      />

      <button
        className="bg-blue-500 text-white px-5 rounded"
        onClick={() => {
          setIsEditing((prev) => !prev);
        }}>
        Toggle Focus
      </button>
    </div>
  );
};

export default Test3;

react component dropdown & detect click outside react component

muneebejazz — Tue, 21 Jun 2022 20:27:55 +0000

import React, { useRef, useEffect, useState } from "react";

const Test = () => {
  const divRef = useRef();
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    function handleDocumentClick(e) {
      if (
        divRef.current &&
        !divRef.current.contains(e.target) &&
        divRef.current !== e.target
      ) {
        setIsOpen(false);
      }
    }

    document.addEventListener("click", handleDocumentClick);

    return () => {
      document.removeEventListener("click", handleDocumentClick);
    };
  }, []);

  return (
    <div>
      <button
        className="px-5 py-2 border border-gray-400 rounded"
        onClick={(e) => {
          e.stopPropagation();
          setIsOpen((prev) => !prev);
        }}>
        English
      </button>
      {isOpen && (
        <div
          ref={divRef}
          className="px-5 py-2 rounded border border-gray-400 rounded flex flex-col gap-3 inline-flex">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
            aut voluptatem reiciendis modi sapiente deleniti quaerat repellat,
            provident ea quas nemo voluptatum cupiditate perferendis iusto earum
            molestiae molestias ratione veniam.
          </div>
          <button>Arabic</button>
          <button>German</button>
        </div>
      )}
    </div>
  );
};

export default Test;

React Native

muneebejazz — Fri, 13 May 2022 22:21:26 +0000

React Navigation v6.x

Installation

1. Install in Expo Project

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
expo install @react-navigation/native-stack

2. Wrap your App.js with NavigationContainer component.

<NavigationContainer>
   // you app code goes here
</NavigationContainer>

3. React Native Stack Navigator

Create Native Stack Navigator

const Stack = createNativeStackNavigator()

React Portals

muneebejazz — Fri, 22 Apr 2022 16:55:15 +0000

Raact portals provide a way to render children into a DOM node that exists parent DOM hierarchy.

In react app the div with id root is the entry point, and all the DOM elements exits under root element.

React Portal provide ability to break out of this root and exists anywhere outside the scope of root div.

we will use ReactDom.createPortal(component, element)

we can create a PortalDemo functional component

import React from 'react'
import ReactDom from 'react-dom'
export Default function PortalDemo(){
   return ReactDom.createPortal(
       <h1>Portals Demo</h1>,
       document.getElementById('portal-root')
   )
}

Create beautiful gradient text in CSS with three lines of code!

muneebejazz — Mon, 18 Apr 2022 09:29:13 +0000

In this post I will walk you through about creating gradient text in css.

You can easily add gradient to your text by adding two properties in css to the element.

h1 {
background: linear-gradient(to right, #93fd33 0%,#1A9DF4 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

-webkit-background-clip:text , and -webkit-text-fill-color:transparent properties are must to add graident to your text.

Full Code


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Text Gradient</title>
    <meta name="description" content="How to make gradient text.">
    <style>
         body {
    background-color:black;
        }
.text1 {
    font-family:'Poppins';
    font-size:192px;
    margin:100px;
    background: linear-gradient(to right, #93fd33 0%,#1A9DF4 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


    </style>
  </head>
  <body>
    <h1 class="text1">Hello</h1>    
  </body>
</html>

Best Fonts families to visit

muneebejazz — Tue, 12 Apr 2022 08:19:16 +0000

Lato
Montserrat
Roboto
Poppins

How can I create low highlight under text or custom underline in html or css?

muneebejazz — Mon, 11 Apr 2022 09:21:47 +0000

In this small tutorial I will guide you how you can achieve the following low highlight effect or beautiful bold under line under your text.

How to Achieve it?

create a paragraph tag and inside it enclose the text you want to high within span tag with the class name you like.

HTML

<p class="hero-title">You can easily <span class="half-highlight-yellow-2">do underline</span> me.</p>

CSS

.half-highlight-yellow-2 {
  background:linear-gradient(180deg, transparent 60%, yellow 60%);
}

check it live on codepen
https://codepen.io/muneebejazio/pen/QWaxeBY

Github commands Cheatsheet

muneebejazz — Sun, 06 Feb 2022 19:51:14 +0000

//check if git is installed in the system
git --version

//set your name
git config --global user.name "John Doe"

//set your email id
git config --global user.email "example@gmil.com"

//edit the whole config file
git config --global --edit

//Initialize git repository
git init

//get the status of the files tracked by git
git status

//to track a file by git use (git add) command and then name of the file or folder to track
git add example_filename.py

// to track all the files use dot .
git add .

//to commit changes use (git commit) with -m flag for message for the commit
git commit -m "example_message"

//to see all of the commits git log command is used
git log

//to move between the commit changes use git checkout command
git checkout "hash_code_of_the_commit"

//to move the head to master
git checkout master

//to make a new branch
git branch example_branch_name

//to move to branch use checkout command
git checkout example_branch_name

//to create and move to the newly created branch use flag -b
git checkout -b branch_name

//to get the origin of the remote
git remote -v

//to set the origin of the remote repository
git remote add origin "https://github.com/example_repository

//renames the main branch to master
git branch -M master

//push the code into your repository on the github, or gitlab
git push -u origin master

//clone a repository from github, gitlab url
git clone "https://github.com/repo_url"

Common Github Errors

**
If you accidently include node_modules folder
then you need to remove it from the cache in order to get rid of node_modules resided in your github repo

git rm -r --cached node_modules