teleren/devto huggingface dataset:
Password show/hide button using vanilla JS
Tags: webdev, javascript, html, css
Published: 2022-04-29 11:28:26

Hello Everyone, I'm back after a long time.
In this post we are going t create a simple password show/hide button using HTML,CSS and JS. 
Incase you're not able to understand what we're going to create then check out this video
   {% youtube u9WbsyTtCbs %}

##HTML:
We create an input field of `type="password"` to Enter the password in it and for creating eye icon we use font awesome.

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<input type="password" placeholder="Enter Your Password" id="pass">
<button id="btn"><i id="icon"class="fa-solid fa-eye"></i></button>

```

##CSS:
For styling, you are free to style the way you want.

##JavaScript
We add an event listener to `showbtn` and `onclick` it call a function. For that we already set `count`= 1 and on click we increment count by 1 
`count += 1`
Now we use `if-else` statement
  ```javascript
if (count %2 == 0){
    
     icon.classList.remove("fa-eye");
    icon.classList.add("fa-eye-slash");
  pass.removeAttribute("type");
  }else{
    icon.classList.remove("fa-eye-slash")
    icon.classList.add("fa-eye");
  pass.setAttribute("type","password");
  }
```
If count is divisible by 2 then we remove `fa-eye` `class` from `icon` and add `fa-eye-slash` `class` to it and remove the type attribute from `pass` to make the password visible.

Else (`count` is not divisible by 2 ) then we remove `fa-eye-slash` `class` from `icon` and add `fa-eye` `class` to it and add  attribute of `type` `password ` `pass` to hide the password. 

The complete JS code is given below

```javascript
let inpPassword = document.getElementById("pass");
let showbtn = document.getElementById("btn");
let icon = document.getElementById("icon");

