DEV Community: Munavvar Sinan

Do you want to publish your own npm package ?

Munavvar Sinan — Sun, 30 Apr 2023 18:17:01 +0000

Hey everyone! Have you ever used an open-source package for your project and thought to yourself, "I could create something like this"? or you want to publish your own npm package but you're not sure where to start? Well, you're in luck because I'm here to walk you through the process step-by-step. By the end of this guide, you'll be able to confidently create and share your very own JavaScript module with the world. Let's begin!

First things first, let me explain what npm is. Npm stands for Node Package Manager, which is a tool used by developers to download, install, and manage packages. These packages are essentially modules of reusable code that you can use in your projects, making your work more efficient and organized.

Now, let's deliver the package!!

Hope you already have a package that need's to be published.

Step 1 - Setup an NPM account

Before you can publish an NPM package, you need to create an account on the NPM website. If you already have an account, you can skip this step.

Step 2 - Create your package files

While createating the package make sure to edit the name and version in the package.json

{
  "name": "my-package",
  "version": "1.0.0",
  "description": "My first NPM package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Your Name",
  "license": "MIT"
}

Here in the name field make sure to give a unique name because you cannot publish a package if the name already exsist.

Step 3 - Test your package

It is not a necessary part but before you publish a package make sure that its working as expected.

Step 4 - Publish your package

Once you've tested your package and you're ready to publish it, run the following command in your package directory:

npm publish

Step 5 - Updating your package

If you need to make changes to your package, such as adding new features or fixing bugs, you can update your package.json file and run the npm version command to update the version number. You can then run the npm publish command again to publish the updated package.

In conclusion, publishing your own NPM package can be an exciting and rewarding experience. By following these simple steps, you can share your code with the world and contribute to the open-source community. So go ahead, create something awesome and share it with the world!

OpenAI SQL Query generator with GPT-3 and Nextjs

Munavvar Sinan — Sat, 03 Dec 2022 18:46:04 +0000

Demo

What is OpenAI?

OpenAI is a research laboratory that specializes in the development and promotion of artificial general intelligence (AGI). It focuses on deep learning, reinforcement learning, robotics, natural language processing, and unsupervised learning. OpenAI was founded in 2015 by some of the most influential tech and science leaders in the world, including Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, and Wojciech Zaremba. OpenAI has developed several AI models such as GPT-3, Dialogflow, and OpenAI Playground. These models can be used to build applications such as language models, text generators, chatbots, and question-answering systems. OpenAI also provides support for developers who wish to use its services in their applications. This includes developing algorithms that are safe and robust, as well as providing open source software to enable the research community to build powerful AI applications. OpenAI also provides educational resources for those who wish to learn more about AI and AGI.

What is GPT-3

GPT-3 (Generative Pre-trained Transformer 3) is the third-generation language model of the OpenAI family. It is a powerful transformer-based natural language processing (NLP) system. GPT-3 provides an unsupervised learning platform that can generate human-like text, complete tasks like translation and question-answering, and create applications like chatbots and text generators. GPT-3 is trained on a massive dataset of natural language text and is capable of understanding and generating text in a wide variety of languages. GPT-3 is the largest NLP model ever created and is currently the most powerful language model available.

In this project we will be using GPT-3 and ADA model to create the SQL query generator application

Before starting out you need to create account in OpenAI and get you API key

Setting up

Go to OpenAI website and signup if you are using it for the first time. After that click on the API Keys option from the sidebar and click on create new secret key. Copy that API Key because it will be only showed once. If you lost that key you need to again generate a new one.

Beginning the project

create a next-js application

yarn create next-app app-name

Add OpenAi package

yarn add openai

create an .env file in your root folder and add openai api key to it

OPENAI_API_KEY = "YOUR_API_KEY"

Configure OpenAI in your /pages/api/ai.js file

const { Configuration, OpenAIApi } = require('openai');

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

