teleren/devto huggingface dataset:
Typing effect in React with typed.js and hooks
Tags: react, typing, typescript, webdev
Published: 2021-06-12 16:10:16

## Hello Developers 🤩🤩🤩

Let's admit it typing effect looks cool and the good news is we can achieve it without any pain 😜.

### Let's install it first.
```npm 
    npm install typed.js
    or
    yarn add typed.js
    or
    bower install typed.js
```
### Setup typed.js

* Let's dive into the code.

```jsx

import Typed from "typed.js";
import { useEffect, useRef } from "react";

export default function App() {
  // Create Ref element.
  const el = useRef(null);

  useEffect(() => {
    const typed = new Typed(el.current, {
      strings: ["Handy", "Mandy", "Candy", "More Strings"], // Strings to display
      // Speed settings, try diffrent values untill you get good results
      startDelay: 300,
      typeSpeed: 100,
      backSpeed: 100,
      backDelay: 100
    });

    // Destropying
    return () => {
      typed.destroy();
    };
  }, []);

  return (
    <div>
      <h1>Hello Developers</h1>
      {/* Element to display typing strings */}
      <span ref={el}></span>
    </div>
  );
}

```
* Kaboom🔥🔥🔥 with just some lines of codes we achieve a lot thanks to typed.js

### Let's explore typed.js

* Custom cursor.
* Loop.
* Smart backspace

```jsx

    ...
  useEffect(() => {
    const typed = new Typed(el.current, {
      strings: ["Handy", "Mandy", "Candy", "More Strings"], // Strings to display
      // Speed settings, try diffrent values untill you get good results
      startDelay: 300,
      typeSpeed: 100,
      backSpeed: 100,
      backDelay: 100,
      smartBackspace: true,
      loop: true,
      showCursor: true,
      cursorChar: "!"
    });

    // Destropying
    return () => {
      typed.destroy();
    };
  }, []);
    ...

```

* For TypeScript lovers it provide types by default.

Closing here 👋👋👋.

