DEV Community: Sadeedpv🥇

[Boost]

Sadeedpv🥇 — Fri, 26 Sep 2025 08:42:49 +0000

Sadeedpv🥇

Aug 19 '22

Share your GitHub Profile and Let's all connect

#discuss #github #beginners #programming

Comments 241

1 min read

Guess the JavaScript Output: Very Tricky!

Sadeedpv🥇 — Thu, 05 Oct 2023 08:47:34 +0000

This post is part of a series called Guess the JavaScript Output
And today's question is a bit tricky one:

What will be the output of the following code?

let a = {};
let b = { key: "b" };
let c = { key: "c" };

a[b] = 123;
a[c] = 456;

console.log(a[b]);

Uncle Mike solved this within 20s (Mike started coding in the womb and has built his own OS called MikeOS).
If you'd like to see more of the series, please give it a like.

Guess the JavaScript Output: Level impossible!

Sadeedpv🥇 — Sun, 24 Sep 2023 09:12:33 +0000

This post is part of a series called Guess the JavaScript Output
If you like to read Part 1 of the series, see here

So, without any ado, let's get to it:

Today's question(Super tricky):

What does console.log((! + [] + [] + ![]).length) output in JavaScript?

Big Mike solved this in 2 minutes. Can you beat big Mike on this one? Even ChatGPT got this one wrong!!

And Yes, JavaScript is officially crazy!

Thoughts on Bun so far?

Sadeedpv🥇 — Thu, 21 Sep 2023 17:53:04 +0000

As of the previous week, Bun has become the dominant force in the JavaScript ecosystem. So far, I had a good experience with Bun.

What was your experience with Bun so far? Any downsides or problems you've encountered?

Build an HTTP server in Bun

Sadeedpv🥇 — Tue, 19 Sep 2023 19:53:47 +0000

As of last week, Bun has taken over the JavaScript world. In this post, we will see how to create an HTTP server in Bun using the Elysia Framework. Here is the link to the full source code of this project.

So, What is Bun?

Bun is a new JavaScript Runtime built from scratch to serve the JavaScript ecosystem.

Bun has built-in TypeScript support and is blazingly fast ⚡earning it the favor of many JavaScript & TypeScript Developers 💘.

Installing Bun

Installing Bun is very simple. All you have to do is:

curl -fsSL https://bun.sh/install | bash

If you like to know more about the installation process, here is the link

Note that Bun is not yet compatible with Windows, But you can still install if you have WSL installed on your system.

Creating an HTTP server using Elysia Framework

Elysia is a Bun-first performance focused web framework that takes full advantage of Bun's HTTP, file system, and hot reloading APIs.

Let's first initialize our Elysia app:

bun create elysia myapp
cd myapp
bun run dev

Let us Build our server

In this tutorial, I will be building a simple TODO Application. For building the application, I will be using the SQLite Database. The cool thing about Bun is that it has completely free SQLite Database built in the runtime. If you like to read more about the bun:sqlite, here is the docs

In our src/index.ts, we will declare our Elysia app:

import { Elysia } from 'elysia'

const app = new Elysia();
app.get('/', () => "Hello World!");
app.listen(8000);
console.log(
  `🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
);

If you want to use environment variables:

app.listen(Number(Bun.env.PORT));

console.log(
  `🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
);

You can define your Routes with many built-in methods like:

app.get('/', () => {});
app.post('/', () => {});
app.put('/', () => {});
app.patch('/', () => {});
app.delete('/', () => {});

Retrieving the path parameter is also very easy just like any other Backend Framework like Express.js:

// Both does the same thing

app.get("/hello/:name", ({ params: { name } }) => {
  return `Hello ${name}!`;
});

app.get("bye/:name", (context) => {
  return `Hello ${context.params.name}`;
});

If you have many paths with the same prefix, you can Group them. Grouping allows you to combine multiple prefixes into one. Since we do not require that many routes to build this application, we do not need to Group the paths.

app.group('/user', app => app
    .post('/sign-in', signIn)
    .post('/sign-up', signUp)
    .post('/profile', getProfile)
)

You can also install the cors plugin which adds support for customizing Cross-Origin Resource Sharing behavior.

Install it with:

bun add @elysiajs/cors