export default async function handler(req, res) {
  let promptData = req.body.promptData;
  const response = await openai.createCompletion({
    model: 'text-ada-001',
    prompt: promptData,
    temperature: 0,
    max_tokens: 60,
    top_p: 1.0,
    frequency_penalty: 0.0,
    presence_penalty: 0.0,
    stop: ['#', ';'],
  });
  res.status(200).json({ data: `${response.data.choices[0].text}` });
}

Post function to get the response /pages/index.js

  const fetchData = async (event) => {
    event.preventDefault();
    if (query) {
      setIsLoading(true);
      const res = await fetch(`/api/ai`, {
        body: JSON.stringify({
          promptData: query,
        }),
        headers: {
          'Content-Type': 'application/json',
        },
        method: 'POST',
      });
      const data = await res.json();
      setData(data);
      setIsLoading(false);
    }
  };

complete /pages/index.js code

import { useState } from 'react';
import Footer from '../components/Footer';

export default function Home() {
  const [data, setData] = useState({ data: '' });
  const [query, setQuery] = useState();
  const [isLoading, setIsLoading] = useState(false);

  const fetchData = async (event) => {
    event.preventDefault();
    if (query) {
      setIsLoading(true);
      const res = await fetch(`/api/ai`, {
        body: JSON.stringify({
          promptData: query,
        }),
        headers: {
          'Content-Type': 'application/json',
        },
        method: 'POST',
      });
      const data = await res.json();
      setData(data);
      setIsLoading(false);
    }
  };

  return (
    <>
      <section className='bg-gray-900 text-white font-spacemono'>
        <div className='mx-auto max-w-screen-xl px-4 py-12 flex h-full '>
          <div className='mx-auto max-w-3xl mt-10 text-center'>
            <h1 className='bg-gradient-to-r from-green-300  via-blue-500 to-purple-600 bg-clip-text text-3xl font-bold text-transparent sm:text-5xl'>
              SQL QUERY GENERATOR
              <span className='sm:block '>
                BUILT WITH{' '}
                <a className='font-bold ' href='https://openai.com/api/'>
                  OPENAI.
                </a>
              </span>
            </h1>

            <p className='mx-auto mt-4  sm:text-lg sm:leading-relaxed'>
              OpenAI's SQL query generator is an AI-based system for
              automatically generating SQL queries from natural language text.
              The system is designed to take a user query in natural language
              and generate a valid SQL query.
            </p>
            <label className='block mt-20 text-start mb-5 text-xl font-bold text-gray-900 dark:text-white'>
              Enter your Query in Natural Language
            </label>

            <p className='text-start mb-3'>
              Example: Create a SQL request to find all users who visited from
              Chrome and Safari
            </p>
            <textarea
              type='text'
              cols='50'
              rows='5'
              placeholder="Note: This is a beta version of the SQL Query Generator. It's not perfect, but it's getting better every day. Please be patient and try to be as specific as possible."
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              className='block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'></textarea>

            <button
              type='submit'
              onClick={(e) => fetchData(e)}
              className='w-full mt-5 inline-block rounded border border-white bg-gradient-to-r from-green-300  via-blue-500 to-purple-600 px-12 py-3 text-sm font-medium text-white   focus:outline-none focus:ring '>
              SUBMIT
            </button>

            {isLoading ? (
              <div role='status' className=''>
                <svg
                  aria-hidden='true'
                  className='mr-auto ml-auto mt-5 w-10 h-10  text-gray-200 animate-spin dark:text-gray-600 fill-blue-300'
                  viewBox='0 0 100 101'
                  fill='none'
                  xmlns='http://www.w3.org/2000/svg'>
                  <path
                    d='M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z'
                    fill='currentColor'
                  />
                  <path
                    d='M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z'
                    fill='currentFill'
                  />
                </svg>
                <span className='sr-only'>Loading...</span>
              </div>
            ) : data.data === '' ? null : (
              <>
                <p className='block mt-5 text mb-5 text-xl font-bold text-gray-900 dark:text-white'>
                  Your SQL query 👇
                </p>
                <code>{data.data} </code>
              </>
            )}
            <Footer />
          </div>
        </div>
      </section>
    </>
  );
}

