teleren/devto huggingface dataset:
Testing in React 17: setup and resources
Tags: react, jest, testing
Published: 2022-11-22 13:02:16


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

A number of times we end up coding in legacy projects, we may face peer dependency errors. I faced one such issues while I started unit testing in a partially developed React project with React v17. Here I share my set up working in legacy environment. I also share some of the popular resources for testing in React. 
 
**Setting up testing in React Project with React 17**
Create-react-app project comes with jest runner for running tests, but we need to install react-testing-library (RTL)

- npm config set legacy-peer-deps true (because we use legacy packages)
- npm install (or npm update)
- npm i -D @testing-library/react@release-12.x  (the latest RTL v13 has no support for React 18)

**Resources**
https://www.robinwieruch.de/react-testing-library/
https://www.robinwieruch.de/react-testing-jest/


**Documentation and recipes**
https://testing-library.com/docs/react-testing-library/intro/ 
https://jestjs.io/docs/tutorial-react

Good practices of -react testing
https://kentcdodds.com/blog/common-mistakes-with-react-testing-library

**Some of the example tests**
https://github.com/nareshbhatia/react-testing-techniques
https://javascript.plainenglish.io/testing-material-ui-forms-with-react-testing-library-50a9d4d300f2
https://github.com/kentcdodds/testing-react-apps

**Tutorial on testing**
Bruno Antunes https://youtu.be/41ox41v62jU
A/B tests & feature flags, what do you love and what do you hate?
Tags: discuss
Published: 2022-11-22 15:04:11

Hey folks,

I m a huge fan of feature flags and technics allowing to ship features more efficiently to the users.

And I m very interested to hear your stories on how you use these tools to ship better features for your audience.

What is the most interesting metric that you rely on and that tells you "hey, this is what we should provide to the users"


Let me know everything about your experiences!
Comment débugger : File is not `goimports`-ed (goimports)
Tags: go, french
Published: 2022-11-22 14:56:04

Quand vous effectuez le lint sur votre projet, vous pouvez avoir le message d'erreur suivant :
```bash
pkg/component/dog.go:5: File is not `goimports`-ed (goimports)
        "fmt"
```

Pour résoudre le problème, exécutez la commande suivante :
```bash
goimports -local "fmt" -w .
```

> Note : Si vous avez un autre import de noté dans votre message d'erreur, remplacer `fmt` par cet autre import dans la commande

---

J'espère que ça vous aidera! 🍺
How to debug : File is not `goimports`-ed (goimports)
Tags: go
Published: 2022-11-22 14:53:47

While you are linting you project, you may have the following error :
```bash
pkg/component/dog.go:5: File is not `goimports`-ed (goimports)
        "fmt"
```

To resolve it, use the following command :
```bash
goimports -local "fmt" -w .
```

> Note : If you have another import targeted in your error message, please replace `fmt` with the import shown in the message.

---

I hope it will help you! 🍺

---

<center><h3>You want to support me?</h3></center>
<a href="https://www.buymeacoffee.com/mxguilbert7" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
Data Preprocessing
Tags: datascience, machinelearning, beginners, python
Published: 2022-11-22 14:50:55

**What is Data Pre-processing?**
"Data Preprocessing is a process of converting your raw data into suitable form."
**Data Preprocessing Steps Involves**
1:Getting Dataset
2:Importing Libraries
3:Importing Datasets
4:Finding Missing Values
5:Encoding Categorical Data
6:Splitting Dataset into Training & Test Set
7:Feature Scaling
Pulumi - Setting up a Pulumi Stack per Environment 🏗️
Tags: pulumi, azure, dotnet, iac
Published: 2022-11-22 14:14:48

##Introduction
This part of the series is to help you to recreate your project structure in Pulumi. Therefore, you need to create a Pulumi Stack for each of your project environments.

##What is a Stack?
A Stack in Pulumi is an independent configurable instance of a Pulumi program. On the initial creation of a Pulumi Project, it will automatically create the first Stack for you. Each Stack has its own Statefile containing the Resources of the Stack and can be deployed independent.