Then use it:

import { cors } from "@elysiajs/cors";

const app = new Elysia();
app.use(cors());

In order for us to build this application, first we need to initialize our Database. Let's take a look at how we can do that:

import { Database } from "bun:sqlite";

// Create DB If not Exists
const DB = new Database("mydb.sqlite", { create: true });

Now, we need to create the Table

DB.query(
  `CREATE TABLE IF NOT EXISTS MESSAGES(
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  message TEXT
);`
).run();

After creating the relation, now we need to implement the GET and POST request. Our GET request would look something like this

app.get("/", (context) => {
  const query = DB.query(`SELECT * FROM MESSAGES;`);
  const result = query.all();
  console.log(result);
  context.set.status = 200;

  return new Response(JSON.stringify({ messages: result }), {
    headers: { "Content-Type": "application/json" },
  });
});

We used the db.query() method on your Database instance to prepare a SQL query and used .all() to run a query and get back the results as an array of objects.

Our POST request would look something like this:

app.post(
  "/add",
  ({ body }:any) => {
    const message = body?.message;
    console.log(message);
    const query = DB.query(`INSERT INTO MESSAGES (message) VALUES (?1)`);
    query.run(message);
    return new Response(JSON.stringify({ message: "Added" }), {
      headers: { "Content-Type": "application/json" },
    });
  });

As you can see here, I am using the any type. Instead of using the any type, what we can do is

import { Elysia, t } from "elysia";

app.post(
  "/add",
  ({ body }) => {
    const message = body?.message;
    console.log(message);
    const query = DB.query(`INSERT INTO MESSAGES (message) VALUES (?1)`);
    query.run(message);
    return new Response(JSON.stringify({ message: "Added" }), {
      headers: { "Content-Type": "application/json" },
    });
  },
  {
    body: t.Object({
      message: t.String(),
    }),
  }
);

Note that we used context.set.status to set the StatusCode of the response

Lets try running our application:

curl -X POST http://localhost:8000/add -H "Content-Type: application/json" -d '{"message":"This is a Reminder!"}'  
curl http://localhost:8000/

And Booom!! 💥💥

{"message":"Added"}
{"messages": [{"id":1, "message": "This is a Reminder!"}]}

Here are some tasks for you:

Create PUT and DELETE requests to update or DELETE the Database
Implement error handling

CONCLUSION

I hope you gained some new insights from this post. As you can see from the graph, Bun is much faster than Node as of now.

Also, take a look at how fast Elysia is compared to Express:

References

If you like to read more about bun:sqlite, read more
If you like to read more about Elysia, read more
If you want the link to the full source code in GitHub, click here

Creating a Dockerfile for your Go Backend

Sadeedpv🥇 — Tue, 12 Sep 2023 18:44:37 +0000

This is a step-by-step comprehensive guide on how to create a docker image for your Go backend for absolute beginners. In this article, you will learn to build Docker image from scratch, and deploy and run your Go application. Here is the full source code of the GitHub repo

PREQUISITES

Install Go version 1.21.0 or later. Visit the Download Page for Go to install the toolchain.
Basic understanding of Golang fundamentals.
Docker running locally, Install Docker from here.
An IDE/Text-editor and a command-line terminal application.

Creating a Go Backend

In this tutorial, I will be using the Echo framework to build the backend. You can learn more about Echo here.

Feel free to create your own backend with/without frameworks.

Here is an example main.go file:

package main

import (
    "net/http"
    "os"

    "github.com/labstack/echo/v4"
    "github.com/labstack/echo/v4/middleware"
)

func main() {
    e := echo.New()

    // Middleware
    e.Use(middleware.Logger())
    e.Use(middleware.Recover())

    e.GET("/", func(c echo.Context) error {
        return c.String(http.StatusOK, "Hello, World!")
    })

    e.GET("/health", func(c echo.Context) error {
        return c.String(http.StatusOK, "Health is OK!!")
    })

    httpPort := os.Getenv("PORT")
    if httpPort == "" {
        httpPort = "8080"
    }

    e.Logger.Fatal(e.Start(":" + httpPort))
}

As you can see, we have two endpoints,

/ which returns Hello, World!
/health which return Health is OK!!

Don't forget to add PORT in you .env file:

PORT=8000

You should also initialize new module in current directory using the command:

go mod init <your-module-package>

To add the dependencies mentioned in the main.go file, use the command

go mod tidy

Testing your application

Let’s start our application and make sure it’s running properly.

go run main.go

Let's try out our application:

$ curl http://localhost:8080/
$ curl http://localhost:8080/health

You should get the following output:

Hello, World!
Health is OK!!

Creating the Dockerfile

Here is the full Dockerfile with the explanation

# syntax=docker/dockerfile:1

FROM golang:1.21.0

# Set destination for COPY
WORKDIR /app

# Download Go modules
COPY go.mod go.sum ./
RUN go mod download

# Copy the source code. Note the slash at the end, as explained in
# https://docs.docker.com/engine/reference/builder/#copy
COPY *.go ./

# Build
RUN CGO_ENABLED=0 GOOS=linux go build -o /docker-gs-ping

# Optional:
# To bind to a TCP port, runtime parameters must be supplied to the docker command.
# But we can document in the Dockerfile what ports
# the application is going to listen on by default.
# https://docs.docker.com/engine/reference/builder/#expose
EXPOSE 8080

# Run
CMD ["/docker-gs-ping"]

Building the Docker image

After you've created the Dockerfile, now it's time to build a docker image from it with the build command.

The build command optionally takes a --tag flag. This flag is used to label the image with a string value, which is easy for humans to read and recognize. If you do not pass a --tag, Docker will use latest as the default value.

Let's build our docker image!!
Run the following command from the root directory

docker build --tag echo .

And Voila!! We built a docker image for our backend.
To list the images, use docker image ls command or docker images command.

Run the docker image

In order to run the docker image, we can use the docker run command:

docker run <image-name>

In my case, the command will look something like this:

docker run echo

And Voila!! We got our server up and running; but wait, if you try to access one of your endpoints now, it will give you the following error:

Failed to connect to localhost port 8080: Connection refused

So, we have to expose port 8080 to port 8080 on the host. To do that, all you have to do is:

docker run -p 8080:8080 echo

Now let’s rerun the curl command

$ curl http://localhost:8080/
Hello, World!

Success! We were able to connect to the application running inside of our container on port 8080. Press Ctrl + C to stop the container.

To list all the images, you can try the command docker image ls, and you will see that our image has enormous size.

As @sibprogrammer mentioned in the comments, one common way to reduce the size is to use multi-stage build.

Thanks to @sibprogrammer for the details:

The common way of doing that is to use multi-stage build. Go is a compiled language. You don't need Go toolchain to run your services. So the general concept is the following: you build the binary in one stage and use another minimal image to launch it. It bring the huge difference. The latest "golang" image is about 800 Mb (it's based on Debian). The final image of your service can be just 5-10 Mb.
Here is an example:

FROM golang:1.15 as builder
ARG CGO_ENABLED=0
WORKDIR /app

COPY go.mod go.sum ./
RUN go mod download
COPY . .

RUN go build

FROM scratch
COPY --from=builder /app/server /server
ENTRYPOINT ["/server"]

This VsCode Extension is a game changer⚡

Sadeedpv🥇 — Wed, 23 Aug 2023 09:18:50 +0000

Do you find it difficult to switch between tabs when seeking code assistance from ChatGPT? Have you ever had trouble understanding an open-source project? Or Maybe you just copied the code from Stack Overflow or some other site, and you don't understand what you've just written. In this blog, I will talk about Code Explainer, a VsCode Extension that uses AI to explain or generate code snippets from the editor itself.

Since it's an open-source project, you can contribute here (Give it a star if you like ⭐): GitHub

Installation

To install the extension, open VS Code and go to the Extensions tab. Search for Code Explainer and click Install. Alternatively, You can install it from here

HOW TO USE!?

Once the extension is installed, you can use the command Code Explainer: Explain to get an explanation for any piece of code.
All you have to do is select the piece of code you want the explanation for and hit Ctrl + shift + p and search for explain.

Alternatively, you can also open Code-explainer by clicking the icon and paste the code in the input box.

WHY YOU SHOULD USE IT?