let count = 1;
showbtn.addEventListener("click", function() {
  count += 1;
  
  if (count %2 == 0){
    
     icon.classList.remove("fa-eye");
    icon.classList.add("fa-eye-slash");
    
    
  pass.removeAttribute("type");
  }else{
    icon.classList.remove("fa-eye-slash")
    icon.classList.add("fa-eye");
  pass.setAttribute("type","password");
  }
});
```

 As I'm writing this post after a long time, maybe this post is not up to that level. I'm sorry for that.

Hope you like this tutorial.
JavaScript has a problem with decimals
Tags: javascript
Published: 2022-04-28 16:52:11

JavaScript handles decimal numbers in a weird way. What happens, for example, if you do the following:

```javascript
const number = 0.1 + 0.2
console.log(number);
// ☝️ It doesn't output 0.3,
//    but 0.30000000000000004!
```

What's going on here is that JavaScript (and other languages, by the way) handle decimal numbers. Internally, it uses the [IEEE 754](https://en.wikipedia.org/wiki/IEEE_754) standard for floating-point arithmetic.

Floating-point arithmetic is the most common way computers can store decimal numeric values, and the IEEE 754 standard is a base-2 standard. That is, it's designed to work with binary (i.e. "0" and "1") numbers, which is how computers handle data.

The problem appears when you try to store a base-10 decimal number in a base-2 system. Let's say we want to store the number "0.1". If you want to store it in binary format, the number would look like this:

<div style="word-break: break-all; font-weight: bold">0&nbsp;.&nbsp;00011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011...</div>

The "0011" sequence loops infinitely! It's exactly the same thing that happens when you want to write 10/3 in base-10: "3.333333..."

Obviously, it's impossible to store an infinite number of decimals, you have to make the cut somewhere. But that also means that you lose some precision when storing the number. After that cut off and the resulting precision loss, the number that is actually stored is <span style="word-break: break-all">0.100000001490116119384765625"</span>. In base-2 systems, this problem happens in lots of cases. 

As most people don't need to be that precise. That's why JavaScript engines generally use rounding to eliminate some digital numbers.

If you create a variable with the value "0.1" (that is stored as <span style="word-break: break-all">"0.100000001490116119384765625"</span>, remember), when you get that variable, the extra digits will be removed and you'll get "0.1" back.

But there are some situations in which the rounding method doesn't work, and the result is a number with lots of weird decimal places.

## What if I actually need precision?
There are situations where you do need decimal precision. An example is when you are dealing with money. Don't use decimal numbers directly. Instead, use a library like [decimal.js](https://www.npmjs.com/package/decimal.js).

## Further reading
If you're interested in reading more, I suggest [floating-point-gui.de](https://floating-point-gui.de/). It's a simple explanation of the problem and how floating-point arithmetic works.

And if you want a fun tool to play with, there's the [IEEE-754 Floating Point Converter](https://www.h-schmidt.net/FloatConverter/IEEE754.html). On that site, you can enter a number and see what is actually being stored.

---

If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/newsletter
What is Context API in React and how to use it?
Tags: javascript, webdev, react, tutorial
Published: 2022-04-29 11:07:48

N.B. This article requires you to have little knowledge of prop drilling and the issue associated with them.

Context API acts as a container for the global state variables which is helpful when you want to avoid prop drilling and pass data from one component to another without the need for passing props.

## Steps to use Context API
### Step 1: Create Context
![create context](https://cdn.hashnode.com/res/hashnode/image/upload/v1650860647514/ZEu1ErRiI.png)

### Step 2: Use Context
![use context](https://cdn.hashnode.com/res/hashnode/image/upload/v1650861610631/aI8-ZQFeG.png)

And that's it. You have successfully implemented Context API.

### Overall Code

![Overall Code](https://cdn.hashnode.com/res/hashnode/image/upload/v1650861852805/BmeDCZHqI.png)

Final Output: 

![final output](https://cdn.hashnode.com/res/hashnode/image/upload/v1650862005691/TR3zn251T.png)

_Thanks for reading this article. I hope it was helpful. Feel free to let me know how I could improve it._
_You can connect with me on [LinkedIn](https://www.linkedin.com/in/ashutoshdash1999/) and [Twitter](https://twitter.com/ashutoshdash99)._
[Desafio] - Calcular o TCO de Alguma Tecnologia
Published: 2022-04-29 10:52:21

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1519992178969243648)

---
 
Ei dev, vamos sair da zona de conforto?

Muitos de vocês devem ter vontade de começar a usar/implantar uma tecnologia nova na empresa, né? Kafka, um banco NoSQL, AWS, etc. Muitas vezes devem ficam frustrados porque nunca vai pra frente.

Você sabe o que é TCO?

cc @sseraphini ↓

![img](https://pbs.twimg.com/media/FRgY1I2VIAA_4Jo?format=jpg&name=small)

---

TCO significa Total Cost of Ownership (Custo Total sobre Propriedade). Ou seja, quanto custa pra vc ter uma coisa, serviço.

Ex.: O TCO duma casa é o preço que vc pagou por ela mais as manutenções, impostos, etc. ↓

---

O desafio que te proponho é tentar calcular o TCO aproximado da tecnologia que vc tanto pede pra usarem na sua empresa, mas parece que ninguém compra sua ideia, mas também não explica o motivo direito. ↓

---

Começa entrando no site e vendo os planos de suporte, licença, etc. Veja também quanto custa um profissional pra manter essa tecnologia. E não vale falar "eu sei, eu mantenho" – a não ser que vc não vá mais fazer o que faz hoje e/ou sua empresa for muito pequena, ok? ↓

---

Quando a gente diz que ser da engenharia de software não é só sobre código, é por causa desses tipos de coisa, sabe? TCO é da disciplina de gestão, e engenharia de software engloba também questões de gestão. ♥️
React Desing Pattern: Props Collection and Getters
Tags: codesandbox, french, react, designpattern
Published: 2022-04-29 10:50:28

Dans ce pattern, l'idée c'est d'envoyer un object de props dans le component:

` <Title {...collectionProps} year="2010" />`

En définisant un getteur on va avoir plus de flexibilité:
<code>
 const getCollectionPropsAdvanced = ({ country, ...other } = {}) => {
    return {
      country,
      city: "Paris",
      ...other
    };
  };
</code>

Avec notre fonction, on va pouvoir définir des props par défaut: 
`{ country, ...other } = {}`
Effectuer des actions spécifique sur une props (`country`), ajouter autant de props qu'on veut (`...other`).

{% codesandbox w8kxif %}
Instructions to install Ubuntu alongside Windows [Dual-boot Mode]
Tags: ubuntu, webdev, installation
Published: 2022-04-29 09:51:49



**Instructions to install Ubuntu alongside Windows [Dual-boot Mode]**

This blog will give you easy instructions to install Ubuntu along with your already existing operating system i.e, Windows. This will give you the convenient option of using two operating systems on one device. Let's get started!

**Step 1:-**
A checklist of what you will need:

- A device with Windows OS already installed

- A proper internet connection

- A USB pen drive with no data stored in it.



It's that simple. That's all you will be needing. Going ahead.

**Step 2:-**
Backup your Data
Firstly it would be good to have a backup of your data stored in some external disk. So go ahead and save all your important files beforehand to prevent any loss of important data.
Reference: [Click here](https://www.pcmag.com/how-to/how-to-back-up-restore-your-documents-in-windows-10#:~:text=Set%20Up%20File%20History%20in,to%20use%20for%20your%20backups.)

**Step 3:-**
Live USB
A lot of applications allow us to create a live Ubuntu USB. I used Rufus and it worked very well
Here's the link to download Rufus
[Click Here](https://rufus.ie/en/)

After downloading Rufus(a tool that identifies your USB), plug in your USB and it will be formatted.
When it runs, make sure you set it to the specifications below

-Partition scheme: GPT
-Target System : UEFI(non CSM)

When the process completes, your LIVE USB is ready.


**Step 4:-**
Free space for Ubuntu
Using Disk Management on your PC, you can make partitions on your disk according to your convenience
Reference:[Click Here](https://askubuntu.com/questions/1233913/how-do-i-create-partitions-for-a-dual-boot-ubuntu-then-windows-on-a-new-hdd
)

**Step 5:-**
Now you may restart your system and press the F10 key to get into BIOS mode and select the USB.

**Step 6:-**
Install Ubuntu in your system and select the partitions you have made.
That's about it. You are good to go now.

_Thank you_
I want to dynamically change collections, but I do not know how to pass "colletions" from components.
Published: 2022-04-29 10:14:33

I want to dynamically change collections, but I do not know how to pass "colletions" from components.    

`import clientPromise from "../../lib/mongodb2";
export default async function handler(req, res ) {
    const collection = req.query.collection;
  const client = await clientPromise;
  const db2 = client.db("javascript_questions");
  switch (req.method) {
    case "GET":
      const question = await db2.collection(collection).find({}).toArray();
      res.json(question);
      break;
  }
} `
sendGrid not delivering emails from a node application hosted on vercel.
Tags: vercel, node, javascript, programming
Published: 2022-04-29 09:40:42

Hello fam, I'm having issues sending emails via a node application hosted on vercel. I'm currently using sendGrid Email API with a verified domain. On development mode, it works fine, but when  deployed to vercel, it will execute with status of 200 but mail wont be delivered. 
here are screenshot of my code snippet.

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


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

Please I would appreciate it a whole lot if someone could help me out. Thanks.
Intelligent Internet Searches: Application of Data Science
Published: 2022-04-29 09:37:58

Regardless of the stream/industry is, data is very important. Data collected from a particular industry can be used for the examination of patterns, movements, etc. This aspect of data causes innumerable applications. This kind of, in turn, has led to the introduction of data science as being an important job avenue. Definitely not only are the jobs created by data science considered to be rewarding, but data scientific disciplines also paves a way to übung the innards of recent technology. Typically the jobs related to the field of information science are an immediate symptoms of its current applications. Due to the continuous development of computing technology, the field of data science has gotten even more interesting. This means as a data science tecnistions it isn't just rewarding in words of financial aspects and also in the area of job satisfaction. [R statistics course](https://www.igmguru.com/data-science-bi/data-science-with-r/) can help you to get the detailed overview.

**Intelligent Internet Searches**

This is a relatively reputed application of data science. Over the years, like various other internet technologies, the straightforward internet search has seen monumental progress. The individuals behind major lookup, Yahoo, Ask, and so out have altered their search algorithms on occasion to make researches more user-friendly. Original searches were awkward. The user should be certain of every keyword entered because a single problem in a search phrase would pop way up an incorrect look for. The data accumulated by search applications and other online companies have recently been utilised in the conviction of the dynamics of the researches and supplying the person with intelligent referrals. This is the reason why almost all the related options related to a particular issue appear before keying the complete look for string. Moreover, data science has also enabled using data from a particular location to determine the searches well-known in a certain area and recommend it to users.
Console.time() and Console.timeEnd()
Published: 2022-04-29 09:20:57

When people use web applications, they want them to deliver fast and efficient performance. As a result, speed has become one of the top metrics that people use to assess the quality of an application.
 
So, as a developer when we start working on a real-life application, then it's not only about achieving the desired result, it's also about how performant our code is?
 
Generally there are multiple ways a work can be done and it becomes important to take an informed decision while opting for a particular solution.
 
⭐ The console object's **time()** and **timeEnd()** methods can be used to analyse the performance of a piece of code.
 
First we call **console.time()** by providing a string argument, then the code that we want to test, then we call **console.timeEnd() **with the same string argument. That's all we need to do, it will now show us the time it took to run this piece of code in our browser console.
 
_Example:_
 
Let's swap two variables in two different ways, and let's find which one is more time-efficient.
 
**1. Destructuring assignment**

```
let a = 3;
let b = 4;
console.time("Destructuring_assignment");
[a, b] = [b, a];
console.timeEnd("Destructuring_assignment");
```
 
**O/P** - `Destructuring_assignment: 0.017333984375 ms`
 
**2. Temporary variable**

```
let a = 3;
let b = 4;
let temp;
console.time("Temporary_variable");
temp = a;
a = b;
b = temp;
console.timeEnd("Temporary_variable");
```
 
**O/P** - `Temporary_variable: 0.008056640625 ms`
 
We can see that by using these techniques, we can quickly obtain the elapsed time in milliseconds, which will aid us in identifying the bottleneck in our code and refactoring it.
 
⛔Note: In this post, I'm talking about the solution by only considering the time factor. There are other factors also that need to be considered while working on a project.
Console Minesweeper Game in Python
Tags: python
Published: 2022-04-29 09:09:26

A project to help me practice python. 
Composed of two files, the main "minesweeper.py" containing the game, and the header "matrix.py" housing all function bodies.
The code for the main file consists in player input taking and validation, as well as calls to the functions which build and update the mine field. 
The code for the header file fulfils the same functionality as the original game, namely: generating mines, numbers, revealing spaces, revealing the matrix to the user. The code is split between that aimed at "matrix", the board containing all the mines and numbers, and "matrix_ui", a second board that serves as the interface in the console.
[GitHub link.](https://github.com/toni-the-dude/minesweeper_cc.git)
How to invest in NFTs?
Tags: nft, blockchain, devops
Published: 2022-04-29 09:09:18

If you’re interested in investing in NFT crypto, first you need to understand the investment process before diving into the market.

https://qfinancialadvisors.com/what-is-best-nft-marketplace/

A non-fungible token(NFT) is a non-interchangeable unit of data stored on a blockchain, a form of digital ledger, that can be sold or traded. NFTs can represent real world items like artwork and real estate.

## Step 1: Buy crypto for NFTs on eTORO

To facilitate your NFT investment, we recommend using eTORO to purchase the crypto. This platform offers all of the leading NFT related cryptos as tradable assets, including ETH, SOL, ALGO and more.

## Step 2: Transfer crypto to crypto wallet

Next you need to set up a crypto wallet. There are numerous you can use. Also it’s important to open a wallet that supports the blockchain network of the NFT that you wish to purchase. Once you open your crypto wallet, you can transfer your crypto holdings from eTORO into the wallet.

## Step 3: Create an account with NFT Marketplace

The next step is to create an NFT marketplace account. Our recommended marketplace is crypto.com. It has minimal trading fees and also it’s quite safe to use.

## Step 4: Verify account

You can now verify your NFT marketplace account in one of two ways:

● If you already have a Crypto.com account, you can click ‘Connect to App’ in your settings menu to link the two accounts together and complete verification.
● If you don’t have a Crypto.com account, you can verify via SMS. Enter your mobile number in the settings menu and then enter the security code that will be sent via SMS to verify your account.

## Step 5: Buy NFTs

The final step is to make your NFT investment. You can browse the crypto.com NFt marketplace and click on any listed NFT you wish to purchase. NFTs will be listed for auction or a fixed price, and you can make purchases using the crypto holdings in your wallet via the crypto.com pay feature. Once the purchase is done, your NFT will be placed in the ‘collectibles’ section of your account, where you can view it or send it to an external crypto wallet.

https://qfinancialadvisors.com/how-to-invest-in-nft-non-fungible-token/

Although investing in NFTs will provide clear exposure to a specific asset’s value, you may wish to gain exposure to the growth of the widden NFT sector. A good way of doing this by investing in NFT companies.
Migrating Limited Objects With Pre-Defined Prefix Using S3 Batch Replication
Tags: aws, cloud, awscommunity, architecture
Published: 2022-04-29 08:53:12

In my previous article, we learned about replicating existing objects between different AWS S3 buckets using S3 Batch Replication. 

[Replicate Existing Objects Using AWS S3 Batch Replication](https://dev.to/kapil_kumawat/replicate-existing-objects-using-aws-s3-batch-replication-4g37)

In this article, we will learn how to migrate limited objects with a pre-defined prefix using S3 Batch Replication which can be done at the time of configuring the replication rule.

Taking a use case where I don't want to replicate all objects from existing S3 source bucket to new target bucket but need certain files with specific names only, that is also now possible with the new update of AWS S3 replication of existing objects.

How to get started
**Step 1**

From the AWS S3 source bucket, you like to migrate objects starting with name ‘house’ as shown below -

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

**Step 2**

Goto Management page and choose Create Replication Rule option.

**Step 3**

Enter Replication Rule name.

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

**Step 4**

Choose option ‘Limit the scope of this rule using one or more filters’.

**Step 5**

In the Prefix option, write the prefix value ‘house’ to limit the scope.

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

**Step 6**

Choose your destination bucket from S3 bucket list. You can replicate objects across different AWS Regions as Cross-Region Replication or can replicate in the same AWS Region as Same-Region Replication.

**Step 7**

Choose an IAM role. With default setting AWS S3 creates a new IAM role with sufficient permission to complete this task. I chose my existing IAM role which I used earlier for replication.

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

**Step 8**

Once you click on Save, a Batch Operation window will appear showing all details that you configured in previous steps. 

**Step 9**

In Status, you will be asked for your confirmation to run this job.

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

**Step 10**

Click on Run Job button.

**Step 11**

Now the job will be in running state and you will see status as Completed once replication job is completed.

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

**Step 12**

Navigate to destination AWS S3 bucket and you will get files with specified prefix only.

In my case, I use the prefix ‘house’ and can only see those objects after replication.

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

**Conclusion**

Using S3 Batch replication we can also replicate a specific set of objects using the prefix option in configuring the replication rule.
AstroX Network have a new dart tool released:
Tags: web3, dart, dfinity, blockchain
Published: 2022-04-29 08:48:35

AstroX Network have a new #dart tool released: 
A candid binding + dart-lang generator!

This awesome tool will help devs saving lots of time writing de/serializer classes on canister calls.  

😘BETA test for now, we will keep polishing. Cheers!
https://github.com/AstroxNetwork/candid_dart

follow us:
https://twitter.com/Astrox_Network
Join us:
https://discord.gg/NPp2R9jHXM