Forem: Mohammed Nadeem Shareef

Maximizing Score with Tokens - 948 - Bag of Tokens in Go

Mohammed Nadeem Shareef — Mon, 04 Mar 2024 06:38:52 +0000

Introduction

Welcome to the second post of my "Journey into GoLang" series! In this series, I'll document my GoLang programming exploration by solving LeetCode problems. Today, we are solving the 948 - Bag of Tokens problem.

The Problem Description:

You start with an initial power of power, an initial score of 0, and a bag of tokens given as an integer array tokens, where each tokens[i] donates the value of tokeni.

Your goal is to maximize the total score by strategically playing these tokens. In one move, you can play an unplayed token in one of the two ways (but not both for the same token):

Face-up: If your current power is at least tokens[i], you may play token, losing tokens[i] power and gaining 1 score.
Face-down: If your current score is at least 1, you may play token, gaining tokens[i] power and losing 1 score.

Return the maximum possible score you can achieve after playing any number of tokens.

Example:
Let's consider an example to understand the problem better:
Input:
tokens = [200, 100]
power = 150
Output:
1

LeetCode Link

Approach:

To solve this problem efficiently. We'll sort the tokens array to prioritize playing tokens with lower values first. Then, we'll iterate through the tokens array, playing tokens face-up if possible, and face-down if necessary. We'll keep track of the maximum score achieved throughout the process.

import (
    "fmt"
    "sort"
)

func bagOfTokensScore(tokens []int, power int) int {
    sort.Ints(tokens)
    left, right, score := 0, len(tokens)-1, 0
    maxScore := 0
    for left <= right {
        if power >= tokens[left] {
            power -= tokens[left]
            left++
            score++
            if score > maxScore {
                maxScore = score
            }
        } else if score > 0 {
            power += tokens[right]
            right--
            score--
        } else {
            break
        }
    }

    return maxScore
}

func main() {
    fmt.Println(bagOfTokensScore([]int{200, 100}, 150)) // Output: 1
}

Github Code

Thank you for joining me on this journey, and I look forward to sharing more discoveries with you in the upcoming posts!

Social Links

Twitter: @shareef99_
LinkedIn: Nadeem Shareef
Github: shareef99

Journey into GoLang: Understanding Go by solving LeetCode problems

Mohammed Nadeem Shareef — Sun, 03 Mar 2024 13:09:49 +0000

Introduction:

Welcome to the first post of my "Journey into GoLang" series! In this series, I'll be documenting my exploration of GoLang programming through solving LeetCode problems. Today, we kick off our journey by solving the classic Two Sum problem.

The Problem Description:

Given an array of integers and a target integer, find the indices of two numbers that add up to the target.

Initial Solution

func twoSum(nums []int, target int) [2]int {
  result := [2]int{}
  for i := 0; i < len(nums); i++ {
    for j := 0; j < len(nums); j++ {
      if i == j {
        continue;
      }

      if nums[i] + nums[j] == target {
        result[0] = j;
        result[1] = i;
      }
    }
  }
  return result;
}

In our initial approach, we took a straightforward route. We add nested loops to iterate through the array and find the desired indices. While this solution worked, it had a time complexity of O(n^2), making it suboptimal for larger datasets.

Optimized Solution

func optimizeTwoSum(nums []int, target int) [2]int {
  result := [2]int{}
  m := make(map[int]int)
  for i := 0; i < len(nums); i++ {
    m[nums[i]] = i
  }

  for i := 0; i < len(nums); i++ {
    if _, ok := m[target - nums[i]]; ok && m[target - nums[i]] != i {
      result[0] = i
      result[1] = m[target - nums[i]]
      break
    }
  }
  return result
}

We create a hash map, hash map keys are the values of nums and the hash map value is an index of the value of nums.
We use the hash map to find the complement of the target.
Complement means the difference between the target and the value of nums (x + y = t => x = t - y).
If the complement exists in the hash map, we return the index of the complement and the index of the value of nums.
Map returns two values, the first value is a value stored under the key, and the second value is a boolean indicating whether the key exists or not.
If the requested key doesn’t exist, we get the value type’s zero value. In this case, the value type is int, so the zero value is 0. The second value will be false.

Github Code Link

