teleren/devto huggingface dataset:
How to Solve this type of error in React JS After Deploy in Heroku (Application Error)
Tags: discuss, heroku, help
Published: 2022-07-03 10:56:23

Hello Dev,

I am in Struggle when deploying a react js website in heroku.

I request you please solve my problem

Here is my screenshot problem: 

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

I have search it all place but I didn't find any problem solutions. 

So if anyone know please help me!
Getting Free Test Ethers For Rinkeby Network
Published: 2022-07-03 10:54:34

---
title: Getting Free Test Ethers For Rinkeby Network
published: true
description: how to get RinkebyETH
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---


1. Access to https://rinkebyfaucet.com/


2. Enter your address or ENS & Click on "Send Me ETH".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxodrcpi7wujtffz579a.png)


3. It will be transferred immediately, check your wallet.
Domain Age Checker
Tags: domainagechecker, domainagefinder, bulkdomainagechecker, webagechecker
Published: 2022-07-03 10:36:59




[Domain Age Checker](https://wprefers.com/domain-age-checker/) is an online tool that allows you to determine the exact age of a domain or website, from the moment it was registered to the time it is active. Search engines consider domain age to be one of the most important variables in website ranking. As a result, it is essential for keeping track of the age of your website stored on the internet.

You may use our tool to determine the age of your competitor’s domain as well as the age of the domains you intend to purchase. Older domains are more likely to improve their search engine rankings. Tools such as bulk domain name checker, bulk domain authority checker, and make it much easier to determine the exact period for the age of a certain domain. The results are generally dependable and accurate.
How to use zlib in Termux
Published: 2022-07-03 10:36:42

Some programs in Termux needs zlib to run. Specially python apps such as buildozer. But they always run to an issue even though you install zlib by `pkg install zlib`. 
If you encounter such issue just run `termux-chroot` before running your app.
In debian-like system (such as termux), program expect zlib header to be in `usr/includes/zlib.h`
But in termux it is stored in `$PREFIX/includes/zlib.h`
When run `termux-chroot`, your $PREFIX will become `/usr/`
So you can use the program.
Happy coding
What code editor should I use on 2GB of RAM?
Tags: help
Published: 2022-07-03 10:15:02

I've been recently forced to code on a low-end laptop. At first, my old laptop had 8GB of RAM, then broke so I had to use another one which the RAM went divided by two, it broke yet again so had to use another laptop also dividing it's RAM by 2. So pretty much, I'm stuck with 2GB of RAM. And I gotta code. I'm tired of using gVim and Notepad, so what should I use?
JavaScript for...in iteration
Published: 2022-07-03 09:45:49

In this post will try to showcase different ways for the iterations.

- using forEach
- using for...of
- using for...in
- using for

```
let list = [1,2];
list.newCustomElement = true;

list.forEach( (item)=>{
console.log(item);
});

//Output 
1
2


for(let item of list){
console.log("using of",item);
}

//Output 
"using of", 1
"using of", 2

for(let item in list){
console.log("using in",item);
}

//Output 
"using in", "0"
"using in", "1"
"using in", "newCustomElement"



for(let i=0;i<list.length;i++){
console.log(list[i]);
}
//Output 
1
2

```

> Don't use for...in to iterate the array , if the order is important

Will see another example for better understanding of for..in 

```

const Employee= {
    name: 'John',
    dept: 'IT',
    age: 29
}


for ( let key in Employee) {
    console.log(key);
}

Output:
"name"
"dept"
"age"

for ( let key in Employee) {
    console.log('key: ',key,' value:', Employee[key]);
}

Output:
"key: ", "name", " value:", "John"
"key: ", "dept", " value:", "IT"
"key: ", "age", " value:", 29
```

In above example for...in is used to print properties on Employee object. 

First for loop in above example will showcase that object keys are printed using iterator **key**, it wont print the values of property.

Second for loop in above example will showcase how to print keys and the values of property.
Beginner to Advanced Challenge - project 4 (animated Christmas tree light app)
Tags: beginners, beginner2advance, typescript, tutorial
Published: 2022-07-03 09:15:39

This is the fourth project in the beginner category in the `#beginner2advanced` challenge which is an animated Christmas tree light.

The link to the app requirement can be found [here](https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Christmas-Lights-App.md).

The end result of the application will look like this and it’s built using Typescript:

![animated_christmas_tree_light](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5n1e2ew2hh2r1bil59t.gif) 

The link to the code can be found here: [https://github.com/zt4ff/app-ideas/tree/main/beginners/christmas-light](https://github.com/zt4ff/app-ideas/tree/main/beginners/christmas-light)

Please, drop a star on the repository so other people can find and join the challenge.

If you enjoy reading this article, you can support me by [buying me a coffee](https://www.buymeacoffee.com/kayode), please.
I cannot understand following vue code.
Tags: vue
Published: 2022-07-03 09:05:59

When I read the Apache Dolphinscheduler Frontend code, which is written by Vue3, I find a code fragment very confusing me. So I post this for help.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dktnrqp3xw7s928qaz5z.png)
PDF Reviewer (2) - Why is it built?
Tags: pdfreviewer, pdf, annotation, markdown
Published: 2022-07-03 08:50:01

[PDF Reviewer](https://www.pdfreviewer.com/) is a cloud-based service that enables users to annotate PDF files in Markdown syntax, with support for Latex Equations. It is a paid service with free trial(until Aug 31, 2022), but no credit card is needed for the trial. Readers are encouraged to check it out.

When I was reading academic papers or engineering books, I wished I had a PDF reader that can help make rich-format text annotations. I tried many tools, such as Adobe PDF reader, Microsoft Edge, etc. They're really good and helpful. They have so many features helping users navigate contents easily and fluently. But what I really wanted are two features:
1. Annotate PDFs in markdown, so I can freely use rich-format text annotations. More preferably, equations are supported.
2. View PDF files and annotations side-by-side. 

I wanted the two features so much that I decided to build a service on my own. That's why [PDF Reviewer](https://www.pdfreviewer.com/) came out. It doesn't have so many nice features like any other desktop-based PDF readers, but it has the missing two features.
Create quick keyboard shortcuts for your JS functions
Tags: webdev, javascript, opensource, githunt
Published: 2022-07-03 08:46:33

Floodlightjs lets you create quick keyboard shortcuts for your JS functions. macOS spotlight inspired. `shift`+`key`

[Github](https://github.com/rajnandan1/floodlightjs)
[Demo](https://rajnandan1.github.io/floodlightjs/index.html)
Objectifs et plan d'action - Real World To-Do App - AdonisJS
Tags: webdev, javascript, tutorial, adonisjs
Published: 2022-07-03 08:30:52

Créer une `Todo list` (liste de tâches), c'est la [base des projets](https://todomvc.com/) pour apprendre à programmer ou à manier un nouveau framework !

Mais bien souvent, **ces tutoriels ne vont pas assez loin** dans les concepts et ne permettent pas de se confronter à la réalité du terrain et à des concepts pourtant si importants !

> Mais du coup, encore un tutoriel pour créer une liste de tâches ?

Oui et non ! En effet, on va construire ensemble une liste de tâches. Mais on va la construire avec [AdonisJS](https://adonisjs.com), un système complet pour développer des applications Node.js !

## Objectifs

Dans les grandes lignes, on va réimplémenter ensemble ce projet : [To-Do App](https://github.com/florinpop17/app-ideas/blob/master/Projects/2-Intermediate/To-Do-App.md) !

Cependant, on va aussi y ajouter l'authentification de l'utilisation et le lien entre lui et ses tâches. Aussi, on utilisera une base de données pour permettre à l'utilisateur d'avoir accès à ses tâches via différents périphériques.

## Ce que tu vas apprendre

- Implémentation de l'authentification d'un utilisateur
- Ajouter et suppression de tâches
- Gestion des tâches en fonction de l'utilisateur connecté
- Tests fonctionnels associés

Autant te dire qu'avec tout ça, on va pouvoir passer sur différents concepts du framework et que tu vas apprendre plein de choses même si l'application ne semble pas bien complexe.

Avant d'aller plus loin, il est important d'avoir quelques bases sur l'outil qu'on va utiliser ! Pour cela, je te recommande [ma série sur la création d'un petit blog](https://dev.to/barbapapazes/objectifs-et-mise-en-route-creer-un-blog-avec-adonis-20lg) avec AdonisJS.

## Plan d'action

Cette série n'a pas pour vocation de te faire créer le design. Par conséquent, je te mets à [disposition sur GitHub](https://github.com/Barbapapazes/learn_web-real_world_todo_app/tree/0-initial-design) un template d'un projet AdonisJS avec les vues déjà prêtes ! Il ne te reste qu'à installer les dépendances avec `npm ci` puis de démarrer le serveur avec `npm run dev`.

Ensuite, tu peux simplement ouvrir ton navigateur sur [localhost:3333](http://localhost:3333) pour visualiser l'application web !

Important et pour se concentrer sur l'essentiel, il n'a été développé qu'une version mobile de l'application web.

## Dans la suite

Dans le prochain épisode de la série, on va implémenter ensemble le système authentification avec les tests qui vont avec !
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2022-07-03 08:00:26

---
title: "A Fun Programming Joke To Start Your Day"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12594d2dedc.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why can't SQL and NoSQL Developers date one other?

___A:___ Because they don't agree on relationships.
 -->
Create A Forget password link for one time and expire in 10 minutes in nodeJS
Tags: node, angular, react, webdev
Published: 2022-07-03 07:50:14

here create forget password link with json web token (jwt) to create expire token in 10 minutes.

but in token not make it for one time so store in database after successfully OTP verify i have remove from database.

in mongoose model i add a field name otp has number and expire field in 10 minutes.

## user.model.js

```
const mongoose = require("mongoose")

const userSchema = new mongoose.Schema({
	name:{
		type:String,
		required:true,
		trim:true
	},
        email:{
                type:String,
                required:true
        },
	otp:{
		type:Number,
		expires:'10m',
                index:true
	},
	imageUrl:{
		type:String,
		default:'avatar.png'
	}
})

module.exports = mongoose.model('User',userSchema)
```

## user.controller.js

```
module.exports.forgetPassword =async (req,res,next)=>{
     try{
		
	const {email} = req.body
			 
        User.findOne({email}).exec(function(err,user){
				if(err) throw err;
				if(!user){
					res.json({"error":"User not 
                                      found"})
				}
				else{
				let otp=Math.random().toString(5);
                              user=await User.findOneAndUpdate({
                                   _id:user._id},
                               {$set :{otp}},{new:true});	 
     const  {_id,email} = user;
     let  token=jwt.sign({_id,email,tokenId:uuidv4()},"SECRET_TOKEN",{expiresIn: '10m' });
     let url=HOST_URL+token;
     await sendMail(email,"forget password link",url,`your otp is ${user.otp}`);				 
     res.status(200).send({message:"send link to your mail"});
						
			
		}
	}
   }catch(err){
    next(err)
  }
}

module.exports.verifyOtp =async (req,res,next)=>{

   try{
        //email get from token
         const {email,otp}=req.body;
		User.findOne({email,otp}).exec(function(err,user){
				if(err) throw err
				if(!user){
					res.json({"error":"Link is Expired"})
				}
				else{
await User.updateOne({_id:user._id},{$set:{otp:null}});
							const token=jwt.sign({_id:user._id,tokenId:uuidv4()},"SECRET_TOKEN")
							res.header("token",token).json({message:"otp verification success"})
					
		}
	}
    }catch(err){
    next(err)
  }
}
```
check on client side if token is expired then message token is expired.
Make Interactive button using css
Tags: css, react, beginners, webdev
Published: 2022-07-03 07:48:14

Make interactive button

![inteactive gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yagabd7yd5da0q8z5x4f.gif)

HTML
```
  <div className="App">
      <button>button</button>
    </div>
```
CSS
```
* {
  padding: 0px;
  margin: 0px;
}
.App {
  font-family: sans-serif;
  text-align: center;
  background-color: #e0e0e0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  background: #e0e0e0;
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
  background-color: #e0e0e0;
  border: none;
  border-radius: 50px;
  width: 200px;
  height: 200px;
}
button:active {
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: inset 20px 20px 60px #bebebe, inset -20px -20px 60px #ffffff;
}

button:focus {
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: inset 20px 20px 60px #bebebe, inset -20px -20px 60px #ffffff;
}

```

Thanks.
can you "AppendChild" same element multiple times in js ? Probably not
Tags: javascript, webdev, programming
Published: 2022-07-03 07:47:59

in this case : 

```
var d1 = document.createElement('div');
var d2 = document.createElement('div');
var p = document.createElement('p');

d1.appendChild(p); // d1 has p now
d2.appendChild(p); // d2 has p now
// but where is p in d1 ?
```
we cannot append "p" multiple times because in the DOM, being a tree of nodes, one node can have only one parent, it cannot have multiple parents.

## But solution !

We can use [cloneNode()](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) , but I use another way 
I want to use a function
like this :

```
//main function
function appendChildMultiple(parent) {
  //check function argument is an element
  if (parent.nodeType !== undefined) {
    const pTag = document.createElement("p");
    pTag.innerText = "This is the appended element";
    //finally append child to parent
    parent.appendChild(pTag);
  }
}
```
and use it :

```
const d1 = document.createElement("div");
const d2 = document.createElement("div");
appendChildMultiple(d1);
appendChildMultiple(d2);
```
an example on Codepen :
{% codepen https://codepen.io/kiumad/pen/eYMNKYa %}

> Do you think this method has good performance? Leave a comment below :)
Evidence as a starting point
Tags: beginners, productivity, management
Published: 2022-07-03 07:46:49

When we decide to initiate a new change in our product, we usually do it based on opinions, where we tend to agree with a simple statement and take responsibility for exponential results.

**Evidence can help us make better decisions,**

Evidence is facts, information, documentation or examples that support a claim; if we make a decision based on opinion we will not be taking the truth into consideration, and what is the truth? What we can clearly see and we cannot doubt about because, it ends up being a graphic representation of what the person is narrating to us,

This forces us to be detailed with the information we receive analyzing and validating with a critical rather than emotional sense,

**How is this reflected in technology?**

In many moments, we have to make a change because the executive thinks it's good, because people's opinion is LISTENED (when we know that people are lying, then it's not the truth). The truth is the congruence between the affirmation and the facts that monopolize the necessary doubts, with logical and rational sense (being able to see it and corroborate its source on our own);

If we start talking about users are breaking the user journey for ___ and it is understood that the best solution is ____, you can see that after having shared what I said a moment ago, you may feel the need to ask for statistical evidence of the user journey breaking and what then proves that this is the best solution.

Personally, I don't like to work with opinions but with numbers, opinions that we can translate into numbers with simple surveys and study mathematical probabilities in this regard, with the result of the almost exact, we can get closer to creating something of quality, however, treating the bias of the recipient with strategically worked questions but with a margin of risk, knowing what the risk is and what its impact would mean for the product.

As can be seen, changing a functionality is not as simple as an opinion; an opinion must first be necessary and carefully worked out beforehand so that it does not bring major conflicts, and brings us closer to positive results. If there is an opinion, it is necessary to make the risks clear, or take it as a hypothesis (although it also requires a deeper and more robust procedure).

Having the evidence of facts will help us save time, money and will increase the effectiveness of our decisions; "what we don't see is what kills us" or rather kills our product.

Be careful!

[Psychology Compass, Reference](https://psychologycompass.com/blog/making-good-choices/)
70. Leetcode solution in Java
Tags: java
Published: 2022-07-03 07:44:32

```
class Solution {
    
    int [] cache = new int[46];
    
    public int climbStairs(int n) {
        
        if(n < 0) return 0;
        
        if(n == 0) return 1;
        
        int val = cache[n];
        
        if(val != 0)
            return val;
        
        val = climbStairs(n - 1) + climbStairs(n - 2);
        
        cache[n] = val;
        
        return val;
    }
}
```
509. Leetcode solution in Cpp
Tags: cpp
Published: 2022-07-03 07:42:33

```
class Solution {
 public:
  int fib(int N) {
    if (N < 2)
      return N;

    vector<int> dp{0, 0, 1};

    for (int i = 2; i <= N; ++i) {
      dp[0] = dp[1];
      dp[1] = dp[2];
      dp[2] = dp[0] + dp[1];
    }

    return dp.back();
  }
};

```
376. Leetcode solution in Cpp
Tags: cpp
Published: 2022-07-03 07:40:27

```
class Solution {
 public:
  int wiggleMaxLength(vector<int>& nums) {
    int increasing = 1;
    int decreasing = 1;

    for (int i = 1; i < nums.size(); ++i)
      if (nums[i] > nums[i - 1])
        increasing = decreasing + 1;
      else if (nums[i] < nums[i - 1])
        decreasing = increasing + 1;

    return max(increasing, decreasing);
  }
};

```
PHP request interface API: a relatively complete example (POST)
Tags: laravel, php, api, html
Published: 2022-07-03 07:37:50

1：Send via curl
[Scenario: Get table information in remote server based on id]

```
<?php
//interface url
$url = '';
//data field
    $data = 'id=35289';
    // method to generate http header information
function getAuthHeaders(){
//appid needs to apply in advance
$appid = '';
$time = time();
//appkey needs to apply in advance
$appkey = '';
//Signature here we use the md5 of the following three
$sign = md5($appid . '&' . $time . $appkey);
return array(
            'Content-Type : application/json',
            'charset : '.'utf-8',
            //We also send the appid, TimeStamp, and signature to the server,
            //Request it to query whether the md5 signature of appkey authentication is correct or not through appid
'X-Auth-Appid : ' . $appid,
'X-Auth-TimeStamp : ' . $time,
'x-Auth-Sign : ' . $sign
        );
}
$ch = curl_init();
//address to visit
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_HTTPHEADER, getAuthHeaders());
//Whether the execution result is returned, 0 is to return, 1 is not to return
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 0);
// Send a regular POST request
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
// execute and get data
$output = curl_exec($ch);
print_r($output);
    curl_close($ch);
?>
```
Prefer more precise alternative to the string Types in Typescript
Published: 2022-07-03 07:29:05

The domain of string type is big

Suppose you're building music collection and you want to define a type for an album

Attemp:
```
interface Album{
 artist:string;
 title:string;
 releaseDate:string; //YYYY-MM-DD
 recordingType:string; // "live" or "studio"
}
```

The prevelance of string types and the type information in comments are strong indications that this interface isn't quite right. Here is what can go wrong.

```
const kindOfBlue:Album ={
 artist:"Miles Devid",
 title:"Kind of blue",
 releaseDate:"auguest 17th 1959",
 recordingType:"Studio",
}
```
**Problem 1:**
Date is not formated
**Problem 2:**
recordingType Studio is small spell but it is capital.

**How to narrow down string and solve these problem?**


```
type RecordingType="studio" | "live" 
```

```
interface Album{
 artist:string;
 title:string;
 releaseDate:Date; 
 recordingType:RecordingType; 
}
```

```
const kindOfBlue:Album ={
 artist:"Miles Devid",
 title:"Kind of blue",
 releaseDate:new Date("1959-08-18"),
 recordingType:"studio",
}
```

With these changes Typescript is able to do a more thorough check for errors


Make more precise type to error pron the code.

Thanks.
Let's Machine Learn together
Tags: machinelearning, beginners, programming, python
Published: 2022-07-03 07:19:44

## Hey you!
Are you someone just starting with Machine Learning?
Are you looking for someone to go with on this journey?
Do you already know some python+software engineering and just need to become a pro in the ML part of MLE?

If the answer to any of the above is yes, feel free to reach out to me. I have decent experience in software and data engineering and now I'm planning to expand my domain knowledge to Machine Learning as well. Not sure how long the journey will be but I'm guessing a few months is a good time frame to consider.

Let me know here or on [LinkedIn](http://linkedin.com/in/amanjaiswalofficial) and let's try building some fun stuff together.

Anyhow, I'll be on this journey of mine anyway so Best Wishes to me, right?