teleren/devto huggingface dataset:
Have you used - Vite ( Frontend Tool) ??
Tags: webdev, javascript, beginners
Published: 2022-04-09 17:37:38

Say you want to start a new React project, the first thing you will do is run 
```
npx create-react-app my-app
```
Now you have to manually install all the required dependencies. Now this process will take 4-5 mins on an average. 

# Enter `Vite`
Vite is a build tool that promotes a faster development experience for developers. It was created by Evan You.

1. Hot Module Replacement
A fast development server, that provides swift Hot Module Replacement (HMR), due to its enhanced features.

You can read more about ES native modules from here.

2. Rollup
Vite has a build command that bundles the developer’s code with Rollup.

This is a JavaScript module bundler that compiles simple pieces of code and builds them into complex applications.

Since Rollup is pre-configured, it’s easy to generate static applications that are highly optimized for production.

# Benefits of Vite
A developer’s productivity is influenced by many factors including performance and speed.

JavaScript can cause an application to slow down depending on its complexity. Vite resolves this issue by using Esbuild.

EsBuild is a dependency pre-bundler that enhances the pre-bundling of dependencies than other frameworks. This results in increased server speeds and Hot Module Replacement.

# Features of Vite
The key features of Vite include:

- Instant server start.
- Fast Hot Module Replacement.
- Optimized build process.

Let’s now create a React application using Vite.

# Creating a react application using Vite.
Navigate to your desktop and create a new folder. This directory will store all of our files.

Write the following command in your CLI.
```
npm init vite
```
You will see different process running on the screen those are product dependencies and build packages. 

Our project is now created. Let’s install and then run it.

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

Your `package.json` file should look, as shown below:
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj5989l011g4udr8sooq.png)
 
Finally, include the following command to start the dev server:

```
npm run dev
```

Copy and paste the provided link on your browser. You now have React and Vite running on your local server. Congratulations!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwll006hjc50u0s2ipmd.png)
Purge a soft-deleted Azure Key Vault
Tags: azure, devops, keyvault
Published: 2022-04-09 17:35:26

If you came here you probably already know that delete a Key Vault in Azure is not as easy as it sounds. Sure, it's gone from the Azure portal. However, when you try to create one using the same name you'll find out that it was not fully deleted.

The following recipe shows how to get rid of the Key Vault, for good. 

1. Install Azure CLI according to the [following steps](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli). The example below uses `homebrew` (macOS).
 
    ```bash
    brew update && brew install azure-cli
    ```

2. Login and find the soft-deleted key vault you want to purge. If you happen to have multiple subscriptions, use the `--subscription` param to indicate which one should be searched.

    ```bash
    az login
    az keyvault list-deleted
    ```

3. Purge it

    ```bash
    az keyvault purge --name <keyvault-name>
    ```
How to disable security in a PDF that prevents copy & paste
Tags: qpdf, pdf
Published: 2022-04-09 17:25:33



**QPDF** is a hefty library that can inspect and manipulate the structure of PDF files. It can encrypt and expose the internals of a PDF file, and do many other operations useful to end users and PDF developers.

Some PDF creators enable the read-only mode for their documents. In reality, this way of protection has little sense. It relies on PDF reader apps implementation letting them decide what to do when user tries to copy the text. Many of them show error alerts with a message about disabled copying. 

Of course, the text is visible, so nothing prevents us from reading it. The alerts become especially annoying if you own the PDF. You purchased it but since the protection mechanism is still there, you're not allowed to `CTRL + C`.

The following recipe shows how to solve the problem.

