teleren/devto huggingface dataset:
5.1 * 100 != 510 🤯 , Why you have to be careful with Doubles and Floats !
Tags: javascript, webdev, programming, java
Published: 2022-07-23 10:26:00

Internally Integers and Floats are stored differently.
This is how integers are stored depending upon the machine the number of bits will be different. ( Normally it will be 32 or 64 bit)

![Integers Representation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdu0o67rohl3rua26sd9.png)

By default most of the modern languages save a float/double 
as double precision( 64 Bit) But for this blog I will show you a 32 bit model! For the same value 20 but 20.0 will be saved in the IEEE754 Double Precision Format.

Below is the image showing single precision format
![32 Bit Single Precision](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dcuuvvpp1gh8w18t5k8.png)


## But why ?
This is because we can save integers easily in the binary form but not floats. Floats are special numbers and always require special care when dealing them especially if you're using them for calculations. [This talks about Floats and Binary](https://www.log2base2.com/storage/how-float-values-are-stored-in-memory.html)

## 5.1
We can see there are some errors during the conversion of this float to binary. This is why we get this title.

![5.1 * 100 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8cztjig8pttqmznbjarb.png)
 
We had this problem when we were developing a payment page as the input should be number. 

The simplest solution is to use regex pattern for number and input type = "text"

. _Peace 🕊_

 
---

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more and contribute open source and may considering a [buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan).

---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - Create AI support agents with your documents in the most affordable price, starts at **0$**. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? [Check out our pricing](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---

If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan). Subscribe to my blogs 