##Why should I have a Stack per environment,
With having a Stack per environment, you gain the advantage of having separate Statefiles and separate configuration files. It enabled you to use the configuration to handle differences of your resources between your environments. Examples for this would be the naming convention, different resource locations or Business Continuity settings to save cost in the development environments.

##Setting Up the Pulumi Project
If you already have a Pulumi Project set up, just skip this chapter and check out how to add new Stacks in your project.

To set up the Pulumi Project with the Azure C# configuration I am using, after logging into Azure CLI and connecting to the Pulumi Backend type:
```
pulumi new azure-csharp
```

As additional information you now have to enter the Project Name, a Stack name, a Azure Location and a Passphrase. The Passphrase is used to decrypt Secrets in the Statefile.

##Adding new Stacks to the Pulumi project
To add new Stacks to your Pulumi project, use the following command:
```
pulumi stack init <stackname>
```
Repeat this command for each of your project environments. This will create a Pulumi.<stackName>.yaml File for each Stack. The .yaml File is containing the configuration for a stack. You can add specific Key-Value Pairs to the configuration file per stack. The config file has the following format:
```
encryptionsalt: <secretValue>
config:
  azure-native:location: <azureLocation>
  <pulumiProjectName>:<Key> <Value>
```

##Using Key-Value Pairs from configuration files
On top of your code, define a new Pulumi configuration:
```
var config = new Pulumi.Config();
```

This var can later be used to Get or Require Secrets from the configuration file. For Key-Value Pairs that cannot be null, you can use:
```
var valueOfKey = config.Require("<Key>");
```

If you are using values, that can be absent on another Stack use:
```
var valueOfKey = config.Get("<Key>");
```
Be sure to handle any Null-Exceptions in that case.

With this, you have learned how to create Stacks for your environments and also how to use the configuration files for any differences in between your resources.
My first ever JS project
Tags: javascript, beginners, showdev, html
Published: 2022-11-22 14:02:07

A few days ago I was organizing my GitHub and I stumbled upon my first JavaScript project. I created this in 2019 when I was learning the basics of JavaScript and created this simple stopwatch application.

*I went through the code and it's funny that I don't quite understand why I did it like that. I also saw many styling and logic mistakes that I didn't grab then and want to fix now.*