Join the Journey:
This post marks just the beginning of our journey into GoLang and algorithmic problem-solving. Stay tuned for more insights, challenges, and optimizations as we delve deeper into the world of programming.

Conclusion:
As we conclude our first installment of the "Journey into GoLang" series, I invite you to learn with me. Together, let's understand GoLang, one LeetCode problem at a time.

Thank you for joining me on this journey, and I look forward to sharing more discoveries with you in the upcoming posts!

Social Links

Twitter: @shareef99_
LinkedIn: Nadeem Shareef
Github: shareef99

Why React is not dying!

Mohammed Nadeem Shareef — Mon, 01 May 2023 14:39:48 +0000

It's no secret that the world of front-end development is constantly evolving. New frameworks and libraries are released at a rapid pace, leaving developers wondering if their current tool of choice is becoming outdated. React, one of the most popular front-end frameworks, is no exception to this trend. Despite rumors of its decline, React is still widely used and remains a top choice for many developers. So, why is React not dying? Let's take a closer look.

React is not dying

React has been around for more than a decade, and during this time, it has become one of the most popular front-end frameworks in the world. Despite the constant influx of new frameworks and libraries in the JavaScript world, React's dominance remains unchallenged. In fact, according to the latest state of JS survey, React is still has 83% of retention. This means that 83% of developers who have used React in the past are still using it today. This is a clear indication that React is not dying anytime soon.

Community

One of the reasons why React is not dying is its thriving community. With millions of developers using the framework, there is a wealth of knowledge and resources available to anyone who wants to learn or improve their React skills.

Furthermore, There are also many open-source projects built with React, which can solve virtually any problem you might encounter while developing your application. You can search react + your problem and you will find a solution. For example you want to add QR Code to your React App, you can search react qr code and you will find a package to add QR Code.

I can give you a lot of examples but I think you got the point.

Job Market

React's popularity and widespread adoption by companies have led to a significant demand for React developers in the job market. Many companies have already developed web apps and websites using React, and there are new projects being started every day. This means that there is a high demand for skilled React developers who can work on these projects.

Moreover, React's popularity and large community make it an attractive option for new developers looking to learn front-end development. As more and more developers learn React, the demand for React developers will only increase, further strengthening React's position in the job market.

In conclusion, you need a job? Learn React.

React's cautious approach towards adopting new features from other frameworks

A few weeks ago, there was a lot of fuzz about SolidJS fine-grained reactivity, how it best and tone of it was like why every framework doesn't have it. But in fact VueJS has fine-grained reactivity with Composition API from years now. And I think Qwik has it too. The icing on the cake is that Angular team decided to add fine-grained reactivity in Angular next version too. If everyone is doing it then why not React?. I think Andrew Clark has already answered this question in his twitter.

NPM downloads

The popularity of a framework can be difficult to measure accurately, but NPM downloads provide a good indication of a framework's adoption and usage. According to npm trends, React continues to dominate the front-end framework space with the highest number of downloads. In fact, the gap between React and the second most downloaded framework, VueJS, is quite significant at approximately 16 million downloads. Angular, which is another popular front-end framework, ranks third with a gap of around 20 million downloads. These numbers suggest that React is still in high demand and is being used extensively by developers for building web applications.

Competition is good

Competition is a driving force behind innovation and progress. The competition between front-end frameworks like React, Angular, and Vue has led to improvements in each framework over time. React's success has also inspired the development of new and innovative front-end frameworks that build on its foundation. Examples include Solid, Qwik and etc.

Framework agnostic libraries/tools

As a front-end developer, it can be challenging to keep up with all the latest frameworks and libraries that are constantly being released. Often, we have a preferred tool that we are most comfortable with and have invested time and resources into learning. However, this can limit our ability to explore and try out new frameworks.

This is where framework agnostic libraries come in. These libraries are designed to work with any framework, making it easier for developers to switch between frameworks. This can be especially helpful for developers who want to try out a new framework but are hesitant to do so because of the tools lacking in the new framework.

One example of a framework agnostic library is Tanstack, which offers a suite of libraries for building web applications, including table, query, form, and more. Another example is AuthJS (formally NextAuth), which is a user authentication library that can be used with any framework. and some new small libraries like t3-env

By creating these framework agnostic libraries, developers are not only making it easier for other developers to try out new frameworks, but they are also contributing to the growth and development of the web development community as a whole.