Run the app in you local server

yarn dev

Conclusion

With this tutorial you will be able to build a simple OpenAI app which generates SQL Queries from natural languages.
OpenAI is still failrly a new and is still a work in progress and there is always room for improvement. OpenAI also provides several tools and services to ensure accuracy and reliability, such as OpenAI Playground which I've used for writing most of the things in this blog.

Feel free to clone the repository GitHub
You can checkout the website here.

More resources:

Hope you like it and Give me a feedback

You can connect with me on GitHub

How to Get Started with Competitive Programming?

Munavvar Sinan — Wed, 25 May 2022 02:58:17 +0000

If you're a computer science student you must have heard of Competitve programming. It is skill that will set you apart from the crowd, add more value to your resume and subsequently provide you with an edge over others during placements or other career opportunities. Most of the tech giants like Google, Facebook, Amazon etc. singnificantly consider the competitive programming skills to recruit the candidates.

Most of the computer science students dosen't know how to start competitive programming and what are the best resouces to learn it.
so if you're on of them who doesn't know where to start. This guide will help you to solve your doubts regarding competitive programming.

Table of content

In this guide we'll talk about:

1.What is Competitive Programming?
2.Why Competitive Programming?
3.Where to get started?
4.Common mistakes to avoid in competitive programming as a beginner

What is Competitive Programming?

NOTE : To many, competitive programming isn’t just about typing out code. It’s a sport that takes years to master.

Competitive programming is a sport, perhaps even a form of art. It's an activity that requires creativity and analytical thinking to tackle difficult coding puzzles.
It is a brain game which take place on the internet or a local network in which programmer's have to code according to given constraint's.

Why Competitive programming?

Competitive programming will help you to demonstrate your skills to public .Competitive programmers are known for their problem solving skills. Like developers show their skills by making different projects, competitive programmers show their talent by taking part in different challenges which sites like Codeforces, Codechef, Topcoder, Hackerrank, Hackerearth and many more host frequently. Competitive programmers build their name and earn fame on these sites and as they perform good, people start to recognize them.

As you get used to solving harder and harder problem in contests, you will easily be able to answer questions asked in technical interview.Competitive programming also increases your problem solving speed which provides an edge to you over other applicants.Big companies like Apple, Google and Facebook want talented and smart people to work with them. So these companies keep an eye on those programmers who outperform worldwide in the contests which take place at world level

Where to get started?

All the resources provided in this article will be free to use

1. Learn basic mathematics :

You can definitely start competitive coding without any mathematical background. But maths becomes essential as you dive deep into the world of CP.
Basic mathematic means simple number theory concepts and also being able to solve basic linear equation and inequalities

You can refer to the following links:

Geeksforgeeks: Math in competitive programming https://www.geeksforgeeks.org/math-in-competitive-programming/, Essential math for competitive programming https://www.geeksforgeeks.org/essential-maths-for-competitive-programming-course-by-geeksforgeeks/
Stanford Edu : Number theory https://crypto.stanford.edu/pbc/notes/numbertheory/
Karthik Arora : https://www.youtube.com/playlist?list=PLb3g_Z8nEv1i6NHntG5l2fPKuVu853EYy

2. Learn a programming language :

The most important thing in competitive coding is how good is your programming knowledge and problem solving skills. Having good problem solving skills and knowledge is of no use if you are not able to convert your logic into code.
Now in the case of choosing a programming we have a plenty of options and the best to choose is C++ or JAVA. You can also use python but compared to the run time speed and other factors C++ and JAVA is much more better than python even though python has simple syntaxes.

I would suggest to choose C++ because it is the most widely used language for CP. And also C++ provide you with the fastest run time among all the other languages. Also for problems where you have strict time limit C++ would definitely give you an upper hand. And also if you are coming from a computer science background you would definitely have some knowledge in C language so it would be much easier to get started with C++.