## GitHub repo
{% github https://github.com/AneeqaKhan/stopwatch %}

## Demo
{% codesandbox stopwatch-7nmr7v %}

## In the end
I want to quote these lines from the anonymous source
> Your old code shows your creativity, your weaknesses, your strengths, your evolution and your improvements. It helps you stay humble and patient towards others coders.

Do you remember what was your first-ever coding project? What was it about and do you still have the code?

Thank you for reading!
Feel free to connect on [Twitter](https://twitter.com/Aneeqa_Khan25)
ChartJS color Below Zero
Published: 2022-11-22 13:58:18

I was stuck back 3 months ago and know the solution now

You can use [colorchartjs](https://www.npmjs.com/package/colorchartjs)

```
import React from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar } from "react-chartjs-2";
import { colorchartjs } from "colorchartjs";

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

function Chart(props) {
  var colordata2 = colorchartjs(props.data2, "green", "red", 0);
// Here we have to give array data and greater than and more than color and starting point 

  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: "top",
      },
      title: {
        //position: 'bottom',
        display: true,
        text: props.charttitle,
      },
    },
  };

  const labels = props.data1;

  const data = {
    labels,
    datasets: [
      {
        label: "PNL",
        data: props.data2,
        borderColor: "green",
        backgroundColor: colordata2, //Here pass the received data means colors
        hoverBackgroundColor: "grey",
        lineTension: 0,
      },
      {
        label: "FEE",
        data: props.data3,
        backgroundColor: "orange",
        lineTension: 0,
      },
    ],
  };

  return (
    <>
      <div style={{ width: "900px", margin: "auto" }}>
        <Bar options={options} data={data} />
      </div>
    </>
  );
}

export default Chart;

```

 
Use this in component
```
<div className="mgchart">
                      <Bar
                        charttitle={`Chart for ${data._id} side`}
                        data1={data.chartstocks}
                        data2={data.chartpnl}
                        data3={data.chartfee}
                      />
                    </div>


```
Meme... Tuesday? 🤔
Tags: jokes, discuss, watercooler
Published: 2022-11-22 13:30:01

This week's post is coming in a day late, sorry to everyone who showed up yesterday expecting the memes! Today's cover image comes from [last week's thread](https://dev.to/ben/meme-monday-2a70).

DEV is an inclusive space! Humor in poor taste will be downvoted by mods.
Self-hosted cluster of geo-distributed blockchain nodes
Tags: blockchain, web3
Published: 2022-11-22 13:10:57

If you are spending $20+K on a blockchain API infrastructure and sending hundreds of requests per second, you might be interested in cost optimization. 



![Self-hosted cluster
of geo-distributed blockchain nodes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vt11nygebgdege4ue1i.jpg)


And that is where we can help by providing you the fastest access to blockchain infrastructure through JSON-RPC endpoint on your own secure environment. Our developers with more than 8 years of unique experience in DevOps for Blockchain can maintain your dedicated nodes while reducing the TCO of your project. 

Why **RPC Fast**, a **self-hosted cluster with geo-distributed blockchain nodes**, can be helpful in your case?

- Ultra-speedy geo-destributed infrastructure with 90+ zones available and 100% healthy nodes.
- 99.99% uptime and average 85.6 msec latency from just about anywhere.
- PredictKube under the hood, an AI model trained to predict the traffic trend and autoscale infrastructure capacities accordingly, based on your historical data and business metrics.
- A self-hosted solution, that will insure maximum security for your blockchain infrastructure.

Try our demo for free or contact our CTO - https://rpcfast.com/self-hosted-cluster
NPM install is not working in Visual Studio code, showing errors
Published: 2022-11-22 12:35:27

can anyone please help me with this issue? 
I tried to install the dependencies but it's not working. 
I used Material UI in my react app in lieu of NPM install i used "npm install @mui/material@latest @emotion/react@latest @emotion/styled@latest" command then I can able to see the node modules in my sidebar also I can able to see the application in my browser window. While deploying the same code on Heroku, it shows the same errors that I got while doing the NPM install. I want to deploy my react code in Heroku, Can't able to find the solution.

FYI, following are the errors
Installing dependencies
       Installing node modules
       npm ERR! code ERESOLVE
       npm ERR! ERESOLVE could not resolve
       npm ERR! 
       npm ERR! While resolving: @material-ui/core@4.12.4
       npm ERR! Found: react@18.2.0
       npm ERR! node_modules/react
       npm ERR!   react@"^18.2.0" from the root project
       npm ERR!   peer react@">=16.8.0" from @emotion/react@11.10.5
       npm ERR!   node_modules/@emotion/react
       npm ERR!     @emotion/react@"^11.10.5" from the root project
       npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.10.5
       npm ERR!     node_modules/@emotion/styled
       npm ERR!       @emotion/styled@"^11.10.5" from the root project
       npm ERR!       5 more (@mui/lab, @mui/material, @mui/styled-engine, ...)
       npm ERR!     5 more (@mui/lab, @mui/material, @mui/styled-engine, ...)
       npm ERR!   29 more (@emotion/styled, ...)
       npm ERR! 
       npm ERR! Could not resolve dependency:
       npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
       npm ERR! node_modules/@material-ui/core
       npm ERR!   @material-ui/core@"^4.12.4" from the root project
       npm ERR! 
       npm ERR! Conflicting peer dependency: react@17.0.2
       npm ERR! node_modules/react
       npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
       npm ERR!   node_modules/@material-ui/core
       npm ERR!     @material-ui/core@"^4.12.4" from the root project
       npm ERR! 
       npm ERR! Fix the upstream dependency conflict, or retry
       npm ERR! this command with --force or --legacy-peer-deps
       npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
       npm ERR! 
       npm ERR! 
       npm ERR! For a full report see:
       npm ERR! /tmp/npmcache.FbcPQ/_logs/2022-11-22T11_03_35_268Z-eresolve-report.txt
       
       npm ERR! A complete log of this run can be found in:
       npm ERR!     /tmp/npmcache.FbcPQ/_logs/2022-11-22T11_03_35_268Z-debug-0.log
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile React.js (create-react-app) multi app.
 !     Push failed
Docker course: Introduction
Tags: docker, tutorial, beginners, devops
Published: 2022-11-22 12:32:00

---
title: Docker course: Introduction
published: true
description: These days Docker is the de-facto standard for virtualization. This course will help you get started and become a pro
tags: docker, tutorial, beginners, devops
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2022-11-22 12:32 +0000
canonical_url: https://code-maven.com/docker-course-intro
series: docker
---


{% youtube W57v02jhyO8 %}

In this first video you get familiar with the [Docker slides](https://code-maven.com/slides/docker/) and the examples. How to navigate and how to [download them from GitHub](https://github.com/szabgab/slides).
Top 4 Free Fake API
Tags: webdev, api, javascript, programming
Published: 2022-11-22 12:29:21

**Under the Hood**
Sometimes we need sample data to develop and test our projects before launching. In today's story, jotting down the top 4 Fake Free APIs for data.

**JSON placeholder**
[Link](https://jsonplaceholder.typicode.com/)

**Fakerjs**
Generate massive amounts of fake (but realistic) data for testing and development.

[Link](https://fakerjs.dev/)

[Detailed article](https://ihatereading.in/t/JqrE2W88AYwKKQGTMzVT/Create-massive-random-data-using-faker.js)

**Random Users**
For generating random user data. Like Lorem Ipsum, but for people.

[Link](https://randomuser.me/)

**Fake Store API**
Fake store rest API for your e-commerce or shopping website prototype.

[Link](https://fakestoreapi.com/)

That's it for today, until next time, have a good day.
**Keep developing
Shrey
[iHateReading](ihatereading.in)**
Backend avec Express et Prisma
Published: 2022-11-22 12:20:29

# Prisma
C'est un ORM 

Plutot que d'ecrire
```sql
SELECT * FROM exercises;
```

J'ecris:
```js
Exercises.getAll()
```

# Express
Express est a Node(JS cote serveur) 
Ce qu'est React a JavaScript

## Comment initialiser un projet Express & Prisma
[RTFM](https://www.prisma.io/docs/getting-started/quickstart)
Read The Friendly(Fucking) Manual

Pour info
`npx` ca va chercher soit dans node_modules/.bin soit sur npm (internet)
Remote jobs that pay in USD, open this - GeorgeNoble07
Tags: career
Published: 2022-11-22 12:05:04

####   Original Tweet From  [@GeorgeNoble07](https://twitter.com/GeorgeNoble07)
{% embed https://twitter.com/GeorgeNoble07/status/1594685834942451714 %}

Get free 6figure online business training ➤  [https://bit.ly/0to6figurE](https://bit.ly/0to6figurE) 

###1|. RemoteOK

Find a remote job and work from anywhere!

⏩  [http://remoteok.com](http://remoteok.com) 

###2|. Working Nomads

Remote jobs for Digital Working Nomads.

⏩  [http://workingnomads.com/jobs](http://workingnomads.com/jobs) 
AdSpace Here!!
###3|. Himalayas

The remote job board you'll actually enjoy using.

⏩  [http://himalayas.app](http://himalayas.app) 

###4|. Remotive

Remotive is where top talents go to easily access active and fully remote job opportunities from vetted tech companies.

⏩  [http://remotive.com](http://remotive.com) 
AdSpace Here!!
###5|. Remote Co

All things remote work!

⏩  [http://remote.co](http://remote.co) 

###6|. Just Remote

Discover fully and partially remote jobs from the most outstanding remote working companies

⏩  [http://justremote.co](http://justremote.co) 
AdSpace Here!!
###7|. We Work Remotely

We Work Remotely is the largest remote work community in the world!

⏩  [http://weworkremotely.com](http://weworkremotely.com) 

###8|. AngelList

The world's #1 startup community specializing in technical talent and opportunities.

⏩  [http://angel.co](http://angel.co) 
AdSpace Here!!
###9|. Flexjobs 

Find remote, work from home, and flexible job opportunities.

⏩  [https://www.flexjobs.com/](https://www.flexjobs.com/) 

###10|. Pangian 

Find the best remote jobs at reputable companies.

⏩  [https://pangian.com/](https://pangian.com/) 
AdSpace Here!!


Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)
Best IAS Coaching In Shillong Tarun IAS
Tags: iascoachinginshillong, topiascoachinginshillong, bestiascoachinginshillong
Published: 2022-11-22 12:00:28


If you're looking for the best IAS coaching in Shillong, look no further than Tarun IAS. They offer top-notch coaching and guidance to help you clear the IAS exam with flying colours. The institute offers comprehensive training for the IAS exam, and has produced many successful candidates over the years. The faculty at Tarun IAS is highly experienced and dedicated, and they provide personalised attention to each and every student. top IAS coaching in Shillong The institute also provides good infrastructure and facilities to its students. They offer comprehensive course material and mock tests that will help you prepare for the exam in the best possible way. Overall, Tarun IAS is an excellent choice for those looking for the best IAS coaching in Shillong. for more details visit:- https://tarunias.com/best-ias-coaching-in-shillong/
psql is not recognised
Published: 2022-11-22 11:57:39



```
psql : The term 'psql' is not recognized as the name of a cmdlet, function, script file, or operable program. Check
the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:18
+ cat mydump.sql | psql restore_test_221122
+                  ~~~~
    + CategoryInfo          : ObjectNotFound: (psql:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException


Suggestion [3,General]: The command psql was not found, but does exist in the current location. Windows PowerShell does not load commands from the current location by default. If you trust this command, instead type: ".\psql". See "get-help about_Command_Precedence" for more details.
```

So this is about a command that is not recognisable from the directory you are.



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



From the image above you will see that I am a sub folder inside PostgreSql. Inside that bin folder, there is **psql.exe** which my command meant to reference.

To correctly refer to this I need to specify it in the command, hence, **.\**, which refers to the current working directory, like in the image below.

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

From this image, you will that I am now able to proceed as the error did not prompt.
Total Addressable Market – TAM
Published: 2022-11-22 11:41:24

Total Addressable Market(TAM) – refers to the revenue your company can earn from selling a product or providing a service.
 
Calculating the TAM allows the company to have a clearer and more realistic view of the size of the market available for its operations, as well as the level of competition for what it intends to offer its target audience.

As the Total Addressable Market (TAM) helps predict revenue growth and also the profit potential of a specific sector, its result helps managers make more assertive decisions.
GitUI 0.22 supports submodules and commit msg history
Tags: git, terminal, rust, productivity
Published: 2022-11-22 11:35:39

[GitUI](https://github.com/extrawurst/gitui) is a terminal UI for git written in Rust. We aim to simplify common git tasks in a fast, keyboard-only and cross platform way without leaving your beloved CLI.

## Release Highlights

* support viewing and inspecting submodules and parents
* commit message history 
* remember tab from last gitui session
* [much more](https://github.com/extrawurst/gitui/releases/tag/v0.22.1)

Thanks for your interest and support!❤️
Tailwind CSS and Next/Image Z-index not working
Tags: webdev, javascript, tailwindcss, nextjs
Published: 2022-11-22 11:34:58


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

```
<div className="flex justify-between h-screen md:flex-row flex-col pt-64">
          ...
          <div className="z-50">
              <Image src="/Saly-14.svg" className="w-[916px] height-[1384px]" alt="" width={916} height={1384} />
          </div>
      </div>

<section className="bg-[#DBD9FF] z-30" id="services">
...
      </section>
```

The name of this character is saly and even though I made it lower than the z-index of the section below, it still doesn't work. What could be the reason. Has anyone found a solution to a similar error before?