1. Download QPDF from the [official website](https://sourceforge.net/projects/qpdf/).

2. Install it according to the instructions for your OS.

3. Run

```bash
qpdf --decrypt in.pdf out.pdf
```
The Bitcoin Rainbow Chart!
Tags: opensource, devjournal, python, blockchain
Published: 2022-04-09 17:22:01

When Jose showed this to me it was love at first sight. While pictures say a thousand words, charts typically fall well short; but not this one. The BTC Rainbow chart has a life of its own and, with inspiration (https://www.blockchaincenter.net/en/bitcoin-rainbow-chart/), he brought it to the OpenBB Terminal. How many investment research platforms bring a playful chart like this together with legacy finance in a modern terminal environment? Only one, and it's OpenBB.

Will BTC continue along Rainbow Road? Only time will tell!

This is only one of the many fascinating charts in the OpenBB Terminal! Python and open-source finance in a modern terminal environment. It's 100% MIT Open Source licensed, so sharpen those crayons!

![Bitcoin Rainbow Chart (https://openbb-finance.github.io/OpenBBTerminal/terminal/cryptocurrency/overview/btcrb/)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b67952tly0qwgwn5vteq.png)

From https://www.blockchaincenter.net/en/bitcoin-rainbow-chart/

> The Rainbow Chart is not investment advice! Past performance is not an indication of future results. The Rainbow Chart is meant to be be a fun way of looking at long term price movements, disregarding the daily volatility “noise”. The color bands follow a logarithmic regression (introduced by Bitcointalk User trolololo in 2014), but are otherwise completely arbitrary and without any scientific basis. We never change them though. In other words: It will only be correct until one day it isn’t anymore. Btw…here is the Ethereum Rainbow Chart

Join the community Discord Server for some #hotTUItalk: https://discord.com/invite/Y4HDyB6Ypu

Official website: https://openbb.co
How to use react-loader-spinner
Published: 2022-04-09 17:19:06

## What is react-loader-spinner?

`react-spinner-loader` provides simple React SVG spinner component which can be implemented for async await operation before data loads to the view.

## How to use react-loader-spinner.

You can install the library using your favorite dependency manager.
**Using yarn:**

`yarn add react-loader-spinner`

**Using npm:**

`npm install react-loader-spinner --save`

Here are some examples of code on how to use `react-loader-spinner` in your react application.

Firstly, Import required css. Import the css to main `app.js` file.

**Code sample:**

```
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
```

Then:

```

import { Audio } from  'react-loader-spinner'


<Audio
    height="100"
    width="100"
    color='grey'
    ariaLabel='loading'
  />
```

**Note:** If webpack throws issue with css. (For older version of this package). Change webpack config as: `test: /\.scss$/ to test: /\.s?css$/`

The newer version just import css file from node modules to `app.js`

## Types of react-loader-spinner and implementations

- **Audio** here is the implementation sample: 	`<Audio color="#00BFFF" height={80} width={80} />`

- **BallTriangle** here is the implementation code sample: `<BallTriangle color="#00BFFF" height={80} width={80} />`

- **Bars** here is the implementation code sample: `<Bars color="#00BFFF" height={80} width={80} />`

- **Circles** here is the implementation code sample: `<Circles color="#00BFFF" height={80} width={80}/>`

- **Grid** here is the implementation code sample: `<Grid color="#00BFFF" height={80} width={80} />`

- **Hearts** here is the implementation code sample: `<Hearts color="#00BFFF" height={80} width={80} />`

- **Oval** here is the implementation code sample: `<Oval color="#00BFFF" height={80} width={80} />`

- **Puff** here is the implementation code sample: `<Puff color="#00BFFF" height={80} width={80} />`

- **Rings** here is the implementation code sample: `<Rings color="#00BFFF" height={80} width={80} />`

- **TailSpin** here is the implementation code sample: `<TailSpin color="#00BFFF" height={80} width={80} />`
 
- **ThreeDots** here is the implementation code sample: `<ThreeDots color="#00BFFF" height={80} width={80} />`

**Note:** Rings spinner is not supported in Safari.

[Check the demo here](https://mhnpd.github.io/react-loader-spinner-example/)


![react-loader-spinner-screenshot-example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkh1ska9qe6nro8opv7l.png)


Thanks for reading...

**Happy Coding!**
Firebase limits doc fields
Tags: firebase, react, limits
Published: 2022-04-09 17:14:12

Today I ill be figuring out the max amount of items a single firestore doc can have and why that is a problem.

## The problem
We all know how limiting firestore is, but don't get me wrong the developer experience is amazing just plop down some functions to create read and update data it's super easy and simple. 

Firestore sucks at relational data at scale. One way to represent relationships is having other document ids and embed it into the document, but truly how many document ids can fit into one document.


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

The answer is that each firestore document can have at max 19999 different items in a document after that many items adding anything else does not work.

You might ask who would need that many items in a single document. Well features like followers where you grab the others user uid to show a follower and followee relationship is impossible unless you add more documents to show the relationship where it could check first document then second document with a list of uids. But that is clunky and doesn't work well.

So unless the firebase team can do something better for relational data firestore is an inadequate option for large scale relational data.
How to switch AKS clusters
Tags: azure, kubernetes, devops
Published: 2022-04-09 17:13:16

The following recipe shows how to quickly change the Kubernetes context using Azure CLI.

**Step 1.** Login to Azure with the Azure CLI
  
```bash
az login
```

**Step 2.** Get the list of AKS clusters

```bash
az aks list -o table
```

**Step 3.** Switch cluster (context)

```bash
kubectl config use-context <cluster-name>
```
Variables and data types SOLIDITY
Tags: smart, web3, solidity
Published: 2022-04-09 17:08:48

## VARIABLES

### Global variables
- `msg` Every transaction is a signed message. In this object comes the data of said message (sender, value, etc.)
- `tx` values related to the current transaction
- `block` values related to the current block

### Local variables 
- They are those that occur during execution. In the EVM it is the part corresponding to volatile memory

### State variables
- They are variables that are stored in the ROM portion of the EVM. It's persistent memory

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

## DATA TYPES 
### Integers
- `uint` nonnegative (8 - 256 bits)
- `int`  8 - (256 bits)

### Boolean
- `true`
- `false`

## Address
- `address` This type of data represents addresses of ETH (20 bytes)
- contains methods like `.transfer` or `.balance`

## String
- `string` 

## Bytes
- `bytes`
Prepare yourself for the next level in Coding.
Tags: javascript, programming, beginners, webdev
Published: 2022-04-09 17:06:02

Hello, DEV Friends. Hope you're doing Good! While working on my side project in MERN stack suddenly a thought dawned on me, "Hey! I started with React.." Well, this article is about preparing yourself for the next level in Coding.

There are many levels of an Engineer but I will be talking about below levels only:

1.Junior Developer: When you are a Junior Developer, (well I am not talking about the designation but where you think you are in Coding.) you know about a skill up to some level and mostly you have to Google to find out how to build that Application in a certain way. We all have been through that tutorial hell to practice that 1 app, master that one skill from different resources. Practicing 10 apps in that skill. Learning how to create Todo app with all the basic functionalities in that language/framework. Then going through that video once again to see how that person built that functionality.

2.Mid-level Developer: Then there is a level where you have figured out where you can find the right resources to learn a skill. You know how to build a certain app but now you know how to find a better solution. You no longer find yourself lost in tutorials most of the time. You have learnt how to work with different tools, debugging, application performance related tools, etc.

3.Senior Developer: At this level you have gained a lot of experience(not necessarily professional but can be self-practice) and practiced your skill. You know how to learn different languages, frameworks, tools. If you cannot find a solution for a certain problem, you know how to build one and the optimized one.You have learnt how to learn.

There are more levels than above like Lead Developer, etc. My only opinion is at whatever level you are just find out what are the skills, tools and how much practice is required to reach the next level of yours. Find out how can you make yourself better in your skill.

The opinion shared above are totally based on my personal experience and understanding. Let me know your views on this article and share your personal experience in the comments section.

Happy Coding :)
You can follow me on [Twitter](https://twitter.com/kritikasri27) and [Github](https://github.com/kritika27).
Git Log Prettify
Tags: beginners, git
Published: 2022-04-10 12:46:28

---
title: Git Log Prettify
published: true
date: 2022-04-09 17:00:01 UTC
tags: beginners,git
series: "Sunday Snippet"
canonical_url: https://clavinjune.dev/en/blogs/git-log-prettify/
---

 ![Sunday Snippet #12 git log prettify](https://clavinjune.dev/img/sunday-snippet/image.png "Sunday Snippet #12 git log prettify")

```shell
$ git log -5 \
--pretty='format:{"shortRef": "%h", "authorDateIso": "%aI", "authorName": "%aL", "message": "%f"}'
```

```shell
{"shortRef": "da8920f5", "authorDateIso": "2022-04-04T00:47:49+00:00", "authorName": "24659468+ClavinJune", "message": "GH-Actions-CD"}
{"shortRef": "16b77e0b", "authorDateIso": "2022-04-03T20:35:22+07:00", "authorName": "24659468+ClavinJune", "message": "build-Sun-03-Apr-2022-20-35-22-0700"}
{"shortRef": "950aaea6", "authorDateIso": "2022-03-29T09:12:26+07:00", "authorName": "clavianus.juneardo", "message": "Update-main.yml"}
{"shortRef": "e4f74e7c", "authorDateIso": "2022-03-29T09:12:05+07:00", "authorName": "clavianus.juneardo", "message": "Update-main.yml"}
{"shortRef": "b16f6ca7", "authorDateIso": "2022-03-27T00:49:02+00:00", "authorName": "24659468+ClavinJune", "message": "GH-Actions-CD"}
```

[Reference](https://git-scm.com/docs/pretty-formats)
Actualización de la perforación de Manicouagan Critical Metals: rodio de alta calidad
Published: 2022-04-09 16:57:03

St-Georges Eco-Mining Corp. (CSE:SX)(OTCQB:SXOOF)(FSE:85G1) se complace en dar a conocer los resultados parciales adicionales de su campaña de perforación 2021 en su Proyecto Manicouagan, 100% propio.

Los núcleos de perforación muestreados arrojan resultados de hasta 0,84 g/t de rodio, 1,3 g/t de rutenio, 0,16 g/t de osmio y 0,3 g/t de iridio en 0,5 metros.

Se seleccionaron ocho muestras separadas para volver a analizar todos los elementos del grupo del platino (PGE) del pozo 21-18. Los resultados promedio adicionales sobre la zona de 2 metros previamente publicada el 25 de marzo de 2022 (de 47,5 metros a 49,5 metros) incluyen 0,55 g/t de rodio, 1,087 g/t de rutenio, 0,214 g/t de iridio y 0,11 g/t de osmio. La compañía cree que estos son créditos significativos para la sección de 2 metros intersectada en el pozo 2021-18. Estos resultados coinciden con las muestras aleatorias recogidas en el muestreo a granel y atestiguan la extensión vertical de níquel-cobalto y PGE presentes en este sistema. Por lo tanto, la Compañía tiene la intención de acelerar su programa de muestreo metalúrgico para determinar la viabilidad de separar y recuperar económicamente los diversos conjuntos de minerales identificados en el descubrimiento de sulfuro masivo de Manicouagan.

Las muestras se enviaron desde los laboratorios ALS de Val D'or a Bureau Veritas para realizar un conjunto completo de ensayos. Las ocho muestras fueron seleccionadas de entre los mejores valores reportados previamente por ALS e informados en el último comunicado de prensa de la Compañía del 24 de marzo de 2022 (Discovery of High-Grade Nickel & Palladium Corridor Confirmed). Por lo tanto, las muestras no son secuenciales a lo largo de la referencia anterior a 6,5 metros, sino que son secuenciales a través de la sección de 2 metros previamente anunciada. Los mejores resultados de 2 metros para el platino y el paladio se presentan en una comparación paralela en la Tabla 1, junto con resultados adicionales para el iridio, el osmio, el rodio y el rutenio.

Comparativamente, los resultados de los ensayos para el platino y el paladio fueron de naturaleza similar. Varias de las muestras de mayor grado para el platino y el paladio mostraron disminuciones con respecto a los resultados anteriores de 2 metros informados en el último comunicado de prensa. Esto redujo los valores de platino en un 8% y los de paladio en un 18%, como se muestra en la Tabla 1 anterior. Estas variaciones pueden atribuirse a uno o a ambos de los diferentes procesos utilizados para establecer los valores de ensayo y/o a las inconsistencias del contenido mineral en la muestra. De hecho, el mayor contenido de hierro (sulfuros masivos +25% a >50%) está presente en esta zona de 2 metros y puede haber contribuido a cualquier problema de procesamiento presente.

[Leer Mas...](http://www.gdweb.es/)
Divi Child Theme erstellen oder Downloaden: So gelingt der Start mit Child Themes in Divi
Tags: wordpress, elegantthemes
Published: 2022-04-09 17:09:04

---
title: Divi Child Theme erstellen oder Downloaden: So gelingt der Start mit Child Themes in Divi
published: true
date: 2022-04-09 16:28:04 UTC
tags: WordPress,ElegantThemes
canonical_url: https://bloggerpilot.com/divi-child-theme/
---

![Divi Child Theme erstellen oder Downloaden: So gelingt der Start mit Child Themes in Divi](https://bloggerpilot.com/wp-content/uploads/2022/04/divi-child-theme.png)

Hast du dich schon einmal gefragt, was genau ein Child...

Der Original-Artikel erschien auf [Divi Child Theme erstellen oder Downloaden: So gelingt der Start mit Child Themes in Divi](https://bloggerpilot.com/divi-child-theme/).

Wenn du schon einmal ein Child-Theme für ein Divi-Layout erstellt hast, weißt du, dass es eine der schwierigsten Aufgaben ist, es richtig zu machen. Die Child-Theme-Struktur von Divi ist ein bisschen kompliziert, und wenn du dich nicht gut mit CSS und HTML auskennst, kann es dir zu viel werden. Zum Glück gibt es einfache Möglichkeiten, ein Child-Theme zu erstellen oder herunterzuladen, und es gibt ein paar kostenlose Divi Child-Themes für den Anfang.

1. Divi Child Theme erstellen oder herunterladen

2. Erstelle ein Child Theme

3. Wie man ein Child Theme erstellt

4. Vorteile der Verwendung eines Child-Themes

5. Ein Child Theme erstellen

Ein Child-Theme ist eine WordPress-Datei, die die Funktionen des Eltern-Themes erbt, aber eigene Funktionen hinzufügt. Child-Themes sind praktisch, weil Entwickler ein Child-Theme als Vorlage verwenden können, um Themes schnell zu aktualisieren oder zu ändern, ohne die Funktionalität ihres Themes zu verändern. Child-Themes sind äußerst nützlich und sie geben dir die Kontrolle über dein Theme.

Abgesehen davon, dass du ein Theme willst, das gut aussieht, alle Funktionen hat, die du willst und brauchst, und nicht viel Geld kostet, ziehst du vielleicht auch ein Divi Child Theme in Betracht. Das ist sicherlich eine gute Option, aber je nach deinen Bedürfnissen ist es nicht unbedingt die beste Wahl für dich.
I create my portfolio today, I want your reviews.
Tags: beginners, productivity, discuss, career
Published: 2022-04-09 16:18:45

<!-- title: I create my portfolio today, I want your reviews. -->
## I have recently created my portfolio today, I want your views regarding aspects of 
     design,
     UI,
     favicon,
     theming
     features and alot.

here it is have a look [`HomePage`](https://abh.vercel.app)

![abhvercel.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649518923528/bC5VZgts2.png)

<!-- Hey what type of reviews should I take from people  -->
### [`Background Color`](#background) 
- ![#1589F0](https://via.placeholder.com/15/00000/000000?text=+) `#000000` for background color Main theme color.
- ![#111111](https://via.placeholder.com/15/1111111/000000?text=+) `#111111` for background color secondary theme color.

### [`Font/ Text Family:`](#font)
Actullay, I haven't sorted any font, but I am using [`Inter from Google Fonts`](https://fonts.google.com/specimen/Inter?query=inter)

### [`Font Text Color`](#fontcolor)
Here are list of colors I have used for text:
Text main color: - ![#ffffff](https://via.placeholder.com/15/ffffff/000000?text=+) `#ffffff`
Text secondary color: - ![#999999](https://via.placeholder.com/15/999999/000000?text=+) `#999999`
Text for Links/Buttons: - ![#52a9ff](https://via.placeholder.com/15/52a9ff/000000?text=+) `#52a9ff`

## Do tell me about the way I have present it, also how's the tagline.
```javascript
tagline: 19,who keeps think... creator of Open Source Apple Store API
```


### does any things feels incomplete or missing? regarding my portfolio? share below.


### Have a look a Favicon animating in your browser.
![Image](https://abh.vercel.app/vercel.svg)
some thing like this...

# Reach me any where.
Twitter: [`@Abhayprajapati_`](https://twitter.com/abhayprajapati_)
Github: [`@Abhayprajapati`](https://github.com/theabhayprajapati)

## thank you for reading
<!-- expected time to read -->
4 websites startups can use
Tags: webdev, productivity
Published: 2022-04-09 16:08:12



[Zapier](https://zapier.com/) on a daily basis. Connect your applications and automate workflows. Easy automation for busy people. Zapier automatically moves information between your web applications, so you can focus on what matters most to you.
Things you can do with Zapier are:

- Get notified about new form submissions. Know when someone fills out your form, whether it's a customer response, a work request, or something else. It helps you act quickly.
- Build  your way without coding. You can solve problems quickly with templates. You can choose from thousands of pre-made templates and create a Zap in just a few clicks.
- Customize Zap to meet any challenge. Tailor automated solutions to your team's needs by adding multiple steps and workflow logic.

[Notion](https://www.notion.so/). The notion is a workspace that adapts to your needs. It's as minimal or  powerful as you need it to be. Continuity concept is the easiest way to centralize information  somewhere and transmit it  to others. Especially for remote teams, this is extremely important. Notion's ease of use is one of its features.

[Figma](https://www.figma.com/). Figma connects everyone in the design process so teams can deliver better products, faster.

[Miro](https://miro.com/). Miro is a perfect tool to facilitate remote collaboration, whiteboarding, and reinvestigation.

See you soon.