teleren/devto huggingface dataset:
Build & Test React Fast with StackBlitz (free)
Tags: react, angular, ide
Published: 2022-06-21 20:33:50

I've been working on learning React as I work my way through the great book, [React: Up & Running, Building Web Applications (2nd ed)](https://amzn.to/3bmd1T7).

However, always setting up a React project can be a bit of a pain (and it takes up quite a bit of disk space with all those dependencies that npm installs).

## StackBlitz 
Try out [StackBlitz.com](StackBlitz.com)

All you have to do is:

1.  navigate to the site
2. choose a project template (obviously we are going to use the React template)

You may have to create an account on StackBlitz but if you already have a GitHub account (and what self-respecting dev doesn't have a Github account, right? 😁) then you can simply sign in with that account.

## Get Started In Your Browser
All you have to do is start editing your project files right in your browser & you can even have your project hot reload as you make changes.

Here's a snapshot of my current project in the StackBlitz IDE.

![StackBlitz IDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8ewhoiihdwzl8c93293.png)

## StackBlitz Project Types
Even if you're not doing React projects, you may find one of the other many project types work for you.

- Vanilla JavaScript
- Vue 3
- TypeScript
- Bootstrap5
- Angular (with TypeScript)
- RxJS
- NextJS
- Nuxt3
- React (with TypeScript)
- React (with JavaScript)
- HTML5
- SvelteKit

And many more.  

Check it out.  It's a free resource for single devs & it is really helpful.
react component dropdown & detect click outside react component
Published: 2022-06-21 20:27:55

```
import React, { useRef, useEffect, useState } from "react";

const Test = () => {
  const divRef = useRef();
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    function handleDocumentClick(e) {
      if (
        divRef.current &&
        !divRef.current.contains(e.target) &&
        divRef.current !== e.target
      ) {
        setIsOpen(false);
      }
    }

    document.addEventListener("click", handleDocumentClick);

    return () => {
      document.removeEventListener("click", handleDocumentClick);
    };
  }, []);

  return (
    <div>
      <button
        className="px-5 py-2 border border-gray-400 rounded"
        onClick={(e) => {
          e.stopPropagation();
          setIsOpen((prev) => !prev);
        }}>
        English
      </button>
      {isOpen && (
        <div
          ref={divRef}
          className="px-5 py-2 rounded border border-gray-400 rounded flex flex-col gap-3 inline-flex">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
            aut voluptatem reiciendis modi sapiente deleniti quaerat repellat,
            provident ea quas nemo voluptatum cupiditate perferendis iusto earum
            molestiae molestias ratione veniam.
          </div>
          <button>Arabic</button>
          <button>German</button>
        </div>
      )}
    </div>
  );
};

export default Test;

```
Short Babel memo to configure it!
Tags: webdev, javascript
Published: 2022-06-21 19:57:52

If you're a Javascript developper, chances that you have heard about [Babel](https://babeljs.io/) one day are very high.
Most of the time we don't necessary need to configure it ourself, because it is extremely common to use a starter or some boilerplate that come up with the basic configuration.
BUT sometimes we need to dig into that and that's my case, I am terrible at memorize all of thoses settings and It is extremely easy to waste time with that. So this post is simply me sharing my memo note about using Babel.

## A quick reminder: what is babel

**Babel is a JavaScript compiler**. This is mainly use to transform your code into a compatible version of Javascript in most environnements and browsers.

Example from the official documentation:
```js
// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});
```

## Babel installation

**Install babel:**

```sh
npm install --save-dev @babel/core @babel/cli @babel/preset-env
```

**A project need a babel config file.**
There are 2 differents types:

- Project-wide configuration
  - `babel.config.*` files, with the following extensions: `.json`, `.js`, `.cjs`, `.mjs`.
- File-relative configuration
  - `.babelrc.*` files, with the following extensions: `.json`, `.js`, `.cjs`, `.mjs`.
  - `.babelrc` file, with no extension.
  - `package.json` files, with a `"babel"` key.

Whatever your pick, this file contains your **presets** and **plugins**.
Preset and plugins are used to apply **code transformation**.

For example the plugin `@babel/plugin-transform-arrow-functions` is used to transform array functions into ES5 compatible function expressions:

```js
const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};
```

## How to use

To use babel, we first have to install each preset or plugins.

If you need to use modern Javascript, we need **preset-env**

```sh
npm install --save-dev @babel/preset-env
```

To compile Typescript into Javascript use: **preset-typescript**
```shell
npm install --save-dev @babel/preset-typescript
```

Or React.js: **preset-react**
```sh
npm install --save-dev @babel/preset-react
```

In the configuration file (here babel.config.json model):

```json
{
  "presets": ["@babel/preset-typescript", "@babel/env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}
```

Don't forget some options might be avalaible to certains preset and plugins! (see docs).

Finally compile for example a Typescript code:

```sh
npx babel index.ts --out-file ./dist/index.js
```

Hope it helps some people into their project configuration struggle! Have a good day.

[Source](https://babeljs.io/docs/en/)
Why I built another postgres Explorer?
Tags: postgres, database, monitoring, webdev
Published: 2022-06-21 18:15:37

There are a lot of postrgres explorers. I still felt hard to understand meaningful insights, most of them are either very complicated or very minimal.

When I thought of building a postgres explorer I thought that, It should,

- be able to visualise DB performance in simple terms with the help of graphs, charts etc.
- be able to visualise the Disk usage and how each tables are consuming the space.
- be able to generate entity relationships automatically.
- have minimal database exploring features so that developers can play around with tables & queries.
- be able to help people understand if the DB is optimised enough or not by showing the index usage, unused indexes etc.

-----
# Features

#### ER Diagrams
Understand the data relations from the automatically generated ER diagrams
![ER Diagrams](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr9otvshxhemyf2rm8zy.jpg)
  
#### Performance Overview
Understand how frequently table/index are scanned and the slow queries.

#### Usage Analysis
Understand how the database is being used across tables.
![Performance and Usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6soz2pua81mjfybw2bm.jpg)
 
#### SQL Playground.
Use SQL playground to execute SQL queries on the database.
![SQL Playground](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uf07sgidi0yk83y8mmbp.jpg)


#### Database Viewer
DB Lens comes with in-built database viewer where you can explore tables
![DB Explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jff9wuds4e7jnjws79e.jpg)
 

## Who would use this?

The idea was to make it useful for
 
- Backend developers : To help backend developers to understand the database and interact with the SQL. 

- DBAs: To keep an eye on the database metrics like Disk Usage, Index usage, Sequential scan hits, installed extensions etc. 

- Support Engineers : To help support engineers to quickly dive in & get meaningful insights of any database. Automatic ER diagrams would help understanding the schema easily.

---

## Tech stack 

I wanted to make it simple so that people can read and understand the code easily

I went ahead with javascript because the community is super strong and lot of people love working with js codebase.

I chose ElectronJS, because I wanted to make it easily installable across different operating systems. 

Though I started with postgres, I made it in a way that can be extended to many other databases.


--- 

### Launch

The Project is a completely opensource software and freely available at https://github.com/dblens/app
 
I launched the product on [ProductHunt](https://www.producthunt.com/products/db-lens#db-lens)and Hacker News.

The product is also available to download from https://dblens.app

---

If you are someone use postgres database, checkout DB Lens and please provide your feedback.
Amazing Food Card with Hover/Effect using CSS & HTML
Published: 2022-06-21 19:56:17

Hello guys, Today in this post, we’ll learn How to Create an [Amazing Food Card with amazing Hover Effect using CSS and HTML](https://codewithayan.com/amazing-food-card-using-css-html/). To create it we are going to use simple CSS and HTML. Hope you enjoy this post.

Food Cards play a key role in increasing the engagement of a Food selling website. Food Cards display the image, showing the appearance of food. They allow users to see the price and easily order the food. 

Any movement of the Card when hovered signs users of a response-giving website. This makes the User Experience better. You can be creative with it and make your Food Cards interactive in a way that adds a good experience for the users.

## Demo
[Click ](https://codewithayan.com/amazing-food-card-using-css-html/)to watch demo!

## Amazing Food Card HTML CSS (source code)
**HTML Code**

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
       
    <div class="single-menu">
        <img src="hamBurger.jpg" alt="zinger-burger">
        <div class="content">
            <h2>Plain fries<span>100rs</span></h2>
            <p>Crisp to teeth, our in house made French fries.</p>
        </div>
    </div>

    </body>
</html>
```
**CSS Code**

```
body{
     background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh   ;
    }
.single-menu{
     display: flex;
     align-items: center;
     flex-direction: column;
    }
    .single-menu:hover img{
        border-radius: 50%;
    }
    .single-menu img{
        max-width:  250px;
        margin-right: 25px;
        border: 1px solid #ddd;
        padding: 3px;
        transition: .5s;
    }
    .single-menu h2{
        color: red;
        text-transform: capitalize;
        font-size: 21px;
        margin-bottom: 6px;
        padding-bottom: 5px;
    }
    .single-menu p{
        font-size: 15px;
    }
    .single-menu span{
        float: right;
        color: rgb(238, 9, 9);
        font-style: italic;
    }
```
Congratulations! We have now successfully created our[ Amazing Food Card ](https://codewithayan.com/amazing-food-card-using-css-html/)with a simple Hover Effect

My Website: [codewithayan](https://codewithayan.com/), see this to checkout all of my amazing Tutorials.
GCP - Copying VMs between projects
Tags: googlecloud
Published: 2022-06-21 19:50:24

These days at work, I had to move some [virtual machines (VM's)](https://cloud.google.com/compute/docs) between different projects.
After doing a quick search and spending some time, this was the result.
Hope this helps you too.


## Before you begin

> - Be familiar with [gcloud cli](https://cloud.google.com/sdk/docs/install)
> - Any questions, consult the [gcloud reference](https://cloud.google.com/sdk/gcloud/reference)

---

## How to copy VM with single boot disk

1. Create a snapshot of persistent disk:```
gcloud compute snapshots SRC_SNAPSHOT_NAME \
        --source-disk SRC_DISK_NAME \
        --source-disk-zone ZONE \
        --project SRC_PROJECT
```
2. Create a disk image from snapshot:```
gcloud compute snapshots SRC_SNAPSHOT_NAME \
        --source-disk SRC_DISK_NAME \
        --source-disk-zone ZONE \
        --project SRC_PROJECT
```
3. Create the virtual machine:```
gcloud compute instances create DST_VM_NAME \
        --image-project SRC_PROJECT \
        --image SRC_IMG_NAME \
        --project DST_PROJECT
```
---
## How to copy VM with boot disk and, at least one, attach disk

1. Create snapshots from persistent disks:```
gcloud compute disks snapshot BOOT_DISK_NAME DATA_DISK_NAME \
        --snapshot-names SRC_SNAPSHOT_NAME_BOOT,SRC_SNAPSHOT_NAME_DATA \
        --zone ZONE \
        --project SRC_PROJECT`
```
2. Create the disk image from boot snapshot:```
gcloud compute images create SRC_IMG_NAME_BOOT \
        --source-snapshot=SRC_SNAPSHOT_NAME_BOOT \
        --storage-location=ZONE \
        --project=SRC_PROJECT
```
3. Create the disk image from data snapshot:```
gcloud compute images create SRC_IMG_NAME_DATA \
        --source-snapshot=SRC_SNAPSHOT_NAME_DATA \
        --storage-location=ZONE \
        --project=SRC_PROJECT
```
4. Create the virtual machine using boot disk image:```
gcloud compute instances create DST_VM_NAME \
        --image-project SRC_PROJECT \
        --image SRC_IMG_NAME_BOOT \
        --project=DST_PROJECT
```
5. Create persistent disk from data disk image:```
gcloud compute disks create DISK_NAME_DATA \
        --image-project SRC_PROJECT \
        --image SRC_IMG_NAME_DATA \
        --project=DST_PROJECT
```
6. Attach data disk into the instance:```
gcloud compute instances attach-disk DST_VM_NAME \
        --disk DISK_NAME_DATA \
        --project=DST_PROJECT
```
7. Mount the new disk:```
# connect to the instance
gcloud compute ssh DST_VM_NAME --zone ZONE --project GCP_PROJECT
# change to root user
sudo su
# indetify the new disk (probably will be 'sdb')
lsblk
# create new folder
mkdir /FOLDER_NAME
# mount the disk
mount -o discard,defaults /dev/sdb /FOLDER_NAME
# check files
ls /FOLDER_NAME/
# add write permission for all
chmod a+w /FOLDER_NAME
# create new entry to fstab
echo UUID=`sudo blkid -s UUID -o value /dev/sdb` /FOLDER_NAME ext4 discard,defaults,nofail 0 2 | sudo tee -a /etc/fstab
```

---

Any questions or suggestions, please write to me :)
Guide for Smart contracts in Solidity
Tags: blockchain, solidity, tutorial, programming
Published: 2022-06-21 19:48:57

You might heard people in web3 and blockchain talking about smart contracts and solidity.

## What even is a smart contract
In Solidity, smart contract can be considered as collection of constructor, functions and state variables, or to be more beginner friendly we can take contracts as a class in c++.
In a smart contract, we can implement any algorithm or whatever you want to be done once your contract is deployed or compiled.

here is a quick tutorial of the same: {% embed https://www.youtube.com/watch?v=TiVHr9dqiPo %}

## 1. Constructor

Sometimes we want some variables to be declared as soon as our contract is deployed or compiled. So to achieve this we have constructors. These are initialised with a constructor keyword.
`constructor() {}`
Since constructor is just a function that is run on contract creation, you can define or write code for initialising the contract.

## 2. State variables 

General variables where we store the state about our contract.

## 3. Functions

You must be knowing what functions are if you're familiar with any other programming language. If there is something or some block of code that is to be run different times on many places, you can define those code lines in a functions and call that function to run them. 
Same applies in Solidity.

```
contract my_contract{
   uint num_1 = 10;
   uint num_2 = 20;

   function add(uint a, uint b) public pure returns(uint){
      return a + b;
   }
}
```
But here's a thing to know in solidity is that if in a contract you declare a function and doesn't put any implementation inside it, our parent contract will become an `abstract contract`. So our contract will look like this.
```
abstract contract my_contract{
   function add(uint a, uint b) public virtual returns(uint);
}
```
As you can see above, our contract `my_contract` has a function `add` that is not yet implemented, so we have marked our contract as abstract contract.

_I hope this topic was clear, thanks for reading!
Do checkout the video in the blog that describes the same_
Web Video API - PoderesSecretosWeb
Published: 2022-06-21 19:48:00

Existen varias APIs web que estan aqui agrupadas como el Web Video API, estos serian los principales super poderes que nos otorgarian:

1. Tomar la entrada de la webcam y procesarla
2. Tomar la entrada de la misma pantalla y grabarla
3. Generar archivos de video MP4 a partir de animacion en canvas y o en CSS/SVG. 
4. Vision robotica y en general entrada con la Webcam
5. Detectando caras en html
6. Removiendo el background
7. Usando la webcam como Joystick u otros dispositivos virtuales de entrada.
9. Videojuegos con la webcam, Interaccion de elementos y la webcam
10. Leyendo QR desde una webcam.
11. Realidad aumentada en la webcam.


(Esto es un trabajo en proceso y poco a poco ire agregando a todos esos puntos)


## 1. Entrada desde la webcam
[Demo en codepen de entrada desde la webcam con fondo animado](https://codepen.io/juliomrs/pen/QWQjRRq)


## 2. Screen capture API, 

## Documentacion MDN de la Screen capture API 
[w3c mediacapture recorder API](https://w3c.github.io/mediacapture-record/#mediarecorder-api)

[documentacion MediaRecorder de developer.mozilla](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder)

## Casos de uso y demos en codepen.

- Generar archivos de video MP4 a partir de animaciones en canvas.
- Tomar y modificar la entrada de la webcam
- Grabar video de la pantalla. [Demo en codemen de WebVideoRecorder](https://codepen.io/juliomrs/pen/KKQVjwX)
{% codepen https://codepen.io/juliomrs/pen/KKQVjwX %}
- RTM, enviar transmisiones de video

## 10. Leyendo QR desde la webcam o la camara.por ahora les paso el link. https://daily-dev-tips.com/posts/detecting-barcodes-from-the-webcam/
Windows 10 networking Commands
Tags: tutorial, windows, networking
Published: 2022-06-21 19:43:27

1st. `ping` the purpose of the ping command is to check the reachability of a web-server or IOT device using the ICMP protocol. This is done by sending an echo request message to the destination host and waiting for a response. When the remote host receives the echo request, it will then respond with an echo reply packet. Not all host allow an echo reply packet to be sent back, thus causing all packets that were sent to be dropped.
![Ping-command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pvh592qz9w0m4g5fm70.PNG)

2nd. `tracert` also known as traceroute, can trace the path that a packet takes to reach its destination. It reports the location and travel time of each hop the packet makes as it travels from device to device. I won't display this command in action because I don't want to display any of my IP address information. If you pop up a CMD terminal, and type the following `tracert www.google.com`, you'll be able to see the hops the packet takes to reach google.

3rd. `netstat` displays detailed network statics about all active connections on the host machine and how it communicates with other network devices. Lets try the following command, `netstat -ano`. 
`-a` will list the open sockets in addition to active connections.
`-n` will display addresses and port numbers numerically.
`-o `presents connections with the associated process ID in each case. 
![netstat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/170ubpeyqtkac4qqt1po.png)
Netstat is vast in its commands, so if you wish to learn more about it, I will leave links below.

4th. `nslookup` can be used to find IP address info that corresponds to a host. It's useful for getting information from a DNS server.
![nslookup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljhyicgu8kp7sbxtdwvf.PNG)

Links
https://www.ionos.com/digitalguide/server/tools/netstat-commands/

Thanks for reading
Kenji
Custom fonts in react-native.
Tags: reactnative, react, javascript, tutorial
Published: 2022-06-21 18:59:00

---
canonical_url: https://blog.aamchora.space/custom-fonts-in-react-native
---

**Adding fonts in react-native app can be frustrating. If you are doing it for the first time. But trust me, it is as simple as it sounds. Follow the below steps carefully and it will work as expected.**

1. Download the fonts
2. Create fonts folder inside the assets folder `src/assets/fonts`.
3. Put all the font files inside the fonts folder.

![react-native fonts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfem38qwavbsarzp78la.png)

4.Now create `react-native.config.js` file in your app's root folder and paste below code in it.

```
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./src/assets/fonts'], // <---- fonts folder path
};
```

Run the below command 

`npx react-native link`

And voila, it's done now you can **use the file name as your fontFamily name(don't put extension name after file name)** and it will work like a charm.
How to connect your android device to github using ssh key with termux
Tags: webdev, termux, github, git
Published: 2022-06-21 18:51:00

Recently, I tried installing git and github on my phone. So that I can make changes on the go without being on my pc. I started by installing git. With git alone I thought I was already done. I went to my repo to get the link I want to clone. I ran the regular command as you know it `git clone  "link🔗" `.  It  prompted me with the username and password authentication prompt. Fast forward… with all the inputting and attempts to connect it to github, still no positive result.  Then I discover I have to use shh in the connection as it appears to be the only way. I've searched for different ways to do it. From reading more than 7 blog articles to watching 2 YouTube Videos. Finally, I found the way ✨🎉. 
In this post I'll tell you 5 simple steps I took to install git and **connect it to github successfully** and how you can too.

## Step 1.
Download Termux using termux github build from 
url([https://github.com/termux/termux-app/actions/runs/2518728695](https://github.com/termux/termux-app/actions/runs/2518728695))
When you go to the page scroll down to find these builds and download the topmost. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cw1nz21sir82anh4st1.png)

##Step 2. 
Run `apt update` and `apt upgrade` In your termux terminal. 

##Step 3.
 Run `pkg install git`
    `pkg install openssh`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnk0uzztu1ablswz34un.png)
During the installation process you'll be prompted to create a username and password. You can choose to add or skip by pressing enter. But I'll recommend you skip, you can do that later. 

##Step 4. 
When the ssh installation is done. 
Run `cat  ./ .ssh/id_rsa.pub`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/baobhw5fouvrn5ghhbbj.png)
You'll be presented with some text and your GitHub email address you added in the installation of the previous packages. Copy them all together. They're your public ssh key. If the email is not there, replace the email at the end with your GitHub account email address. 

##Step 5. 
Next go to your GitHub account settings and click the ssh and gpg keys  option. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl9v3tadxxgha2et4fzm.png)
Scroll down
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg4no1htvir5deyzh4ij.png)
Click on add new ssh key. Write a title for the key and paste the key in the provided box below the title.
 **Save.**
Go back to your termux app and start using github as you would on desktop 🖥. You can test by cloning a repo. 

##Conclusion 
Thank you so much. I hope this helps.