teleren/devto huggingface dataset:
How to Detect Clicks Outside of an Element in NextJS or React
Tags: nextjs, react, javascript
Published: 2023-04-14 09:02:23

As a developer, you might have come across situations where you need to detect when a user clicks outside of a particular element in your NextJs or React app. For example, you might have a dropdown menu that you want to close when a user clicks outside of it or a modal. In this post, we'll explore how to detect clicks outside of an element in NextJS or React using the useRef and useEffect hooks.

To get started, let's take a look at the following code snippet:

```jsx
import { useEffect, useRef } from "react";

const Component = () => {
  const ref = useRef(null);

  useEffect(() => {
    const handleOutSideClick = (event) => {
      if (!ref.current?.contains(event.target)) {
        alert("Outside Clicked.");
        console.log("Outside Clicked. ");
      }
    };

    window.addEventListener("mousedown", handleOutSideClick);

    return () => {
      window.removeEventListener("mousedown", handleOutSideClick);
    };
  }, [ref]);

  return (
    <div className="w-screen h-screen bg-yellow-200 flex justify-center items-center">
      <div className="w-96 h-96 bg-orange-500" ref={ref}>
        Click outside of me.
      </div>
    </div>
  );
};

export default Component;

```

In this code snippet, we have a functional component called `Component`. The component renders a `div` element that has a child `div` element with the text "Click outside of me". We use the `useRef` hook to create a ref that we can use to reference the child `div` element.

The `useEffect` hook is used to add an event listener to the `window` object for the "mousedown" event. When the event is triggered, the `handleOutSideClick` function is called. This function checks if the `event.target` (i.e., the element that was clicked) is inside the child `div` element. If the clicked element is not inside the child `div` element, it means that the user clicked outside of the child `div` element. In this case, we alert the user that the outside was clicked and log the message "Outside Clicked" to the console.

We also return a function from the `useEffect` hook that removes the event listener when the component is unmounted. This is to avoid memory leaks.

To test this code, you can run the NextJS or React app and click anywhere on the screen outside of the child `div` element. You should see an alert with the message "Outside Clicked" and the message should be logged to the console.

In conclusion, detecting clicks outside of an element in NextJS or React can be achieved using the `useRef` and `useEffect` hooks. By creating a ref to reference the child element and adding an event listener to the `window` object, we can detect clicks outside of the element and perform the desired action.
Cheat code for every developer
Tags: webdev, programming, productivity
Published: 2023-04-14 08:01:19

Whether you are a beginner, intermediate or senior developer, here are things to keep in mind in your software development journey.

**1. Languages are just tools**
The awareness of the subject will save you a lot. Learning several programming languages/frameworks will take you nowhere if you are not focusing on solving problems with the language. Choose a language, learn and solve problems with it. Ensure you learn a new language and use it to solve real-life problems. Programming is all about the thought process (how you think).

**2. Understand the underlying concepts**
Focusing on providing solutions is not enough. Understanding the basic fundamental concepts of programming is the core. It is advisable to learn global concepts like Variable Declaration, Basic Syntax, Data Type and Structures, Flow Control Structures (Conditionals and loops), Functional Programming, Object-Oriented Programming, Debugging, IDEs and Coding Environments.

**3. Complex Is Better Than Complicated**
Simple is better than complex however, developing complex solutions is not a problem as long as it is understood by the end-users or fellow developers.

**4. Never Panic**
Whenever you are unable to submit work within the set deadline, don’t panic or copy-paste code from the internet without understanding. Relax and take a break and the solutions or how to solve the problem might come fresh to your mind again.

**5- Build a routine of continuous learning**
Always be learning something new and seeking more knowledge. Learn a wide variety of things, not only those related to your current stack. Seek new ways of doing things and new experiences. Always be up to date on current and future trends and technologies.

I hope you enjoyed.
How To Setup 1Password SSH For Windows
Published: 2023-04-14 07:57:04

Here is 3 articles useful for setting up 1Password SSH for Windows, WSL, and WinSCP Support via WinSSH-Pageant:

- https://developer.1password.com/docs/ssh/
- https://dev.to/d4vsanchez/use-1password-ssh-agent-in-wsl-2j6m
- https://github.com/ndbeals/winssh-pageant

The location of winssh-pageant installation when using winget is: 

`%userprofile%\AppData\Local\Programs\WinSSH-Pageant\winssh-pageant.exe`
Dockerize FastAPI project like a pro - Step-by-step Tutorial 🚀
Tags: python, fastapi, docker, programming
Published: 2023-04-14 07:53:49

## Introduction 🔥

Are you a developer looking to **containerize your FastAPI project** using Docker?

In this step-by-step tutorial, we'll show you how to Dockerize your FastAPI app like a pro. From setting up your development environment to deploying your app to Docker Hub, we'll cover everything you need to know to get started with Docker and FastAPI.

---

## Watch the video 🎥

For a better understanding, watch the tutorial video on **Stackless Tech** YouTube Channel.

{% embed https://youtu.be/CzAyaSolZjY %}

---

## Let's go 🚀

> Start with creating and activating python virtual environment.

```sh
$ python3 -m venv env
$ source env/bin/activate
(env) $ 
```

> Install FastAPI and Uvicorn.

```sh
(env) $ pip install fastapi uvicorn
```

> In main.py file, Write `Hello, World!` program.

```python
from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def index():
    return {"details": "Hello, World!"}

```

> run the server

```sh
(env) $ uvicorn main:app --reload --port=8000 --host=0.0.0.0
```

Open `127.0.0.1:8000` and see if it works.

> Write dependencies into `requirements.txt`

```sh
(env) $ pip freeze > requirements.txt
``` 

> Create `Dockerfile`, `.dockerignore` and `docker-compose.yaml` files

```Dockerfile
FROM python:3.8.10-slim

WORKDIR /app

COPY . /app

RUN pip install -r requirements.txt
```

```
env/
__pycache__/

*.env
*.env.*
env.*
```

```yaml
version: '3'

services:
  web:
    build: .
    command: sh -c "uvicorn main:app --reload --port=8000 --host=0.0.0.0"
    ports:
      - 8000:8000
```

> Run the docker container

```sh
(env) $ docker compose up --build
```

> Go to `127.0.0.1:8000`, And it's now running from the Docker Container.

---

I hope you guys liked this quick tutorial

Cheers
Getting Started with Web Scraping Using Golang and Scrapemate
Tags: go, scraping, webscraping
Published: 2024-06-19 20:28:35

---
title: Getting Started with Web Scraping Using Golang and Scrapemate
published: true
date: 2023-04-14 07:50:30 UTC
tags: golang,Scraping,webscraping,webscraping
canonical_url: https://blog.gkomninos.com/getting-started-with-web-scraping-using-golang-and-scrapemate
---

Learn how to simplify web scraping with Golang and Scrapemate in this tutorial. We'll show you step-by-step how to extract product information from a websit
Debouncing De-coded
Tags: javascript, performance, debounce, react
Published: 2023-04-14 07:43:49

Hello and welcome to my blog. Today, we are going to write a debounce function from scratch and I will explain the code line by line.

## Definition
Debouncing is a technique used to optimize asynchronous operations, such as fetch calls to APIs and scroll events. In simple terms, debouncing delays the processing of an event.

## Input Element without Debouncing
The following code demonstrates an input element without debouncing:

![Simple Input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z8h7qf8qhh92h3j14vc.gif)

For every user input (keyup/keydown) event, the event listener ("onClick") calls the event handler function (in our case, the handleChange function). For a small application, this won't cause any performance delays, but for large data websites like Flipkart and Meesho, the repeated function call can cause performance delays.

## Optimization
To optimize the input element, we can implement the following changes:

1. Instead of setting the event value on every change, we can delay the process of setting the event value by a certain waiting time (in milliseconds).
2. Inside the handleChange function, we are setting the input value on every user input. However, we just need to delay the process of setting that event value to the query (setQuery(e.target.value)).


### Debounce Implementation
We are going to build the debounce function step by step. The first step is to delay the function call. To do this, we can use the timer function. However, we need to make a function call after some delay, which is where the setTimeout function comes in.

Here is the code implementation following the above steps:

```
 const debounce = (cb, wait) => {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            cb(...args);
        }, wait);
    };
  };
```
Here is a breakdown of what each line does:

1. The debounce function returns a function, as it will be called multiple times.
2. The debounce function accepts a callback function and a wait time for delay.
3. As discussed, we are delaying the callback function execution call by the wait time .
4. The callback can be a fetch request or a setter function.
5. To execute the callback, we need to make sure previous setTimeouts are cleared .
6. The user can pass another event before the previous timer gets completed, so we need to clear the timer to handle that case.

### Input Element with Debouncing
Here is an example of what the input element looks like with debouncing:


![With debouncing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz7xxb6bgiqd64ycfwdm.gif)

We can see that there is a slight delay.
we achieved the goal

That brings an end to this blog. Thanks for reading and happy coding!
Serverless computing use cases within the healthcare industry.
Tags: webdev, serverless, healthcare
Published: 2023-04-14 07:40:41

Serverless computing has been a game-changer for many industries, including healthcare. It provides a cost-effective, scalable, and efficient solution for managing large amounts of data, running complex algorithms, and processing real-time data streams. We will explore some of the Serverless use cases in the healthcare industry below.

## 1.	Medical image analysis
Medical imaging is an essential part of diagnosis and treatment in the healthcare industry. Serverless computing can be used to process and analyze medical images, such as X-rays, CT scans, and MRIs. With Serverless, healthcare providers can quickly and accurately analyze images, enabling them to make faster diagnoses and develop more effective treatment plans.


## 2.	Data processing and analysis
Healthcare generates a vast amount of data, from patient records to clinical trial results. Serverless computing can be used to process and analyze this data, enabling healthcare providers to gain insights and make data-driven decisions. With Serverless, healthcare providers can perform complex data processing and analysis tasks quickly and cost-effectively.


## 3.	Real-time monitoring and alerting
Serverless computing can be used to develop real-time monitoring and alerting systems for patients. These systems can monitor vital signs, medication adherence, and other health metrics, and alert healthcare providers in case of any abnormalities. With Serverless, healthcare providers can develop personalized, real-time monitoring systems that provide better care to patients.

## 4.	Electronic health records (EHR)
Electronic health records (EHR) are digital records of a patient's health history. Serverless computing can be used to develop and manage EHR systems, enabling healthcare providers to access patient records securely and efficiently. With Serverless, healthcare providers can develop EHR systems that are scalable, secure, and compliant with regulatory requirements.

## 5.	Chatbots and virtual assistants
Serverless computing can be used to develop chatbots and virtual assistants that can answer patients' questions and provide them with guidance. These chatbots can be integrated into healthcare providers' websites or mobile apps, providing patients with quick and convenient access to healthcare services. With Serverless, healthcare providers can develop chatbots and virtual assistants that are highly scalable and cost-effective.

Serverless computing has many use cases in the healthcare industry, from medical image analysis to real-time monitoring and alerting. With Serverless, healthcare providers can develop cost-effective, scalable, and efficient solutions that provide better care to patients. As the healthcare industry continues to evolve, we can expect to see more innovative Serverless use cases emerge.
How to install glab CLI for GitLab on Ubuntu using apt?
Tags: gitlab, cli, glab, ubuntu
Published: 2023-04-14 07:23:03

---
title: How to install glab CLI for GitLab on Ubuntu using apt?
published: true
description: gitlab cli 
tags: gitlab, cli, glab, ubuntu
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-14 07:10 +0000
---
# How to install glab CLI for GitLab on Ubuntu using apt?

## Step 1: Add the GitLab package repository GPG key

The first step is to add the GitLab package repository GPG key to your system's trusted keys. This can be done using the following command:

```bash
curl -L https://packages.gitlab.com/glab/glab/gpgkey | sudo apt-key add -
```

## Step 2: Add the GitLab package repository to your system's package sources list

The next step is to add the GitLab package repository to your system's package sources list. You can do this by running the following command:

```bash
sudo curl -o /etc/apt/sources.list.d/glab.list https://packages.gitlab.com/glab/glab/ubuntu/$(lsb_release -cs)/glab.list
```

## Step 3: Update your package list

Once you've added the GitLab package repository to your system's package sources list, you'll need to update your package list to include the newly added repository. You can do this using the following command:

```bash
sudo apt update
```

## Step 4: Install the glab CLI package

With the package repository added and the package list updated, you can now install the glab CLI package using apt. To do this, run the following command:

```bash
sudo apt install glab
```

## Step 5: Verify the installation

Finally, you can verify that the glab CLI was installed successfully by running the following command:

```bash
glab version
```

This should display the version number of the glab CLI that you just installed.

Single code block:

```bash
curl -L https://packages.gitlab.com/glab/glab/gpgkey | sudo apt-key add -
sudo curl -o /etc/apt/sources.list.d/glab.list https://packages.gitlab.com/glab/glab/ubuntu/$(lsb_release -cs)/glab.list
sudo apt update
sudo apt install -y glab
glab version
```
Animation -22 : Cube Flipping Loader CSS Animation
Tags: css, design, animation, webdev
Published: 2023-04-14 07:17:00

Free CSS Loading Animation for your website 

#### Cube Flipping Loader CSS Animation

---

{% youtube EmhtlC4o4KM %}

 ---
### [Source code](https://democoding.netlify.app/loaders/cube-flipping-loader-css-animation)


---

## For more information
 

1. Subscribe my Youtube Channel 
[https://www.youtube.com/@democode](https://www.youtube.com/@democode) 

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Follow me on Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Check out my Facebook Page 
[Programming memes by Coder](https://www.facebook.com/programmingmemesbycoders)

5. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

 
---
---

{% twitter 1642235382074064896 %}
GQ, remote working locations
Tags: gqeberha, portelizabeth, freelance, remote
Published: 2023-04-14 07:11:10

Working from home can become tiresome, so rather spend one morning a week working from a remote location. 

Here is my list of options, in order of my favourite in Port Elizabeth:

[Mug and bean Walmer Park](https://goo.gl/maps/JmyAfzNuTP38SVAR9) 
+Free unlimited wifi
+Plug points
+Nice food menu (unlimited filter coffee)
-Gets noisy during lunch
-No view
+Prefer upstairs
+Get your washed while you work

[Wimpy Walmer Park](https://goo.gl/maps/xjeoKCfce3A2AVDZ6)
+Free unlimited wifi
+Plug points
+You can hide in the back if you don't feel like people watching
+Use your Multiply weekly wins for a free coffee
+Get your washed while you work
-Can get noisy in the mall
-No view
-Generic food menu

[Hello it's me Walmer](https://goo.gl/maps/1Xf9t4Qf9yMhn1VS9)
-Only 1 hour free wifi
-Plug points limited
-Can get noisy
+Slight garden view
+Great menu
Would You Rather Work on a Legacy Codebase or Brand-New Tech Stack?
Tags: discuss, beginners, codenewbie
Published: 2023-04-14 07:00:00

Working with legacy code can be challenging and frustrating, as it often requires extensive maintenance and debugging, but it may also have a stable user base, which can provide job security and professional growth opportunities. Starting a new project with a brand-new tech stack can be exciting, but also comes with challenges like steep learning curves, it can be risky, and it may take a while to get the project off the ground and gain traction.

Which would you choose and why?Or which have you chosen? And how’s it going?

---

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more awesome discussions and online camaraderie!
How Supercomputers Were Introduced In India
Tags: computerscience, supercomputing, prolog
Published: 2023-04-14 06:17:41

Report by :
Sagarneil Ghosh 
College : RCCIIT
university :MAKAUT
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/307e849bk1qwphjl1kq2.jpeg)

Supercomputing was introduced in India during the late 1980s, with the establishment of the Centre for Development of Advanced Computing (C-DAC) in Pune. C-DAC was set up as a national initiative to promote the development of supercomputing in the country, with the aim of providing indigenous solutions for scientific and industrial applications.

The first supercomputer developed by C-DAC was the PARAM series, which was designed and developed in collaboration with the US-based Cray Research Inc. The first PARAM supercomputer, PARAM 8000, was commissioned in 1991 and was one of the fastest supercomputers in the world at that time.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alcg4v8wfdcz9se7yuif.jpeg)

Since then, C-DAC has been instrumental in promoting the development and deployment of supercomputing in India. In 2015, India's first indigenous supercomputer, PARAM ISHAN, was unveiled by C-DAC. It is a 500-teraflop machine and is used for a wide range of scientific and engineering applications.

Today, India has several supercomputers in operation, including PARAM Yuva II, which is ranked among the top 100 supercomputers in the world. Other notable supercomputers in India include SAGA-220, which is used for weather forecasting, and Annapurna, which is used for research in astrophysics.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3nannhmsp9ip7s2vy28.jpeg)

The introduction of supercomputing in India has had a significant impact on the country's scientific and industrial development. Supercomputers have been used for a wide range of applications, including weather forecasting, drug discovery, material science, and aerospace engineering. Supercomputing has also been used to improve the efficiency of industrial processes and to enhance the performance of various systems.

In conclusion, the introduction of supercomputing in India has been a significant development that has contributed to the country's scientific and industrial progress. The efforts of C-DAC have been instrumental in promoting the development of supercomputing in the country, and India's supercomputing capabilities are likely to continue to grow in the years ahead

#mar
#makaut
Exploring the Power of Zero-Knowledge Proofs in Blockchain Technology
Tags: webdev, zeroknowledgeproof, zeroknowledgeproofsblockchain, zkpblockchainsolutions
Published: 2023-04-14 06:13:30

Zero-knowledge proofs (ZKPs) are a cryptographic method that allow a user to prove the authenticity of a statement without revealing any information beyond the statement itself. This powerful concept has the potential to revolutionize the blockchain industry by providing enhanced security and privacy for its users.

Also Read: _**[How Zero-Knowledge Proofs are Revolutionizing Blockchain Technology](https://www.codezeros.com/blog/how-zero-knowledge-proofs-are-revolutionizing-blockchain-technology)**_

The use of ZKPs in blockchain technology can have a significant impact on several aspects of the industry, including authentication, confidentiality, and scalability. Here are some of the ways ZKPs can be applied to blockchain technology:

**- Authentication:** ZKPs can be used to verify the authenticity of a user's identity without revealing their private information. This is particularly important for privacy-focused applications like cryptocurrency, where users want to remain anonymous.

**- Confidentiality:** ZKPs can also be used to protect sensitive data 
on the blockchain. For example, in healthcare, ZKPs can be used to protect patient data while still allowing doctors and researchers to access the necessary information.

**- Scalability:** ZKPs can also improve the scalability of blockchain technology. By reducing the amount of data that needs to be transmitted and verified on the blockchain, ZKPs can help reduce the processing time and costs associated with blockchain transactions.

In addition to these benefits, ZKPs can also enable the creation of more complex smart contracts that can be executed securely without revealing any sensitive data. This can open up new possibilities for decentralized applications and enhance the overall functionality of the blockchain.

Despite their potential benefits, ZKPs are still a relatively new and complex concept that requires significant technical expertise to implement. However, as the blockchain industry continues to evolve, it is likely that we will see more applications of ZKPs in the future.

## conclusion
ZKPs have the potential to enhance the security and privacy of blockchain technology, making it a more attractive option for a wide range of industries. As more developers become familiar with this technology, we can expect to see new and innovative applications of ZKPs in the blockchain industry in the years to come.