{% embed https://shrihari-portfolio.vercel.app/blogs %}

## More Free Articles From me 
{% embed https://dev.to/shrihari/a-custom-right-click-menu-on-angular-feat-primeng-4hji %}

{% embed https://dev.to/shrihari/top-ui-frameworks-for-angular-and-react-1951 %}

{% embed https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb %}
Ripple Effect using JS animation api
Tags: javascript, css, html, animation
Published: 2022-07-23 10:11:22

see comments in Source Code

```html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Ripple sample</title>
  <!-- 
    Pico.css • Minimal CSS Framework for semantic HTML
  -->
  <link rel="stylesheet"
    href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
  <style>
    h1{
      font-weight:400;
      text-align:center;
    }
    h2{
      text-align:center;
      font-weight:500;
    }
    button{
      /*
        it is important to use position: relative
      */
      position:relative;
      width:200px;
      font-weight:400;
      text-transform: uppercase;
      margin:0 auto;
      box-shadow: 2px 3px 4px rgba(0,0,0,0.4);
      transition: all 200ms ease;
    }
    button:active{
      box-shadow:none;
    }
  </style>
  
</head>
<body class=container>
  
  <hgroup>
    <h1>Ripple</h1>
    <h2>using animation.api</h2>
  </hgroup>
  
  <button>click me</button>
  <p></p>
  <button class=secondary>click me</button>
  <p></p>
  <button class=contrast>click me</button>
  
<script>
  "use strict";
    
  function rippleEffect ( evt ) {
    // get Coordinates from current Button
    let offset = this.getBoundingClientRect(), 
        // create the ripple div
        ripple = document.createElement( 'div' ),
        // save the overflow style from current Button
        aktOverflow = getComputedStyle( this ).overflow,
        // set colors for ripple
        light = `rgba(255,255,255,0)`,
        dark =  `rgba(255,255,255,.3)`,
        // calc the diagonal width from element
        scale = Math.sqrt( 
          ( offset.width*offset.width ) + 
          ( offset.height*offset.height ) )/10;
    // set overflow Button 
    this.style.overflow = 'hidden';
    // style the ripple Element
    ripple.style = `
      width:20px;
      height:20px;
      border-radius: 50%;
      background: radial-gradient(circle, 
      ${dark} 0%, ${light} 5%, ${light} 7%, 
      ${dark} 13%, ${dark} 17%, ${light} 30%, 
      ${light} 35%, ${dark} 51%,${dark} 58%,
      ${light} 68%, ${light} 75%, ${dark} 100%);
      position: absolute;
      opacity: 0;
      transform-origin: 'center center';
      left: ${evt.clientX - offset.left -10}px;
      top: ${evt.clientY - offset.top -10}px;`
    // inject ripple in button
    this.prepend( ripple );
    // create the animate object
    let rippleAni = ripple.animate( [
        { transform: 'scale(0)', opacity:1 },
        { transform: `scale(${scale})`, opacity: .1 }
      ],
      { duration: 600}
    );
    // kill the ripple when animation finished
    Promise.resolve( rippleAni.finished )
      .then( () => { 
        ripple.remove();
        this.style.overflow=aktOverflow;
        }
      );
  }
  
  document.querySelectorAll( 'button' ).forEach( 
      el => el.addEventListener( 'click', rippleEffect )
  )
    
</script>
</body>
</html>
``` 

## TRY IT
{% codepen https://codepen.io/FrankWisniewski/pen/NWYgzvB %}
OneClick: navigate to your favorite actions on the websites you love with just one click
Tags: javascript, webdev, programming, react
Published: 2022-07-23 09:52:00

Let's introduce a simple productivity extension that has been recently featured on Chrome Web Store.

{% embed https://github.com/arifszn/oneclick %}

In my daily life, I need to perform various activities like creating a google meeting, taking a note, creating a GitHub repo or sharing a code block. If I want to create a new google meeting, I need to perform **5** steps.

1. Search for google meet in google.
2. Click on the search result.
3. Click on the 'New Meeting' button.
4. A popup would appear saying if I want to create a meeting for now or later. I would click the 'Start an instant meeting'.
5. I would have to wait depending on the internet speed in each step.

From that, I had the idea If I could create an extension that would increase my productivity by doing these activities in fewer steps. So I created this extension where I can create a meeting in **2** steps.

1. Click the extension.
2. A window will appear. Click the google meet icon.



![Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghn3qkadgld9u5b5n1lh.png)

This extension has 88 useful website shortcuts that are also searchable from the top bar. You can choose from 29 themes to your liking.

- [Web + PWA](https://oneclickweb.netlify.app)
- [Chrome Extension (Featured)](https://chrome.google.com/webstore/detail/oneclick/laonciagkijmeofonnbjlifmjingahok)
- [Firefox Extension](https://addons.mozilla.org/en-US/firefox/addon/oneclick/)
- [Source code](https://github.com/arifszn/OneClick)
CSS Battle: #9 - Tesseract
Tags: css, webdev, beginners, tutorial
Published: 2022-07-23 09:47:33


In this article, I will solve a [Tesseract](https://cssbattle.dev/play/9) CSS Challenge on [CSS Battle](https://cssbattle.dev/). Let's look at the [problem](https://cssbattle.dev/play/9) first.

## Problem 

We need to create the following container by using CSS Properties only:
![Tesseract](https://cssbattle.dev/targets/9.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

{% youtube https://youtu.be/sXfOKCzN_D8 %}

### HTML

```html
<div class="rect"></div>
<div class="square"></div>
<div class="circle"></div>
```


### CSS

Now let's style the containers. 

<CodeTitle title="styles.css" lang="css"/>
```css
body {
  margin: 0;
  background: #222730;
  display: grid;
  place-items: center;
}
.rect {
  width: 100%;
  height: 150px;
  background: #4caab3;
}
.square {
  position: absolute;
  width: 150px;
  height: 150px;
  background: #4caab3;
  transform: rotate(45deg);
  box-shadow: 0 0 0 50px #222730;
}
.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #393e46;
  border-radius: 50px;
}
```

>*Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%`, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)*

>*Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.*

### Wrapping up
There are many ways to solve this. You can share your approach in the comments. If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.
Talkback - Screen Reader in Android
Tags: android, beginners, tutorial, mobile
Published: 2022-07-23 09:36:00

## Previous?

{% embed https://dev.to/rajatt/accessibility-scanner-in-android-4mb1 %}

---
This post is for android developers and anyone who is interested in mobile app development.

{% embed https://youtu.be/1fMGURSVp0g %}

## What is Talkback?
Talkback is a screen-reader by Google available in android devices. It gives spoken feedback so that anyone can use the device without even looking at the screen. This is especially useful for **blind people**.

## How is it different from [Accessibility Scanner](https://dev.to/rajatt/accessibility-scanner-in-android-4mb1)?

Accessibility Scanner: detect errors, **cannot** be used by blind people
Talkback: **cannot** detect errors, actually used by blind people

## Setting up Talkback
1. Open Google Play Store
2. Install **Android Accessibility Suite** app
3. Open **Settings**, search **Talkback**
4. Read all the information about it on the screen.
5. Turn on **Use Service** -> **Allow**

## Common gestures while using Talkback

**Swipe Left/Right**: Screen reader outputs the audio for each view/item in the app so that blind people can understand what's going on in the app. Not all content is spoken at once otherwise the user will lose the context easily. To make it more friendly the screen reader allows **swipe left/right** gesture with which the user can navigate between views back-and-forth.

**Double Tap**: Exactly similar to `single tap` for non-accessibility users. **Why?** Because blind people can tap on screen but don't know exactly where to do that so screen-readers normally highlight a specific view and users can `double-tap` anywhere on the screen and it will act as `single-click` on that highlighted view. 

**Swipe up then right to view** or **Tap with three fingers**: What happens if we have some swipe gesture? For example in `Gmail` app you can swipe on emails to archive or delete email. But how would an accessibility-user do that because a swipe gesture in such cases requires precision and sometimes a particular length of swipe too. For such cases this gesture (`swipe up then right to view`) helps users to navigate to new dialog which shows list of actions that the user can do on specific item.

## Developer tips
1. Try to use any android app using `Talkback` and keep your eyes closed as this will give you much better context.
2. The screen-reader starts from top-left view of screen and with each swipe shifts to next view.
3. The format screen-reader follows is: `<content-text>, <type-of-view>, <possible-gestures>`.

---
The main goal of this post was to introduce you the challenges faced by blind people and how screen readers help them use different android apps.
simluate `&&` and `||` by using Nodejs
Tags: shell, node
Published: 2022-07-23 09:32:00

In the last article I expound how to run two Nodejs Modules in one without shell. The secret is child process offered by Nodejs iteself. Today I will cover other two different types with it that is to simulate `&&` and `||` as shell. 

Found a great explaination of `&&` and `||` about shell.
> `&&` strings commands together. Successive commands only execute if preceding ones succeed.
Similarly, `||` will allow the successive command to execute if the preceding fails.

The signal that shell depends on to determ if the commands succeed ends or not is the `exit code`.  

# The `exit code`
The `exit code` is the code that returned from your program. In the world of NodeJS, we us `process.exit` to exit and set a proper code for exit. e.g. 
```javascript
// exit without error
process.exit(0)

// exit with errors
process.exit(1)
```
In general, `0` used as a success code, and others for anything else.  We usually don't need to set the exit code explictly as the above script, NodeJS handles properly when the program exits.

# Exit code of child process
The child process will emits `exit` event with the code as the data after it ends. And from the main process we can use the following script to inspect the code and make the following actions such as execute another script or not.
```javascript
childprocess.on('exit', (code) => {
  // inspect the code and operate as "&&" or "||"
})
```
# So here we go
```javascript
const fork = require('child_process').fork

// Equivalent to &&
const c1 = fork('./child1.js')
c1.on('exit', (code) => {
  if (code === 0) {
    const c2 = fork('./child2.js', {
      detached: true
    })
  }
})

```

and 
```javascript
const fork = require('child_process').fork
// Equivalent to ||
const c1 = fork('./child1.js')
c1.on('exit', (code) => {
  if (code !== 0) {
    fork('./child2.js', {
      detached: true
    })
  }
})
```

Thanks for Reading.

# References
https://shapeshed.com/unix-exit-codes/
TEXT ANIMATION USING CSS || CSS SHORTS
Tags: css, webdev, beginners, tutorial
Published: 2022-07-23 09:18:56

CSS Shorts is a weekly series covering all aspects of CSS, including properties, preprocessors, positioning, floats, and the most up-to-date styling techniques. Instructor Christopher Glikpo returns every Saturday bringing you short and timely tips that will help new and experienced web developers alike create more beautiful websites and more efficient code. Tune in and learn how to take more control over the style, layout, and even the user experience of your web designs

In this video,we will cover how to animate a text using Css

{% youtube CcZzBzIpJN4 %}
Meta-Analysis study can be a great benefit to society
Tags: writing, metaanalys
Published: 2022-07-23 09:12:00

Those who act or react based on meta-analysis should understand the various biases that could be incorporated into a review. Examples of some potential pitfalls in meta-analysis include publication bias, pipeline bias, and [English language](https://pubrica.com/sevices/editing-and-translation/) bias. In addition, combining studies that are not similar in study design, population, methods of analysis or outcome definitions can lead to biases as well, which may result in spurious conclusions being drawn.
Create your own custom hook in React
Tags: react, javascript, webdev, beginners
Published: 2022-07-23 09:07:07

## What is a custom hook in React ?

A custom Hook is just like a JavaScript function whose name starts with ”use” and that may call other Hooks. 

## Let's create a new custom React hook

So let's create a custom hook to fetch data from an API. We will create an "useLoremipsum" hook to generate lorem ipsum data. Traditionally, this is what we will do:

```
function App() {
  const [loremipsum, setLoremipsum] = React.useState('');
  console.log(loremipsum)
    React.useEffect(() => {
        const fetchLoremipsum = async () => {
            axios.get(`https://baconipsum.com/api/?type=meat-and-filler&paras=20`)
            .then(res => {
                setLoremipsum(res.data);
            })
        }
        fetchLoremipsum();
    
    },[])

}
```
Now let's do the same thing with the "useLoremipsum" hook;
In our App.js file, change the code to:

```
function App() {
  const baconIpsum = useLoremipsum(2);
  console.log(baconIpsum);
}

```
Let's create that function "useLoremipsum" that takes in the argument as the length of the lorem-ipsum text in a new file called "useLoremipsum.js".

```
import React from 'react';
import axios from 'axios';

function useLoremipsum(length) {
    const [loremipsum, setLoremipsum] = React.useState('');

    // Call the function whenever the "length" changes

    React.useEffect(() => {

        const fetchLoremipsum = async () => {

            // Note that we are passing "length" as the argument to "paras" in the URL

            axios.get(`https://baconipsum.com/api/?type=meat-and-filler&paras=${length}`, {
              "Content-Type": 'application/json',
            })
            .then(res => {
                setLoremipsum(res.data);
            })
        }

        fetchLoremipsum();
    
    },[length])
    
    // At last, return the data
    return loremipsum;
}

export default useLoremipsum
```
So, Do I have to name my custom Hooks starting with “use”? No, but it's a good naming convention to follow.
Will the above code work just like the traditional approach? Yes, but building your own Hooks lets you extract component logic into reusable functions.

## Conclusion

Custom Hooks offer the flexibility of sharing logic that wasn’t possible in React components before. Next time when you work on a React project, try to spot cases where a custom Hook could hide complex logic behind a simple interface, or help untangle a messy component. Happy coding!
ACCELQ
Tags: webdev, api, software, programming
Published: 2022-07-23 08:45:16

ACCELQ is the only cloud-based continuous testing platform that seamlessly automates API and web testing without writing a single line of code. [Codeless Test Automation](https://www.accelq.com/codeless/) is integrated with manual testing process under one umbrella, making it possible for Agile teams to manage QA lifecycle effectively. IT teams of all sizes use ACCELQ to accelerate their testing by adapting lifecycle automation approach that spans test design, planning, test generation and execution.

ACCELQ customers typically save over 70% of the cost involved in the change & maintenance efforts in testing, addressing one of the major pain points in the industry. ACCELQ makes this possible with an AI & ML powered core. Design and User-experience is at the heart of ACCELQ's continuous innovation approach, which allows stakeholders with varied levels of technical backgrounds to effectively collaborate for Quality.
Diving into blockchain as a beginner: Part 1
Tags: blockchain, web3, beginners
Published: 2022-07-23 08:27:00

Web3... The new internet! This is already becoming old enough to talk. Honestly I was just listening from everyone about this. Got curious but didn't had the time to look onto it (Because obviously I'm too much lazy :P)

So I was just sitting and listening about Bitcoin, Etherium and Dogecoin :D 

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

But as I living in a country where all technologies came almost 10 years later and it is still a crime to buy and sell cryptocurrency I never had looked onto this. :(
But as recently it is growing interest in my country too. So I just started studying on it.

... And I am amazed to see what I have been missing all these years!

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

> Web3 the groundbreaking New Internet (drum rolls...)

Let's discuss about this amazing Web3. But where did this web3 came up? Where is Web1 and Web2? OK, wait a bit. Let's first discuss about these.

**Web1**
This is simply started with the launch of internet during the 1980s. This is where we the normal users were only the consumers and we only could read the news/articles and after reading could close it.
Only few people has the access to create these contents and these are stored in webpages. So this was only the read access to the normal users.

**Web2**
This is the internet we are using right now and I am able to write this article because of this Web2.0. This came in the 2000s and still roaming here and this is what we understand as internet. Where we the consumers can also be the content creators and can earn if they have a significant follwer base.

But there is a problem with this Web2. Here our personal datas are used to personalised our interests and our datas can be sold because we agreed to sell our data to watch the contents we like. So our datas are sold to different third party companies.

And whenever we click anything, go anywhere, buy anything that data is passed to different companies and they use our data. This can be a serious security issue when our personal data is everywhere in the internet.

To fix these issues we now have the new internet which is called Web3.

**Web3**
This is the new internet where we can be the real owner of our data, assets or contents. No one can control us and can have our data. This can be said a democratized Internet – an Internet that is governed by users for the benefit of users.

Web3 gives users full ownership of their assets, data, practically anything via blockchains.

Ah! Now we are about to start learning about the blockchain. But not now. Lets start it in another [post](https://dev.to/rabibsust/diving-into-blockchain-as-a-beginner-part-2-4h63)... See ya!
VS Code: Associate custom file extension with the known (for syntax highlight and autocomplete)
Tags: vscode, programming, editor, twig
Published: 2022-07-23 07:54:00

## Problem overview

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

[Twig](https://twig.symfony.com/) (`.twig`) is one of [PHP](https://www.php.net/) template engines and a part of essence to develop [Symfony](https://symfony.com/) projects.

[VS Code](https://code.visualstudio.com/) understands `.php` and `.html` but doesn't `.twig`. Therefore, we can't benefit from syntax highlighting and autocomplete of VS Code when editing Twig template files. It's inconvenient 🤔

One way is to get some unofficial extension for Twig in [their marketplace](https://marketplace.visualstudio.com/VSCode). Well, there is another way.

## VS Code user settings

Open user settings and search with "assoc", and you will see "Files: Associations".

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

Click "Add Item". Then type "*.twig" for Item and "html" for "Value". Finally click "OK". That's it.

You will see syntax highlighting in `.twig` just like `.html`. Moreover, try to type some tag text, and you will see it helps with autocomplete 😃

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

Besides, you can't define multiple setting items to the same file extension. If you try to set `*.twig` to `php`, you will lose the previous association aka `*.twig` to `html`. (Well, just in my current opinion, it may not be good to have massive scripts in twig.)

---

With thanks to extensions in the marketplace.
12 Basic Reasons to Learn JavaScript Programming Language
Tags: javascript, frontend, beginners, programming
Published: 2022-07-23 08:07:46

1. **Mobile Apps**

2. **Cloud Dev**

3. **Web Apps**

4. **High Demand**

5. **Easy to Learn**

6. **Beginner Friendly**

7. **Visual Effects**

8. **Frameworks**

9. **BlockChain**

10. **Huge Community**

11. **Front-end**

12. **Back-end**