Resources to learn C++ :

Learn C++ from Scratch : https://www.educative.io/courses/learn-cpp-from-scratch
C++, Short and Sweet, Part 1 : https://www.udemy.com/course/cpp-short-and-sweet/?LSNPUBID=JVFxdTr9V80&ranEAID=JVFxdTr9V80&ranMID=39197&ranSiteID=JVFxdTr9V80-MOhgW1WT4LfwYLz7z5TE8g&utm_medium=udemyads&utm_source=aff-campaign
C++ For C Programmers, Part A : https://www.coursera.org/learn/c-plus-plus-a?irclickid=11y3n4VhUxyIWTnT9UWYk2-bUkDxy3z3F2duTE0&irgwc=1&utm_medium=partners&utm_source=impact&utm_campaign=3294490&utm_content=b2c
C++ Tutorial for Complete Beginners : https://www.udemy.com/course/free-learn-c-tutorial-beginners/?LSNPUBID=JVFxdTr9V80&ranEAID=JVFxdTr9V80&ranMID=39197&ranSiteID=JVFxdTr9V80-f3f8GHdogXSNvh70K_odOA&utm_medium=udemyads&utm_source=aff-campaign
C++ Programming course - Beginner to Advanced : https://youtu.be/8jLOx1hD3_o

3. Learn Data Structures and Algorithms [optional]:

This is an optional step. You might want to learn the most common data structures and algorithms before jumping into CP.
The best way you can excel in CP is by giving direct contest instead of learning DSA. You can learn most DSA simply by solving problems in the coding platforms. In this way you will not only be learning DSA, you will also get a good experience in attempting competitive programming contests. Because learning of all these DSA and not able to use it in contests would be of no help.

Make sure to learn at least the DSA foundation like how to compute the time and space complexity, recursion etc.

4. Start solving problems on popular CP platforms :

After brushing up on all the basics and familiarizing yourself with the DSA fundamentals, it's time to start practicing. Practice is the only golden rule that can make you succeed in the journey to learning competitive programming.

There are numerous platforms where you can find a good variety of competitive programming questions. You can start with websites like SPOJ, CodeChef, Hacker rank, Hacker Earth, LeetCode, Codeforces. Many tech giants consider the ranking of a candidate on these sites during the hiring process.

Start with small problems and go on to the harder ones. Never get stuck on a problem for too long in the initial period. Google out your doubts and try to sort them out or you can discuss with someone.
Even if you are unable to solve the problems do always look at the editorials and then code it and get accepted.
And even if you are unable to do it, do look at the codes of amazing programmers. See how they have implemented and try it in your code in that way you can learn more advanced way of coding.

Links to some of the best coding platforms:

SPOJ : It is a problem Archive(recommended for all beginners).
CodeChef : It has more complex problems and one of the best coding platform out there.
LeetCode: It is recommended for both beginners and advanced coder's.
HackerEarth : Recommended for beginner's
HackRank : Recommended for beginner's.
Codeforces : Best for competitions.

Contests are a greatest way to test your competitive programming skills. You get to compete with CP enthusiasts like you and even with some experienced programmers throughout the globe.
Participating regularly in such challenges and contests boosts your confidence and provides you the opportunity to get noticed by various tech giants who directly hire top rankers from such contests.

5. Improve your typing speed [Optional]:

As you are taking part in competitions your typing speed must be good or else you cannot make out in competitions with strict time limits.
So improve your typing speed as you moving on.

Common mistages to avoid in competitive programming as a beginner.

Here are some common mistakes to avoid in competitive programming as a beginner.

Avoid focusing too much on one programming language.
All practising, No learning.
All learning, No practicing.
Only participating in contests.
Giving up

Everything cannot be done overnight. You have to be focused on your learning and practicing problems.