[Typed.js examples](http://mattboldt.github.io/typed.js/)
[Typed.js docs](http://mattboldt.github.io/typed.js/docs/)

#HappyLearing.
#HappyCoding.


> This is **Shareef**.
> [Live demo](https://typing-beta-sepia.vercel.app/)
> [GitHub repo of this blog](https://github.com/shareef99/blogs/tree/master/typing)
> My [GitHub](https://github.com/shareef99)
> My [Portfolio](https://portfolio.shareef.vercel.app/)
> Twitter [ShareefBhai99](https://twitter.com/shareefBhai99)
> [Linkedin](https://www.linkedin.com/in/nadeem-shareef-7a8394182/)

-------------------------------------------------------
> Cover photo by [Firmbee
](https://pixabay.com/users/firmbee-663163/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=583841) from [Pixabay](https://pixabay.com/)
Collision detection with javascript
Tags: javascript
Published: 2021-06-12 15:55:47

Hello world.....

Todays topic is focused on collision detection, i am a big fan of making 2d games with javscript and i could remember vividly in the past i had to quit some of mu games because of no knowledge on how to handle collisions ....
But luckily i am here to unveil a method that could work.....


I used this for one of my piano tiles game ,basically what it does is render some random tiles and when they are hit they give off a sound...
Seeming interesting huh...

Well for the fun part i handled collisions by simply calling " tiles.getBoundingClientRect().bottom " and i kept monitoring its position which is relative to the window....

So i ran an if statement that checks when the boxBottom cordinates is >= window.innerHeight

So then i would cancel the interval....
Thats it collision detected 


For vertical scrolls


Leave a comment if you would like to view the game or source code on github,and you could also suggest me better ways to handle collisions 

♥
How to Make Sanity CMS Work in China?
Tags: sanityio, headlesscms, gatsby, 21yunbox
Published: 2021-06-12 15:52:17

---
canonical_url: https://www.21cloudbox.com/solutions/how-to-make-sanity-work-in-china.html
---
## What is Sanity CMS?
Sanity is one of many headless CMS (content management systems) for structured content. Headless CMS helps content editors, marketers, and developers work together to deliver a better content experience to their users.

<p>&nbsp;</p>
## Does Sanity CMS work in China?

<p>&nbsp;</p>
The short answer is **No**. 

<p>&nbsp;</p>
Why? Sanity is built and hosted on top of the Google Cloud Platform which is blocked completely in China. 

Here is the long answer:

We reached out to the Sanity team to see if their service works in China, and here is what we got:

![Sanity's response to their service working in China](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t1m2n7xcxsd9alucaod.png)

<p>&nbsp;</p>
So simply put, if the Sanity team doesn't have experience with China, you are unlikely to get good support from them. If you are just testing Sanity out, and don't need your site to be highly available in China. It doesn't hurt to try.

Since the Sanity CMS is based on GCP (Google Cloud Platform), if GCP has good support in China, we probably can still use it in production, but what we found was this: 

<p>&nbsp;</p>

> " **Google does not offer and has not offered cloud platform services inside China** and Google Cloud is not weighing options to offer the Google Cloud Platform (GCP) in China." – [Google's Media Statement](https://techcrunch.com/2020/07/08/google-reportedly-cancelled-a-cloud-project-meant-for-countries-including-china/)

<p>&nbsp;</p>

So this looks like Sanity CMS doesn't work in China by "words" and it is also not in the coverage area of the Sanity and GCP. The next thing we want to know is: if a website is published with Sanity CMS, whether the site can be loaded in China or not. More specifically, how fast the site loads in China. Here are the speed test results:
......
<p>&nbsp;</p>
To read the full content of this post, go to: [https://launch-in-china.21cloudbox.com/solutions/how-to-make-sanity-work-in-china.html](https://launch-in-china.21cloudbox.com/solutions/how-to-make-sanity-work-in-china.html)

<p>&nbsp;</p>
<p>&nbsp;</p>
Nodejs vs python on the web
Tags: python
Published: 2021-06-12 15:45:49

I have been working with javascript for a while now and i think javascript is faster than python on the web ....100%

Javscript was built basically for the web and python being like an all purpose programming language cant compare to javascript when it comes to the browser

Eg 
Nodejs vs python for backend

I say the winner is Nodejs


Leave your thoughts on which you prefer and solid reasons why
JavaScript-30-Day-12
Tags: javascript, github, webdev
Published: 2021-06-12 15:33:22

#<center>Keyboard Sequence Detection</center>

**[demo](https://cenacrharsh.github.io/JS-30-DAY-12/)**

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

Today we'll be making a Key Sequencing Detection that is when some one inputs a certain sequence of keys into your window then something happens, used most of the time online for Konami Code.

First of all we would we would create an empty array to store all the keys we type and also create a secret code of our choice.

```javascript
const pressed = [];
const secretCode = "harsh";
```

Now we would add a `keyup` event on the window and we and we would  extract the `keycode` and add it into the array.

```javascript
window.addEventListener("keyup", (e) => {
        pressed.push(e.key);
        );
```

But this would keep increasing the size of the array as we go on typing so we need to trim the array to the maximum size we would ever need that is the size of our secret code.

For that we would use `splice()` and since we want to trim the array from the back that is as soon as the array goes beyond the required size it will start removing elements from the start.

```javascript
window.addEventListener("keyup", (e) => {
        pressed.push(e.key);
        pressed.splice(
          -secretCode.length - 1,
          pressed.length - secretCode.length
        );
```

Now finally we would check if the array contains our secret code or not and for that we would convert the individual array elements into a string using `.join()` and then use `includes()` function to see if our secret code is present in the array.

```javascript
window.addEventListener("keyup", (e) => {
        pressed.push(e.key);
        pressed.splice(
          -secretCode.length - 1,
          pressed.length - secretCode.length
        );
        if (pressed.join("").includes(secretCode)) {
          console.log("secretCode Matched");
          cornify_add();
        }
      });
```

We also used 
```javscript
<script
      type="text/javascript"
      src="https://www.cornify.com/js/cornify.js"
    ></script>
```

and with this our project for the day was completed.

GitHub repo:
{% github cenacrharsh/JS-30-DAY-12 no-readme %}

###Blog on Day-11 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-11-1icc %}

###Blog on Day-10 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-10-2nl5 %}

###Blog on Day-9 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-9-328i %}

[Follow me on Twitter](https://twitter.com/cenacr007_harsh)
[Follow me on Linkedin](https://www.linkedin.com/in/kumarharsh22/)

**DEV Profile**

{% user cenacr007_harsh %}

You can also do the challenge at [javascript30](https://javascript30.com/)

Thanks @wesbos , [WesBos](https://github.com/wesbos) to share this with us! 😊💖

**Please comment and let me know your views**
##Thank You!
How to do your first contribution with an Open Source project in GitHub ?
Tags: github, opensource, programming, beginners
Published: 2021-06-12 15:31:57

#Follow these steps

1. Go to advanced search of GitHub [GitHub advanced search](https://github.com/search/advanced?&type=Repositories)

2. Go to issues options, set "in the state" to `open` and set "with the labels" as `good first issue`.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5j81zmfpcm4c0zv95xo.png)

3. Press the search button.

Now, you recieve open issues from GitHub repositories which are "Beginner Friendly".

Personal Blog @[danyson.github.io](https://danyson.github.io/)
LInQer for Typescript is here!
Tags: programming, linq, typescript, npm
Published: 2021-06-16 20:13:14

---
title: LInQer for Typescript is here!
published: true
date: 2021-06-12 15:22:35 UTC
tags: programming,linq,typescript,npm
canonical_url: https://siderite.dev/blog/linqer-for-typescript-here/
---

Original post at: https://siderite.dev/blog/linqer-for-typescript-here/

A year or so ago I wrote a Javascript library that I then ported (badly) to Typescript and which was adding the sweet versatility and performance of LINQ to the \*script world. Now I've rewritten the entire thing into a Typescript library. I've abandoned the separation into three different Javascript files. It is just one having everything you need.

I haven't tested it in the wild, but you can get the new version here:

Github: [https://github.com/Siderite/LInQer-ts](https://github.com/Siderite/LInQer-ts "Linqer for Typescript")

NPM: [https://www.npmjs.com/package/@siderite/linqer-ts](https://www.npmjs.com/package/@siderite/linqer-ts "Linqer for Typescript")

Documentation online: [https://siderite.github.io/LInQer-ts](https://siderite.github.io/LInQer-ts/ "Documentation for developers")

Using the library in the browser directly: [https://siderite.github.io/LInQer-ts/lib/LInQer.js](https://siderite.github.io/LInQer-ts/lib/LInQer.js "Full version") and [https://siderite.github.io/LInQer-ts/lib/LInQer.min.js](https://siderite.github.io/LInQer-ts/lib/LInQer.min.js "Minimized version")

Please give me all the feedback you can! I would really love to hear from people who use this in:

- Typescript
- Node.js
- browser web sites

The main blog post URL for the project is still [https://siderite.dev/blog/linq-in-javascript-linqer](/blog/linq-in-javascript-linqer/ "LInQ in Javascript: LInQer!") as the official URL for both libraries.

Have fun using it!
Why I prefer this style
Tags: c, cpp, bracket
Published: 2021-06-12 15:18:54

I prefer,
```
#include <stdio.h>

int main() {
  printf("I prefer this");
}
```
More than this
```
#include <stdio.h>

int main()
{
  printf("I do not prefer this");
}
```
Because the **line** is less than the previous. Note, that **I did not mention the size is lesser** than the previous, they both are the same size.
But of course, it is up to the developer, coder, or the programmer to decide which style they use. I was just sharing my opinion.
Luhn Algorithm
Tags: algorithms, luhn, panify, bank
Published: 2021-06-12 15:16:02

> I have developed my own cc (Credit Card Numbers) validator and generater in last week.

# Luhn Algorithm

Most of the bank in world are using Luhn algorithm to validate their cc numbers are valid or not.

# How Luhn algorithm work?

In my example I will use a validated cc to approve the algorithm that is really work or not in real world.

```
Card Number => 5300 7219 7517 4530
```

First we need to count the position of digits.
But we must count it from 0,1,2,3,etc.
And collect all odd numbers and calculate the total sum of odd numbers.

```
Sum of odd numbers =  3+0+2+9+5+7+5+0 = 31
```
Second , multiply the digits that are at even position with 2. If the double result is greater than 9 sum the two digit of multipled result.

**Example**
```
 7×2 =14 => 1+4=7
```
And add them together.
I my case,the total sum of my even is 31.
```
Total sum of odd numbers = 29
Total sum of even number = 31
--------------------------------------------------
Total sum of all digits   = 60
```
Divide the 60 with 10 and if its modulus is p it is valide and if it isn't.

# Luhn and Panify NPM packages

I decided to create my own cc validator.So, I created Luhn and Panify node packages.
You can use it to validate your credit card numbers or clients credit card number in real world.

# How to use them?

I use Luhn as dependency and it is integrated in Panify node package.

## Requirements 

Android or Linux or Mac OS or Window
Node.JS and NPM package manager

You can also use Yarn or PNPM package manager.

## Installation

```bash
 npm install -g panify
 panify --help # for help information
 panify --validate 4895042852684341
```
You can validate credit card number with `--validate` flag.

You can generate random validated cc numbers .

```bash
pnaify -g 489504 # 489504 is the bin number of from validated credit card, you must support it if you don't know google it.
```
The return value of generated numbers are Array of objects.
```js
[
    { 
        card_number: 4895042852684341, 
        month: 2,
        year: 2025 
    },
...
]
```
If you are JavaScript developer check my GitHub repos for more APIs and information.

### Validator 
[https://github.com/amm834/luhn](https://github.com/amm834/luhn)

### Generator
[https://github.com/amm834/cc](https://github.com/amm834/cc)


If you are using Android phone check here.

[https://amm834.github.io/Development-Environment-Setup-For-Android/](https://amm834.github.io/Development-Environment-Setup-For-Android/)

# Contributing

If you are interested this project contribute it.

# Roadmap

- Create a website that can generate validated credit card numbers deoend on his/her bin for end users 

You can use my the credit cards for Google play store free trials and others.
It will work at Only Fans website 🤪.
PowerShell Equivalents of Common Bash Commands
Tags: linux, bash, powershell, scripting
Published: 2021-06-12 14:53:21

Hello Everyone👋
I made a quick cheat-sheet for PowerShell equivalent of common Bash Commands. PowerShell is also a very powerful shell but can be confusing for people who are acquainted with Bash/ZSH.
![Cheat Sheet Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwwal6j4m2zxhj0bxhc0.png)

Hope this helps. I will make a few more cheat-sheets and dive into the various commands in more detail.

Thanks for reading 🤝🤝
I would ❤ to connect with you at [Twitter](https://twitter.com/devppratik) | [LinkedIn](https://www.linkedin.com/in/devppratik/) | [GitHub](https://github.com/devppratik)

Let me know in the comment section if you have any doubt or feedback. Feedback is appreciated!!

See you in my next post!! Stay Safe😷

Happy Learning! 😃😃
Help with a game in javascript
Tags: javascript
Published: 2021-06-12 14:15:05

Hello everyone !
I am newbie to javascript ...
can you please help with this
http://jeanferdysusini.free.fr/TP_code.html
I would like to add
1)Repair the display of the time remaining in the game.
2)Add the endgame jingle
3)Add an end-of-game message.
4)Add a control to set the button's “leak” reaction time delay.
Keycloak: REST API for managing users
Tags: keycloak, authentication, authorization, usermanagement
Published: 2021-06-12 14:01:39

While Keycloak is well documented, I found it really hard to get started. Hence, these notes.
`admin-cli` is a default client in a realm. We use that as the `client_id` to get an access token.  

#### Get access token

```bash
curl --request POST 'http://localhost:8080/auth/realms/<realm-name>/protocol/openid-connect/token' \
    --header 'Content-Type: application/x-www-form-urlencoded' \
    --data-urlencode 'username=<username>' \
    --data-urlencode 'password=<password>' \
    --data-urlencode 'grant_type=password' \
    --data-urlencode 'client_id=admin-cli'
 ```

#### Get users

```bash
 curl --request GET 'http://localhost:8080/auth/admin/realms/<realm-name>/users' \
        --header 'Authorization: Bearer <access-token>'
 ```

#### Create a user

 ```bash
 curl --request POST 'http://localhost:8080/auth/admin/realms/<realm-name>/users' \
      --header 'Content-Type: application/json' \
      --header 'Authorization: Bearer <access-token>' \
      --data-raw '{"username":"<username>"}'
 ```

#### Set user password (use the *Get users* API to get user id)

 ```bash
 curl --request PUT 'http://localhost:8080/auth/admin/realms/<realm-name>/users/<user-id>/reset-password'
       --header "Content-Type: application/json"
       --header "Authorization: Bearer <access-token>"
       --data-raw '{"type":"password", "value":"<password>", "temporary": false}'
 ```

#### Send verify email 

Pre-requisite: [Configure Realm Email Settings](https://dev.to/rounakcodes/keycloak-configure-realm-email-settings-gmail-3dfn))
```bash
curl --request PUT 'http://localhost:8080/auth/admin/realms/<realm-name>/users/<user-id>/send-verify-email' \
--header 'Authorization: Bearer <access-token>'
```
⚛️ React conditional rendering
Tags: react, conditionalrendering, assignment, reference
Published: 2021-06-12 13:46:39

A question popped up in my head during a PR review: _is it OK to put a rendering condition into the `render` function (return statement for a functional component) instead of a component reference assignment?_

Imagine having this 'heavy' calculation React-component. 

![React TypeScript Code of the Heavy component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w53zatxm8ny70i7kk37w.png)

It generates a list of elements based on the `count` prop and logs into a console for illustrative purposes.

Let's say we instantiate it like this.
![React TypeScript Code of the App component. Rendering condition in return statement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwvq883mkuf9e4vayso1.png)
We have the `heavy` reference and log it into a console for illustrative purposes.

Won't this way of instantiating actually run some of those 'heavy' calculations inside the `Heavy` component at the moment we create the `heavy` reference? What would be the console log if we run this code when `shouldRenderHeavyComponent` returns `false`?

I was a bit surprised to only see the `heavy` reference being logged. Was expecting to see at least the constructor logging something.
![DevTools Console with logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1ny5nvaij3wtrcg2ilo.jpg)

So no 'heavy' calculations happening and this approach looks nice. We can assign a component once and if we'll have a longer code for `App` component, we'll be able to see in the return statement why exactly `heavy` should/shouldn't be rendered.
The drawback I see is having an actual reference hanging around. 
Imagine somebody doing a check somewhere later in code:
![React TypeScript Code of the App component. Rendering condition in return statement. If-statement added](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyjt2ptfrvzyvlsmk4b7.png)

Now `heavy` reference is an actual object, so some code will run.

And of course we have some memory allocated for the object, which doesn't seem like a big thing, but still bothers me a bit as in the end it was all for not actually rendering `heavy`.

That's why although the idea of a rendering condition being close to the actual rendering is compelling, I would stick to moving it into the assignment.
![React TypeScript Code of the App component. Rendering condition in assignment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hralkv92hbd6b70pweez.png)

Console would still have only `heavy` logged, but now it'll be `null` as expected.
![DevTools Console with logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enq2od3lmq4ezlun3jcx.png)

To answer my initial question: _it looks OK-ish to put a rendering condition into the `render` function (return statement for a functional component) instead of a component reference assignment_, but not having a potentially obsolete reference hanging around feels nicer to me personally.

Wonder what else I might be missing? 🤔
Keycloak: Configure Realm Email Settings (Gmail)
Tags: keycloak, authentication, authorization, email
Published: 2021-06-12 13:41:59


### Intro

Keycloak requires email configuration to

- verify email address of user
- allow user to set own password

### Steps

#### Assign email address to admin account

Use Keycloak Account Management to add email address in _Personal Info_
The below steps work for Keycloak 13 but UI may change with time

- Login to Keycloak Security Admin Console using admin credentials
- Click admin name shown in the top right corner
- Click Manage account
- Click Personal Info
- Enter email address

#### Configure Email Settings

- Open a realm
- Under _Realm Settings_ > _Email_ the following details will work for a Gmail account
  - Host: smtp.gmail.com
  - Port: 587 (for SSL, use 465)
  - From: *admin-email-address*
  - Enable StartTLS: On (for SSL, use _Enable SSL_)
  - Enable Authentication: On
    - Username: *username*
    - Password: *password*

#### Configure Gmail

If the admin account is a Gmail account, the below steps are required

- Login to the Gmail account in a browser
- Visit https://www.google.com/settings/security/lesssecureapps
  - Change the setting to _On_
- Visit https://accounts.google.com/DisplayUnlockCaptcha
  - Follow on-screen instructions, if any

#### Related
[Keycloak REST API for Managing Users](https://dev.to/rounakcodes/keycloak-rest-api-for-managing-users-37og)