Meta Frameworks

Meta frameworks are tools built on top of React that provide additional functionality and solutions to specific problems. While there are many meta frameworks available for React, each one offers a unique set of features and benefits.

Some popular meta frameworks for React include NextJS and Remix, which offer better server-side rendering capabilities. These frameworks are ideal for building server-rendered React applications, enabling faster page loads and improved search engine optimization (SEO).

BlitzJS is another popular meta meta framework(build on top of NextJS) that provides a better full-stack experience. It offers built-in features like authentication, API routes, and database integrations, simplifying the process of building full-stack React applications.

RedwoodJS takes this a step further, offering a full-stack experience with GraphQL. This framework allows developers to quickly build scalable applications with a single language and a single stack.

For those looking to generate static websites, GatsbyJS is a popular choice. It provides a streamlined development experience and fast performance, making it perfect for building static sites with React.

Lastly, Docusaurus is a meta framework designed specifically for creating documentation and blogging websites. It offers a range of customizable themes and built-in features, making it easy for developers to create professional-grade documentation and blogs.

Overall, the availability of meta frameworks in React ecosystem offers a range of solutions to developers, making it easier to build complex applications with less effort.

Netlify Blog

Netlify, a widely used hosting platform for static websites and applications, recently published a blog post sharing data on the most popular frameworks and libraries used by developers on their platform. The data revealed that React is the most commonly used framework on Netlify, with over 40% of developers leveraging it for their projects. In addition, the next two most popular frameworks are also based on React, including NextJS with a 14% share and GatsbyJS with an 8% share. This highlights the widespread popularity and adoption of React in the web development community, particularly for building static websites and applications.

New Features

React is a constantly evolving library that is always adding new features to make it easier for developers to build web applications. One of the latest advancements from the React team is the introduction of zero-bundle-size React Server Components. This feature aims to enable modern UX with a server-driven mental model, making it faster and more efficient to render web pages.

In addition, React recently announced a brand new compiler called React Forget. This compiler automatically generates the equivalent of useMemo and useCallback calls to minimize the cost of re-rendering, while still retaining React's programming model. This means that developers can focus on writing their code, and the compiler will take care of optimizing the performance of the application. With these new features, React continues to push the boundaries of what is possible in web development, making it easier and more efficient to create high-quality applications.

Conclusion

In conclusion, React has become a popular and widely adopted JavaScript library for building modern and dynamic web applications. Its declarative approach, efficient virtual DOM, and extensive ecosystem of third-party libraries have made it a top choice for developers worldwide. With its ongoing evolution and new features being added, React is expected to remain at the forefront of web development for years to come. Whether you're a beginner or an experienced developer, learning React can open up a world of opportunities and help you build cutting-edge applications.

Resources

Web Dev Simplified Are New Frameworks Replacing React?.
TkDodo's blog Why React isn't dying.
React's blog React Labs: What we have been working on (June 2022).
Netlify's blog Framework Popularity on Netlify.

Closing here 👋👋👋

This is Shareef.

Why I don't use LinkedIn and Why you should also!

Mohammed Nadeem Shareef — Thu, 05 May 2022 12:36:09 +0000

Hello Developers 🖐🖐

In this article, I'm discussing why I don't use LinkedIn much and why you should also stop using it. LinkedIn is used by millions of humans, as I am a developer I can only write about the perspective of a developer. Disclaimer everything in this article will be from the point of view of a developer.

Why you should have a LinkedIn account.

First and foremost, let's discuss why everybody tells you to have a LinkedIn account.

You will gain exposure to Hiring Managers and Recruiters
You will get offers from your LinkedIn profile.
You will get to know about Job Postings.
You can gain social proof of your skills and talents
LinkedIn can help rank your name on Google

These points seem fair and promising, but this is not the reality of LinkedIn today.

The Reality Check 🙀 !

It's all fake, fake, and fake. Yeah, you heard me right. It's all fake, what I see whenever I open my LinkedIn. MOTIVATION, Some random dude did some small thing and shared it by over-exaggeration, someone likes or comments on something, random job posting, which I would never apply to.

What I hate about LinkedIn