I hope this guide will give you a clear understanding of what competitive programming is and how you can get started with competitive programming.

This guide is referred from Priyansh Agrawal (AIR 1 in Google Kick start and candidate master in Codeforces) and Codeforces.

Thank you.

BIG O'NOTATION

Munavvar Sinan — Fri, 18 Mar 2022 19:31:39 +0000

Big O notation is one of the most fundamental tools for computer science students to analyze the time and space complexity of an algorithm.
By the end of this article, you'll thoroughly understand Big O notation.

Genrally, there is always more than one way to solve a problem in computer science with different algorithms.Therefore it is highley required to use a method to compare the solution in order to judge which on is better.
With the Time and Space complexity we calculate the Big O of a code/algorith which describes the better algorithm.

What is Big O?

Big O notation is a way to measure an algorithm’s efficiency. It allows us to understand space and time complexity of our code.

It measures the efficieny of your code in it's worst case scenario i.e it describes the behaviour of a function when the argument tends towards the maximum input.

In other words, Big-O addresses one question “How will my algorithm/code behave as my input grows?”.

Big O'Notation is used in two ways:

When talking about Big O Notation it’s important that you understand the concepts of time and space complexity

1.To classify the time complexity(speed) of an algorithm.
2.To classify the space complexity(memory) of an algorithm.

In this article we discuss about Time Complexity.

Time Complexity

It is the amount of time taken by an algorithm to run, as the input increases. It measures the time taken to execute each statement of code in an algorithm.

What causes time complexities?

Operators(+, -, *, /)
Comparisons(<, >, ==)
Loops(for, while)
Function Calls

Common Time Complexities

Linear Complexity-- O(n) : The running time of the algorithm increases linearly with the size of the input.
Constant Complexity-- O(1) : A constant runtime meaning, regardless of the size of the input, the algorithm will have the same runtime.
Logarithmic Complexity-- O(log n) : O(log n) means that time goes up linearly, while the n goes up exponentially. So if it takes 1 second to compute 10 elements, it will take 2 seconds to compute 100 elements and so on.
Linearithmic Complexity-- O(n log n) :The running time of the algorithm is as a result of performing a logarithmic operation N times. For example, inserting N number of nodes inside a binary search tree. Each insertion takes O(LogN) time, while the entire algorithm takes linearithmic time.

Here is the Big-O complexity chart :

You can visit [https://www.bigocheatsheet.com/] for more cheat-sheets and informations.

We can take a deeper dive into Linear and Constant time complexities

Linear Time Complexity O(n) :

We can discuss this with an example.
consider a factory of some product which is packing it's products in boxes for shipping to its customers.

Linear time complexity means as the number of elements increases number of operations also increases.

In our case When we have only one product we just need to pack only one box. Same way if we have 1000 products we need to pack 1000 boxes. So here as the products increases number of boxes to pack also increase. That is what linear time complexity

We can take a look at a function :

const packBoxes = (products) => {
  products.forEach(product => console.log(product));
}

Here we are printing just printing the array of products using a loop. So if we have only one 1 product the loop will only work one time. So the time taken will be less. Same way if we have 1000 products in that array it will loop through all those 1000 products. so the time taken will be high

This shows that as input increases the number of operations also increases.

Constant Time Complexity O(1) :

We can consider the same example we've used above.
What if we have 1000 products and a single customer?
Yeah, we just need to pack only one box, no matter how many products you have as if you have only one customer.
This is what Constant complexity means, regardless of the number of inputs only one operation is done

we can take a look at it with another example

const packBoxes = () => (products) {
   console.log(product[0]);
}

In this example we are just printing the first item in the product array. We are not thinking about number of products in that we are just printing the first element from that.
so if we have 1 elemnt or 1000 elements we just need to print the first element. So both will take the same time without considering the number of inputs.

Summary

Big O represents how long an algorithm takes (time complexity) and how much memory it takes(space complexity).

We've only discussed some of the most used time complexities in this article.