You are tired of switching from VsCode to Google frequently.
You have trouble understanding an open-source project.
Or Maybe you just copied the code from Stack Overflow or some other site, and you don't understand what you've just written.
You can also write comments to let AI generate your code
You can also tell AI to generate the code you want using the input box.

Configuration

But before that, you have to configure your OpenAI API key. Go to your VSCode settings(Ctrl + ,) and search for code-explainer and set your OPENAI API KEY which you can easily obtain from here - openai

IMPORTANT !!!

If you want explanation on hover, you can turn on Show Explanation on Hover (Only compatible with JavaScript) from the settings, but we do not recommend it, since it's in the beta stage.

CONTRIBUTING

Feel free to contribute to the Project. Even if it's just raising an issue or fixing a typo, it would matter a lot 💘
If you would love to donate, See here

Conclusion

I strongly recommend trying out and installing this extension. I trust you found it beneficial, and if you have any suggestions or ways to enhance it, kindly share them in the comments.

You won't be able to answer this simple JavaScript question!

Sadeedpv🥇 — Wed, 16 Aug 2023 09:49:56 +0000

Last night, I was scrolling through twitter and I found a interesting JavaScript question, and I bet you won't be able to answer this without cheating.

Let's see how long would would it take for you to answer this one:

What does `("b" + "a" + + "a" + "a").toLowerCase()` output in JavaScript?

The question does look simple, but the answer will definitely blow your mind.

Tell me how long it took you to answer in the comments.

And Yes, JavaScript is crazy!

Stop using JavaScript for everything!

Sadeedpv🥇 — Fri, 11 Aug 2023 16:50:35 +0000

In the world of web development, JavaScript has become the go-to language for building interactive and dynamic applications. It can also be run in the backend, it can be used for desktop applications, mobile applications, multipurpose programming and even Machine learning. However, the trend of using JavaScript for everything might not always be the best approach.

The JavaScript Craze

JavaScript's versatility and browser compatibility have made it an indispensable tool for creating modern web applications. From front-end interactivity to server-side logic, JavaScript has expanded its reach. The thing I hate about JavaScript is that it is somehow being used for stuffs that we shouldn't using (like Machine learning with JavaScript?).

The Downsides

While JavaScript offers numerous advantages, relying on it exclusively can lead to certain downsides:

Performance Overhead

Using JavaScript for complex tasks can lead to performance bottlenecks, especially on resource-constrained devices and slower networks. JavaScript is an interpreted language, which means that the code is executed line by line at runtime. This can lead to slower execution compared to compiled languages, as each line of code needs to be interpreted before it is executed.

Maintenance Complexity

As projects grow, JavaScript codebases can become hard to maintain and debug, increasing development time and costs. Maintenance complexity in JavaScript refers to the challenges developers face when managing and updating code over time. Due to JavaScript's dynamic nature, lack of strict typing, varying browser environments, and its inconsistency, maintaining JavaScript code can become complex.

Memory inefficient

One of the major drawbacks of JavaScript is its memory inefficiency. JavaScript can be memory inefficient due to factors like memory leaks, unnecessary object retention, and improper handling of large data sets.

Conclusion

JavaScript remains a powerful tool, but it's essential to use it
judiciously. I love JavaScript but the enthusiasm to use it
everywhere is mindboggling. Other languages exists for a reason. You don't have to use JavaScript for everything. Most of the newcomers in tech end up only learning JavaScript.

What are your thoughts on the JavaScript-first approach? Share your opinions in the comments below.

Build Chess game with Pygame

Sadeedpv🥇 — Mon, 07 Aug 2023 17:54:37 +0000

Today, I'm excited to share my recent project where I took on the challenge of building a fully functional chess game using Python and the Pygame library.

If you want to checkout the full code Here is the GitHub link

If you want to play the game, all you have to do is type the following command on the terminal:

python main.py

Feel free to mention any potential issues with the code or better ways to implement them in the comments, as I am relatively
new to the pygame library.

Here are some explanations of the code:

The pygame library is used to create the graphics and handle the user input.
The chessboard is a 2D list that represents the chessboard. Each element of the list is a string that represents the piece that is on that square.
The draw_board() function draws the chessboard on the screen.
The handleClick() function handles the logic for when the user clicks on a square on the chessboard.
The get_moves() function returns a list of all the possible moves for a given piece.

