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

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

• My Portfolio
• Twitter ShareefBhai99
• Linkedin

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?

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, and My Linkedin

In a typical React application, data is passed top-down (parent to child) via props. but such usage can be cumbersome for certain types of props (e.g., locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. read more

What is contextAPI?

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

So, now that we know why we need context and what context is, let's dive into the coding part.

Before starting, set up a basic version of the next JS app with typescript

npx create-next-app context-api
npm install --save-dev typescript @types/react

Create a folder called context, here we will store all the different contexts. For now, create an AuthContext.tsx file

Step 1:- Create context type

Inside AuthContext.tsx. As we are using TypeScript we have to create types for our context

type authContextType = {
    user: boolean;
    login: () => void;
    logout: () => void;
};

Step 2:- Create context default values

const authContextDefaultValues: authContextType = {
    user: null,
    login: () => {},
    logout: () => {},
};

Step 3:- createContext & useContext

import { createContext, useContext } from "react";

const AuthContext = createContext<authContextType>(authContextDefaultValues);

export function useAuth() {
    return useContext(AuthContext);
}

Step 4:- Create a provider function

type Props = {
    children: ReactNode;
};

export function AuthProvider({ children }: Props) {
    const value = {

    }
    return (
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    );
}

We will wrap this AuthProvider function, where we want to use our context, and the value prop will have the values of authContextType. We will fill in the values in the next step.

Step 5:- Fill up values

export function AuthProvider({ children }: Props) {
    const [user, setUser] = useState<boolean>(null);

    const login = () => {
        setUser(true);
    };

    const logout = () => {
        setUser(false);
    };

    const value = {
        user,
        login,
        logout,
    };

    return (
    ...

Now our context is ready to use.

Step 6:- Enable AuthProvider

First, we have to enable AuthProvider, to do so edit the default _app.js file like so

import { AuthProvider } from "../context/AuthContext";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
    return (
            <AuthProvider>
                <Component {...pageProps} />
            </AuthProvider>
    );
}

export default MyApp;

Step 7:- Using context Now remove all the template nextJS generate and simply import the context

import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useAuth } from "../context/AuthContext";

export default function Home() {
    const { user, login, logout } = useAuth();

    return (
        <div className={styles.container}>
            <Head>
                <title>Context-api with TypeScript and nextJS</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main className={styles.main}>
                <div>
                    <h1>Hello Context</h1>
                    <h2>User: {user ? "login" : "logout"}</h2>
                    <div>
                        <button onClick={login}>Login</button>
                        <button onClick={logout}>Logout</button>
                    </div>
                </div>
            </main>
        </div>
    );
}

Okay, many things happen here let me break it down, first, we import the context hook "useAuth" then inside our Home() we destructure all the values from "useAuth" then we use it as per our requirement.

See the live demo Github repo My portfolio Linkedin twitter

If you are using ReactJS or NextJS(React Framework) to make your blog then rendering MARKDOWN is so much easy with React-Markdown

React-Markdown comes with build-in TypeScript support 🤩. Let's stop talking and start coding.

Basic setup

• I am using NextJS with TypeScript for this blog.
• I have a folder/directory with the name post containing all the posts and inside the post folder/directory I have two posts.
• You can find the code on my GitHub (Link will be shared at the end).

// pages/index.tsx
import { FC, Fragment } from "react";
import Link from "next/link";

interface Props {}

const Home: FC<Props> = () => (
    <Fragment>
        <h1>Hello Next.js 👋</h1>
        <div className="posts-container">
            <Link href="/posts/first-post">First post</Link>
            <Link href="/posts/second-post">Second post</Link>
        </div>
    </Fragment>
);

export default Home;

• I am keeping things simple to focus more on React-Markdown

These two posts are taken from Maximilian course on NextJS

• Then we have a file to show individual posts and render our MARKDOWN

// /pages/posts/[slug].tsx

import { FC, Fragment } from "react";
import { GetStaticProps, GetStaticPropsContext, GetStaticPaths } from "next";
import { PostType } from "../../interfaces";
import { getPostData, getPostsFiles } from "../../lib/post-utils";
import PostContent from "../../components/PostContent";

interface Props {
    post: PostType;
}

const BlogPost: FC<Props> = ({ post }: Props) => {
    return (
        <Fragment>
            // /components/PostContent.tsx
            <PostContent post={post} />
        </Fragment>
    );
};

export const getStaticProps: GetStaticProps = async (context: GetStaticPropsContext) => {
    const { slug } = context.params;
    const postData = getPostData(slug);
    return {
        props: {
            post: postData,
        },
        // regenerate after every 600s(10mins)
        revalidate: 600,
    };
};

export const getStaticPaths: GetStaticPaths = async () => {
    const postFilenames = getPostsFiles();
    const slugs = postFilenames.map((fileName) =>
        fileName.replace(/\.md$/, "")
    );
    return {
        paths: slugs.map((slug) => ({ params: { slug: slug } })),
        fallback: false,
    };
};

export default BlogPost;

Here I set up the basic /posts/[slug] page, I will not go into details, let's Work on the PostContent component

Let's work with React-Markdown.

• Install React-Markdwon

     npm i react-markdown
  

  Now the easiest way to render MARKDOWN

import React from "react";
import { PostType } from "../interfaces";
import ReactMarkdown from "react-markdown";

interface Props {
    post: PostType;
}

const PostContent = ({ post }: Props) => {
    return (
        <article className="content">
            <ReactMarkdown>{post.content}</ReactMarkdown>
        </article>
    );
};

export default PostContent;

Wooowww! with just one line we render MARKDOWN But if we go to the first blog it doesn't show an image because we get only the name of the file, we have to generate the path for the image and we can also customize how an image should display.

Let's optimize & customize the image.

• ReactMarkdown has components prop which help us to map tag name to React Component
• components take an object which contains the mapping of HTML tags.

Here, we are checking if a P tag has an image element if yes, then we are rendering our own image with our custom styles and if it is not an image then we are just returning the content of it.

...
const PostContent = ({ post }: Props) => {
    return (
        <article className="content">
            <ReactMarkdown
                components={{
                    p: ({ node, children }) => {
                        if (node.children[0].tagName === "img") {
                            const image: any = node.children[0];
                            return (
                                <div className="image">
                                    <Image
                                        src={`/images/${image.properties.src}`}
                                        alt={image.properties.alt}
                                        width="600"
                                        height="300"
                                    />
                                </div>
                            );
                        }
                        // Return default child if it's not an image
                        return <p>{children}</p>;
                    },
                }}
            >
                {post.content}
            </ReactMarkdown>
        </article>
    );
};

Let's add syntax highlighting for CODE blocks

• Firstly install syntax-highlighter

  npm i react-syntax-highlighter @types/react-syntax-highlighter
  

• react-syntax-highlighter makes it very easy to style our CODE blocks.
• Here I am using 'materialDark' but you have many options and many themes to apply for your site.

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { materialDark } from "react-syntax-highlighter/dist/cjs/styles/prism";

const PostContent = ({ post }: Props) => {
    return (
        <article className="content">
            <ReactMarkdown
                components={{
                    p: ({ node, children }) => {
                        ...
                    },
                    code({ className, children }) {
                        // Removing "language-" because React-Markdown already added "language-"
                        const language = className.replace("language-", "");
                        return (
                            <SyntaxHighlighter
                                style={materialDark}
                                language={language}
                                children={children[0]}
                            />
                        );
                    },
                }}
            >
                {post.content}
            </ReactMarkdown>
        </article>
    );
};

Closing here 👋👋👋

This is Shareef. My Portfolio Twitter ShareefBhai99 GitHub repo of this blog Linkedin My other Blogs

Cover photo by [Dustin Curtis] (https://github.com/dcurtis/markdown-mark/tree/master/svg)