MOTIVATION, the number of motivational quotes that are there in my feed just makes me irritating. There are more people wanting to motivate than the number of people who want to get motivated.
Job alerts, I wonder who is posting tens of jobs on a daily basis. And the information about the job is useless. They want you to have the knowledge of all the programming languages from the time they are made 🙂🙂🙂. And the cherry on the cake it the pay range is not disclosed by the company. If the employers of LinkedIn read my blog (It will not reach them probably) please make the requirement limited and make the pay range mandatory.
Some likes or comments on something. For the sake of humanity I don't want to know what my connections are linking and commenting on, please just remove this feature or make it an optional feature so that people who want it can enable it (Hopefully no one wants to).
It's all fake. There is no measure to check if something is fake or not. For instance, I have added in my experience that I am working at Google as a Frontend Architecture from Jan 2020 and It is showing on my profile. Check it here.
I could go on like this for hours, but I think you get my point.

Alternatives of LinkedIn.

Github. Github is a great website to show your coding experience and your consistency through daily commits. However, it is only limited to developers.
Dev Community. Dev.to is a great blogging site, and I get plenty of offers from my Dev profile.
Hashnode. It is also a blogging site. It offers a lot of features free of cost.
Twitter. I don't promote Twitter as much as Github and Dev, but I would say it is better than LinkedIn.

Let me know what are your thoughts, agree, or disagree. Let me know in the comments.

Closing here
This is shareef

Bye, Bye, Captcha!

Mohammed Nadeem Shareef — Thu, 28 Apr 2022 10:02:06 +0000

A quick history about Captcha.

CAPTCHA is an abbreviation for Completely Automated Public Turing Test to Tell Computers and Humans Apart. Well, quite a long name. It was created to separate Bots from Humans. Initially, it was successful, but as humans fill in more and more Captchas, scammers use machine learning to catch up with the Captcha tests making captcha tests more difficult.

Captcha are everywhere on the internet.

Signup for any website. CAPTCHA!
Buying anything online. CAPTCHA!
Logging in on social media. CAPTCHA!

Well, now say bye-bye to CAPTCHAs and welcome to 2captcha

2captcha is a service that bypasses captchas for you. They use humans to solve captchas. 2Captcha is a human-powered image and CAPTCHA recognition service. The main purpose of it is to solve CAPTCHAS in a quick and accurate manner by human employees so that customers get instant access to a website that they are trying to access.

Human-powered CAPTCHA-solving service

2Captcha team solves your CAPTCHA with high accuracy.
To start using the service:

Register
Implement API
Send your CAPTCHAs
Get your answer as a text.

It’s quick and easy! 2Captcha provides low prices and high accuracy for your CAPTCHAs.

2Captcha for everyone.

2Captcha service is not limited to customers. They provide APIs in most programming languages.
Developers can easily implement 2Chaptcha API in their applications.

There are a few steps for solving the captcha problem and they are as follows:

simply send your image or captcha to their servers
Get the ID of your task by 2Captcha
Begin the cycle that checks if your task is completed.
Get the result instantly in mere just seconds.
Check out their YouTube channel
Blogs on implementation of their API

All Captchas are solved here

Normal Captcha
Text Captcha
Click Captcha
Rotate Captcha
reCaptcha V2
And a lot more
See all here

Let money decide

Now you do know 2captcha is cool, but what about money? How much do you have to pay for 2Captcha services?

The correct way of asking questions.

Mohammed Nadeem Shareef — Fri, 22 Apr 2022 15:54:19 +0000

Hello Developers

I am an intermediate developer. I had great mentors to whom I could ask any question and they would help me. Now, as time passes I get many questions from the juniors, but I think they lack the ability to ask a question properly. Well, you might ask who I am to lecture on this topic? I learned basically everything from asking questions and googling stuff.

Try to google before asking the question.

Google is an essential skill for any developer/programmer. Whenever you are struck first approve Google.

Example

Before Googling

You: How should I pass a child state to a parent state?.

Mentor: Have you googled it?.

You: No...

After Googling

You: I am unable to pass child state to parent state. I googled it and it says [this] and [this].

Mentor: Okay, do [this] and refer to [this] article.

Tell us the real problem.

Okay, let's say you are working on the front-end part of the project, and upon fetching data from the API you run into a CORS error. You google it and are still unable to solve it.

Example

before not mentioning the real problem.

You: I am trying to solve the CORS error and I did [this] and [this].