Features I would love to add

In real chess, you win by checkmating the king; except here, you have to capture the king to win the game.

There are some features I would love to add to this game like:

King side and Queen side Castling
En passant (If you don't know En passant, please Google)
Ability to play against the AI

That being said, I am happy to share my experience with you. Chess is a very complex game and writing code for chess can get really messy in no time.

My Problem with Tech Twitter and the Rise of NPC Tweets (A Thread 🧵)

Sadeedpv🥇 — Fri, 04 Aug 2023 19:44:21 +0000

If you've been following tech twitter over the years you would be already familiar with tweets like this (A thread 🧵):

We can see a pattern here and a long time ago, I used to do the same thing on twitter for the same exact reason they do(for engagement purposes).

These resources are not something you cannot find on the internet, Anyone who knows how to google can find the same exact resources if they want to learn some new programming language or a framework. If you've been in this field for some time, you might be tired of hearing these same resources again and again.

The reason I hate these tweets is because it gives beginners the false idea that programming is something you can learn by digesting some resources you found online. And Trust me, these content creator themselves haven't tried half of the resources they have mentioned. They give such a false idea of all the tech you need to know and be on top of, they are constantly jumping to the latest thing talking about how it would change everything. Makes you feels so behind when you work a regular job with the same old out of date code. They live in fantasy projects not real world projects. No matter how much I block these "engagement bait tweets", the twitter algorithm pushes these into my feed again 😪.

The Truth is Programming is hard and it will take time and it's ok. I am not here to discourage you in any way. If you want to learn to code, the best thing you can do is, get off twitter and write some code. Don't let anyone else tell you otherwise.

How to be a twitter NPC? (A Thread 🧵)

There is a pretty simple formula to grow your tech twitter account:

1 - Tweet at least 20 times a day (at least 10 of them should be threads 🧵🧵🧵🧵)
2 - Respond to other people's threads 🧵 with positivity and encouragement like this:

3 - Most importantly, don't forget to create lists with resources for developers

So, in conclusion, this is what your feed should look like:

If you've enjoyed this post, I got a thread for you in the comments!

Is Stack Overflow toxic?

Sadeedpv🥇 — Sun, 30 Jul 2023 14:56:20 +0000

Stack Overflow, the largest Q&A platform for programmers, has become an indispensable resource for developers worldwide. However, over time, the platform has also gained a reputation for being "toxic."
Many users have concerns about the platform's harsh criticism, aggressive downvotes, and sometimes unwelcoming atmosphere. Not only that, there is this competition for reputation points that can lead to a sense of superiority, discouraging newcomers or less-experienced users from fully engaging with the community.

Do you believe Stack Overflow is toxic?

DEV Community: Sadeedpv🥇

[Boost]

Share your GitHub Profile and Let's all connect

Guess the JavaScript Output: Very Tricky!

What will be the output of the following code?

Guess the JavaScript Output: Level impossible!

Thoughts on Bun so far?

Build an HTTP server in Bun

So, What is Bun?

Installing Bun

Creating an HTTP server using Elysia Framework

Let us Build our server

Here are some tasks for you:

CONCLUSION

References

Creating a Dockerfile for your Go Backend

PREQUISITES

Creating a Go Backend

Testing your application

Creating the Dockerfile

Building the Docker image

Run the docker image

This VsCode Extension is a game changer⚡

Installation

HOW TO USE!?

WHY YOU SHOULD USE IT?

Configuration

IMPORTANT !!!

CONTRIBUTING

Conclusion

You won't be able to answer this simple JavaScript question!

What does ("b" + "a" + + "a" + "a").toLowerCase() output in JavaScript?

Stop using JavaScript for everything!

The JavaScript Craze

The Downsides

Performance Overhead

Maintenance Complexity

Memory inefficient

Conclusion

Build Chess game with Pygame

Here are some explanations of the code:

Features I would love to add

My Problem with Tech Twitter and the Rise of NPC Tweets (A Thread 🧵)

How to be a twitter NPC? (A Thread 🧵)

If you've enjoyed this post, I got a thread for you in the comments!

Is Stack Overflow toxic?

What does `("b" + "a" + + "a" + "a").toLowerCase()` output in JavaScript?