Mentor: CORS are tricky. I can't exactly solve your problem.

After mentioning the real problem.

You: While fetching the data from the API, I ran into a CORS error and I did [this] and [this].

Mentor: Maybe the API is not handling requests properly. Submit the response and logs to the backend team.

Some tips.

Try to solve before asking the question.
Google, Google, and Google.
Ask the real question, not the solution you are working on.
If you are stuck on a problem for too long, take a break.
And above all, ask the question.

HappyCoding
This is Shareef
My Twitter
My Linkedin

How to publish a CLI tool on NPM

Mohammed Nadeem Shareef — Fri, 15 Apr 2022 11:07:26 +0000

Hello Developers 🙌🙌🙌

Recently I wanted to create a CLI tool, but I only know JavaScript, so I researched and found out that we can create CLI applications using JavaScript. I published my CLI tool named track-task and will show you how to publish a package in NPM. You can download and use it.

npm i -g track-task

How to publish NPM package?

Step 1:- Initialize npm by npm init -y
It will create a default package.json file, which will look something like

{
  "name": "track-task",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Points to note here

Name should be unique, otherwise it will throw error while publishing.
Start with version 1.0.0 and remember to update to version whenever you make changes to your code.
Add a bin as " bin "./index.js" from this point your code will run.
Add keywords and author name to stand out.

Step 2:- Code your application.
Code your whole application and test it out locally and make sure to add #! /usr/bin/env node, it makes your file executable.

Step 3:- Add more info to package.json.
Add repository, bugs and homepage urls

{
  ...
  "repository": {
    "type": "git",
    "url": "git+https://github.com/shareef99/task-tracker.git"
  },
  "bugs": {
    "url": "https://github.com/shareef99/task-tracker/issues"
  },
  "homepage": "https://github.com/shareef99/task-tracker/#readme",
}

Step 4:- Publishing your CLI tool

Create npm account.
Login into npm account from terminal.

npm login

Enter the username and password.
Make sure you are ready to publish.
Publish your package.

npm publish

Congratulations ✨✨✨ You have published the npm package.

Step 5:- Updating package.
Don't forget to change the version of in package.json file after update your code. Once you are done with the coding, run npm publish.

Thanks and Happy Coding

Closing here 👋👋👋

This is Shareef.
My Portfolio
Twitter ShareefBhai99
Linkedin
My other Blogs

How to hide password value in inspect using React and Formik

Mohammed Nadeem Shareef — Mon, 06 Dec 2021 16:56:04 +0000

Hello Developers 🤩🤩

Have you ever logged in to Facebook?
Have you ever inspected the Facebook login page?
If not go to Facebook and try inspecting it, you will find the value of the password filed is not showing.

We will replicate that behavior using React and Formik.

Creating Project

npx create-react-app my-app

After project setup, install formik.

npm install formik --save

Basic setup

Setup a basic template for email and password input with submit button.

import { useFormik } from "formik";

function App() {
    return (
        <form>
            <input name="email" type="email" placeholder="email" />
            <input 
                name="password"
                type="password"
                placeholder="password"
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default App;

Implementing Formik

import { useFormik } from "formik";

function App() {
    const handleSubmit = (values) => {
        console.log(values);
    };

    const formik = useFormik({
        initialValues: {
            email: "",
            password: "",
        },
    });

    return (
        <form
            onSubmit={(e) => {
                e.preventDefault();
                handleSubmit(formik.values);
            }}
        >
            <input
                name="email"
                type="email"
                placeholder="email"
                {...formik.getFieldProps("email")}
            />
            <input
                name="password"
                type="password"
                placeholder="password"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default App;

Now check the value in Inspect.
Kaboom 🔥🔥🔥
No value in Inspect.

Live Preview

Closing here 👋👋👋

Github Code Repo
This is Shareef.
My recent project yourounotes
My Portfolio
Twitter ShareefBhai99
Linkedin
My other Blogs

Upgrade to firebase V9 NOW!!!

Mohammed Nadeem Shareef — Mon, 29 Nov 2021 14:34:32 +0000

Hello Developers 👋👋

Firebase V9 is here and it is awesome...

I upgraded my project yourounotes to firebase V9 and the results were impressive

Responses time drop from 2s to 307ms, 85% faster.

I go all in and update everything, from auth, to firestore, to firebase storage...

I ran into many bugs and I have to read a lot of documentation and it was all worth it in the end.

I am writing blogs on almost everything related to firebase

Started last week with auth.

Read how to add google login functionality with firebase V9

Would love to read about your experience with firebase V9.

Closing here 👋👋👋

This is Shareef.
My recent project yourounotes
My Portfolio
Twitter ShareefBhai99
Linkedin
My other Blogs

Convert Excel to JSON in ReactJS in just 2 steps

Mohammed Nadeem Shareef — Tue, 23 Nov 2021 15:20:54 +0000

Hello Developers 🙌

Today we will see how to convert Excel to JSON

We will use xlsx package.

No more talking let's jump into the coding part.

Install `xlsx` package

npm i xlsx

Create a basic structure for file upload


<form>
    <label htmlFor="upload">Upload File</label>
    <input
        type="file"
        name="upload"
        id="upload"
        onChange={readUploadFile}
    />
</form>

Convert Excel file to JSON

const readUploadFile = (e) => {
    e.preventDefault();
    if (e.target.files) {
        const reader = new FileReader();
        reader.onload = (e) => {
            const data = e.target.result;
            const workbook = xlsx.read(data, { type: "array" });
            const sheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[sheetName];
            const json = xlsx.utils.sheet_to_json(worksheet);
            console.log(json);
        };
        reader.readAsArrayBuffer(e.target.files[0]);
    }
}

Kaboom!🔥 in just two simple steps, you can convert Excel to JSON

HappyCoding

Closing here 👋👋👋

This is Shareef.
My recent project yourounotes
My Portfolio
Twitter ShareefBhai99
Linkedin
My other Blogs

Firebase V9 LogIn with Google in React and NextJS

Mohammed Nadeem Shareef — Sun, 07 Nov 2021 15:49:08 +0000

The easiest way to add authentication to your web app is through Firebase authentication.

Before continuing with adding authentication, make sure to add firebase to your project. And I am using Context API as we need authentication on every page of the web app.

The blog doesn't show how to setup context. You can see my other blog on ContextAPI using NextJS and TypeScript

Enough of talking, Let's get started.

1. Install firebase

npm install firebase

2. Firebase setup

import { initializeApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
    apiKey: "apiKey",
    authDomain: "authDomain",
    projectId: "projectID",
    storageBucket: "storageBucket",
    messagingSenderId: "messagingSenderID",
    appId: "appID",
    measurementId: "measurementID",
};

if (!getApps().length) {
    initializeApp(firebaseConfig);
}

export const auth = getAuth();

export default firebaseConfig;

here we are initializing the firebase app then exporting the getAuth function as auth.

3. Setting up auth functionality

//Inside the AuthContext file.

import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { auth } from "../firebase";

// Inside AuthProvider
const provider = new GoogleAuthProvider();

const login = () => {
    signInWithPopup(auth, provider)
        .then((result) => {
            // This gives you a Google Access Token. You can use it to access the Google API.
            const credential = GoogleAuthProvider.credentialFromResult(result);
            const token = credential?.accessToken;
            // The signed-in user info.
            const user = result.user;
            console.log({ credential, token, user });
        })
        .catch((error) => {
            // Handle Errors here.
            const errorCode = error.code;
            const errorMessage = error.message;
            // The email of the user's account used.
            const email = error.email;
            // The AuthCredential type that was used.
            const credential = GoogleAuthProvider.credentialFromError(error);
            console.log({ errorCode, errorMessage, email, credential });
        });
};

const logout = () => {
    auth.signOut();
    console.log("logout");
};

Now as login and logout functions are ready, It's time to use them.

4. Implementing login and logout functionality


// Import useAuth from context
import { useAuth } from "../context/AuthContext";

// Destructure login and logout functions.
const { login, logout } = useAuth();

...

return (
    <div>
        <button onClick={login}> Login </button>
        <button onClick={logout}> Logout </button>
    </div>
);

5. Listening to the auth state.

// Inside Context.
import { useEffect } from "react";
import { onAuthStateChanged } from "firebase/auth";

useEffect(() => {
    onAuthStateChanged(auth, (user) => {
        if (user) {
            const uid = user.uid;
            console.log({ uid });
        } else {
            console.log("no user");
        }
    });
}, []);

Thanks for reading, I have used ContextAPI here, you can read my blog on ContextAPI with NextJS and TypeScript

Closing here 👋👋👋

This is Shareef.
My recent project yourounotes
My Portfolio
Twitter ShareefBhai99
Linkedin
My other Blogs

DBMS Employee and Department

Mohammed Nadeem Shareef — Mon, 25 Oct 2021 18:42:45 +0000

Solution

Creating department table.


CREATE TABLE DEPARTMENT (
    DEPTNO NUMBER(10)
    CONSTRAINT DEPARTMENT_DEPTNO_PK PRIMARY KEY,
    DEPTNAME VARCHAR2(20)
    CONSTRAINT DEPARTMENT_DEPTNAME_UN UNIQUE,
    LOCATION CHAR(15)
    CONSTRAINT DEPARTMENT_LOCATION_NN NOT NULL
);

Creating employee table.


CREATE TABLE EMPLOYEE (
    EMPNO NUMBER(10)
    CONSTRAINT EMPLOYEE_EMPNO_PK PRIMARY KEY,
    EMPNAME VARCHAR2(20)
    CONSTRAINT EMPLOYEE_EMPNAME_UN UNIQUE,
    DEPTNO NUMBER(10)
    CONSTRAINT EMPLOYEE_DEPTNO_BR REFERENCES DEPARTMENT(DEPTNO),
    MANAGER NUMBER(10)
    CONSTRAINT EMPLOYEE_MANAGER_SR REFERENCES EMPLOYEE(EMPNO)
);

Inserting values into department table


INSERT INTO DEPARTMENT(DEPTNO, DEPTNAME, LOCATION)
VALUES (&DEPTNO, &DEPTNAME, &LOCATION);

press "/" for inserting second record and so on.

Inserting values into employee table


INSERT INTO EMPLOYEE(EMPNO, EMPNAME, DEPTNO, MANAGER)
VALUES (&EMPNO, &EMPNAME, &DEPTNO, &MANAGER);

press "/" for inserting second record and so on.

Program is completed here, we have created both the tables and relationship between them.
To show the department table sql SELECT * FROM DEPARTMENT
To show the employee table sql SELECT * FROM EMPLOYEE
To show both the table


SELECT * FROM DEPARTMENT, EMPLOYEE WHERE DEPARTMENT.DEPTNO = EMPLOYEE.DEPTNO

First Question
DBMS Student Table

Closing here 👋👋👋

This is Shareef.
My recent project yourounotes
My Portfolio
Twitter ShareefBhai99
Linkedin
My other Blogs

Forem: Mohammed Nadeem Shareef

Maximizing Score with Tokens - 948 - Bag of Tokens in Go

Introduction

The Problem Description:

Approach:

Journey into GoLang: Understanding Go by solving LeetCode problems

Introduction:

The Problem Description:

Initial Solution

Optimized Solution

Why React is not dying!

React is not dying

Community

Job Market

React's cautious approach towards adopting new features from other frameworks

NPM downloads

Competition is good

Framework agnostic libraries/tools

Meta Frameworks

Netlify Blog

New Features

Conclusion

Resources

Why I don't use LinkedIn and Why you should also!

Why you should have a LinkedIn account.

The Reality Check 🙀 !

What I hate about LinkedIn

Alternatives of LinkedIn.

Bye, Bye, Captcha!

A quick history about Captcha.

Captcha are everywhere on the internet.

Well, now say bye-bye to CAPTCHAs and welcome to 2captcha

Human-powered CAPTCHA-solving service

2Captcha for everyone.

All Captchas are solved here

Let money decide

The correct way of asking questions.

Try to google before asking the question.

Example

Tell us the real problem.

Example

Some tips.

How to publish a CLI tool on NPM

How to publish NPM package?

How to hide password value in inspect using React and Formik

Creating Project

Basic setup

Implementing Formik

Upgrade to firebase V9 NOW!!!

Convert Excel to JSON in ReactJS in just 2 steps

Install xlsx package

Create a basic structure for file upload

Convert Excel file to JSON

Firebase V9 LogIn with Google in React and NextJS

1. Install firebase

2. Firebase setup

3. Setting up auth functionality

4. Implementing login and logout functionality

5. Listening to the auth state.

DBMS Employee and Department

Solution

Install `xlsx` package