teleren/devto huggingface dataset:
Vertical Scroll bar visibility
Published: 2022-02-04 13:43:45

Hello All,

I Created react Virtualized table with fixed header and multi select table with required width using react-table.

when the rows are increasing the table vertical scroll is not showing properly

https://codesandbox.io/s/inspiring-cloud-6j1e5?file=/src/App.js

I try to overcome this issue(#495)

but issue is not solved.

How to solve this issue
Thank you
Automated script - Upload front end artifacts to nexus
Tags: angular, node, devops, react
Published: 2022-02-04 13:39:19

Hello Pal

**Scenario** : A FE developer working in an Angular project. He is building angular using angular build command and zip the output and upload to nexus and deploy using Jenkins or any tools.

I created some file which help a developer to do all this until upload to nexus with a single command.

This command programmatically upload angular atifacts to nexus using node

**Repo** : https://github.com/ratheeshspiral09/angularbuidtonexus

**Steps to do that**

1. Install dev dependencies 
 `"web-nexus-deployer": "^1.0.2",
  "archiver": "^5.3.0"`
  
2.Make sure the version key in package.json matches your release 
  verison eg: "version": "5.7.0"

3.Set NEXUS_USERNAME and NEXUS_PASSWORD as env variables in the 
  terminal like below or add it in .bashrc file.

`export NEXUS_USERNAME=username
 export NEXUS_PASSWORD=password`
 
4.Run npm run deploy-to-nexus in terminal

To customize any more please check build.js and deploy.js files

**Working**

Here build.js file will find the files for artifacts (here in dist folder) and convert it into zip deploy.js file will deploy the same zip to nexus based on the values given in that file like groupid,artificat id etc
Wikipedia Python Tutorial
Tags: python, tutorial
Published: 2022-02-04 13:35:09

```py
# Created By Moumen
import wikipedia
import json
import time
# Created By Moumen
print(f"Welcome To Wikipedia")
lan = input (str("Language: "))
test_file = open("log.txt", "w")
# Created By Moumen
while True: 
    question = input("Question: ")
    wikipedia.set_lang(lan)
    question_1 = question.replace("What is", "")
# Created By Moumen

    test_file = open("log.txt", "a")
    test_file.write(f"\n {question_1}") 
    test_file.close()
    answer_1 = question.replace("What is", "")
    search = wikipedia.page(answer_1)
    info = search.content
# Created By Moumen
    new_file = open(f"{answer_1}.txt", "w")
    new_file.write(info)
    print("✅")
# Created By Moumen
```
[](https://replit.com)
How to implement column grouping in react-table
Published: 2022-02-04 13:32:04

I used react-table in my Application. We used Row Grouping. In the same way I want to implement Column Grouping. Expanding and Collapsing the columns by clicking the arrow button in column. Please look into the below image.

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

https://stackoverflow.com/questions/70922615/how-to-implement-column-grouping-in-react-table

Any Help.
Thank you
tsParticles 1.40.0 Released
Tags: showdev, javascript, typescript, webdev
Published: 2022-02-04 13:00:00

# tsParticles 1.40.0 Changelog

## Internal Updates

- Static classes are replaced by `Engine` instance singletons, this is useful for multiple instances installations since they can behave differently
- Updated README.md files
- Updated all packages to match the minor version, so it's easier to understand which package is matching the engine version

## New Features

- Added `domId` property to Emitters options, setting that to match a real dom element id will attach the emitter to the element (closes #2256)

## Breaking Changes

- The new instance singleton management is going to break the deprecated `react-particles-js`, but I decided to not change the major version since all the official components will continue to work as expected.

---

{% github matteobruni/tsparticles %}
How much does a React Native app cost?
Published: 2022-02-04 12:42:52

The React Native framework is one of the most popular front-end development tools being used by mobile app developers today. React Native is an open-source framework designed to let you build cross-platform mobile apps using JavaScript. This means that you're not limited to just the iPhone and Android, so you'll be able to use your React Native app on other types of devices like Windows, macOS, and Linux.

The cost of developing React Native apps can vary wildly based on the complexity of the project, people who work on it, the packages you use, the infrastructure you go with, and the size of the development team. Of course, the cost of any app can go up quickly if you want to build your own custom development tools.

**It's not a secret that the average cost of Hiring React Native Developers varies depending on geographical location. So let's have a brief look at it:**
- North America: 150$/hour 
- Australia: 90$/hour 
- UK: 70$/hour 
- South America: 45$/hour 
- Eastern Europe: 40$/hour 
- India: 30$/hour

Now you might be wondering where would you find such experts and cost-effective react native developers for hire in India? I would suggest to you an agency I have worked with in the past for developing different apps on react native. i.e. **WebClues Infotech.** They have got a huge talent pool of react-native developers that can help you in building a react native app.

I hope the post helps you understand the cost associated with developing react native apps.
About React UseEffect
Published: 2022-02-04 12:41:48

---

By Gene Lorenz Sarmiento 

Last Edited: February 4, 2021 8:10 pm GMT+08:00

I made this article about useEffect via Scrimba’s free React lesson ([https://scrimba.com/learn/learnreact](https://scrimba.com/learn/learnreact)).

First, what is a side effect in React. A side effect is an effect that React can’t handle on its own:

- (Out)side effects! The examples of it are:
    - localStorage
    - API/database Interactions
    - Subscription (e.g. Websockets)
    - Syncing 2 different internal states together.
    - Basically anything that React in not in charge for.

![Credits to [Scrimba](https://scrimba.com)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kdggsuuzax39bhxgsa7.png)
                 

If you are familiar with class-based components, you can think of the useEffect() as the `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` to control side effects. In functional components, you can use hooks(which is like Class-lifecycle methods in React). One of the hooks is called useEffect()

The *Effect Hook* lets you perform side effects in functional components

UseEffect will run when every component is rendered

2 parameters (1 is a callback function and 1 optional (This can be required) )

```jsx
const [count, setCount] = React.useState(0);
// side effects
    React.useEffect(function() {
        console.log("Effect ran")
 
    }, [count]) 
// 1st param - Callback function
// 2nd param - dependencies array
// First parameter run when the 2nd parameter changed/re-rendered
/* if the second parameter is an empty array [], 
it will not render every time that any state has change
*/
// useEffect() depends on the 2nd parameter if it should run 
```

To clean up the side effects, you should return the value of it.

```jsx
React.useEffect(() => {
        function watchWidth() {
            setWindowWidth(window.innerWidth)
        }
        /* can cause a memory leak (if the component was removed on the DOM)
				* if not removed on return */
        window.addEventListener("resize", watchWidth)
        
        return function() {
            window.removeEventListener("resize", watchWidth)
        }
    }, [])
```

### References:

[https://reactjs.org/docs/hooks-effect.html](https://reactjs.org/docs/hooks-effect.html)

[https://scrimba.com/learn/learnreact](https://scrimba.com/learn/learnreact)

More Graphics:  [https://funky-cuticle-9ef.notion.site/About-React-UseEffect-ea0c2342c07c4c42958659bca33fcbb6]
(https://funky-cuticle-9ef.notion.site/About-React-UseEffect-ea0c2342c07c4c42958659bca33fcbb6)
Full Stack Bootcamp Day 1: Axios Request
Tags: beginners, javascript, node
Published: 2022-02-04 12:39:47

Hello fellow developers! As I have mentioned before, I will share my full stack bootcamp experience, click [here](https://dev.to/ahmetmeliksah/my-journey-to-become-a-developer-5f68) to know more about it. On the first day of the bootcamp, we learned basic JavaScript which I will not go over it, because you can find it anywhere. But rather, I will talk about the homework today. When we go into advanced concepts, I will write them in detail. Of course, I will change the context. So, here is my homework:

First of all type `npm init` in your terminal. You will see this:
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643974387587/CwbrhbR74.png?auto=compress,format&format=webp" alt="terminal image"/>

If you want to customize package name, version, description, entry point, test command, git repository(to which git repo the file is to be pushed/uploaded), keywords, author, and license, you can do that. I did not do anything and just clicked enter for all. Then, it will show you the JSON file and ask is this OK? If yes, click enter, if no, then type No and then hit enter.

After that, type `npm i axios` on the terminal and hit enter. It will download axios.
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643974775168/efKPXXHBvb.png?auto=compress,format&format=webp" alt="terminal-image"/>

You will see two new files and a new folder
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643974983250/OEY3T0w0i0.png?auto=compress,format&format=webp" alt="folders" />


I will be coding on Ecma standards and I am planning to do that on my codes. So, I will use ***_type: "module",_***. Go to package.json file and write "type":module,

Do NOT forget the comma, else you will get an error
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643975364062/4-ikq25qb.png?auto=compress,format&format=webp" />


Now we can start coding. First of all, import axios from axios library. See, it is almost plain English :)

Have an async function, so it will not wait to receive data to run the code. Use a try/ catch code block. If data is received run try, otherwise catch the error. We use await keyword to let JavaScript know that we are waiting for something that may or may not happen in the future.

We use axios.get() method to get the data (can be a URL or something else on your computer). So, await axios.get("URL") combination is something like: be ready in case something happens (data is received in this case). When something happens (data is received), log only the data part of the object. Now it does not have to be the data part, but I want to see only the data part for this scenario. So I logged response.data to console.

Here is the code:
```
import axios from "axios"; // import axios 

async function getData() {
  try {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}
getData();

```
That is all for now. Take care and keep coding
How To Add Jenkins Controller & Agent Node for Windows | Jenkins Tutorials | Part VI
Tags: javascript, beginners, tutorial, jenkins
Published: 2022-02-04 12:34:20

{% youtube V2ejGOY_uJI %}

This is Part VI of the Jenkins LambdaTest Tutorial series wherein Moss (@tech_with_moss), a DevOps engineer, explains about configuring Jenkins controller and Jenkins agent nodes to overcome the limitation of a single Jenkins instance. The growing organization needs to scale Jenkins on multiple platforms like Windows, Mac OS, Ubuntu, and Linux. 

Jenkins agents are machines to whom Jenkins controllers can delegate the task of building projects distributed across different platforms that support Java. It allows multi-platform build and testing using the same Jenkins Server.

An agent node might be a windows machine, a Linux machine, or some other platform that supports Java; this allows multi-platform build and testing using the same Jenkins server.  

You will also learn about -:
🔸 How does Jenkins connect to Windows agent?
🔸 Where does Jenkins agent run?
🔸 How does Jenkins agents work?
🔸 How do you deploy Jenkins agent and connect it to Jenkins master?
⚡Use of 'include' Method in JavaScript
Tags: javascript, beginners, webdev, programming
Published: 2022-02-04 12:11:33

Hey guys, Hope you are all well.
Let's discuss 'include' method in JavaScript .It has many uses we talk about one of them here.

▶  Use 'include' method for multiple Criteria.

 If you have to check a lot of conditions in your "if" then instead of extending the statement with more " || " or operator, Write your condition by using Array. include.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9p14da5c5anhf7qym1fw.jpeg)
Shorter and more declarative !
Shell command for cleaning up git repositories from unused branches
Tags: git, shell, script, bash
Published: 2022-02-04 12:06:23

---
title: Shell command for cleaning up git repositories from unused branches
published: true
description: I wanted to share a command I've created to remove unused branches from git repository with with ease.
tags: git,shell,script,bash
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpe30axjnmtzdgl6dxeg.png
---

Hello, 
In this short post I'd like to share with you a simple solution to the issue I'm encountering from time to time. The problem is that each of repositories I'm actively working on is aggregating a lot of branches, because in my workflow, I'm creating a new branch for each new task I'm working with. After merging branch to `main`, I want to keep the branch for a while just-in-case, but then, as one would expect, I forget to delete it. So after some time, when I run `git branch` I am getting more and more results. Actually, I've decided to do something about it when I saw that I have 61 local branches in one of my local repos.

The solution that came to my mind was to right a shell function and add it to my `~/.zshrc` that would work as command that can remove all of the unused local branches automatically.

I've decided that this command should work in the opposite  way to `git branch --delete` where you provide a list of branch names you want to delete. So instead, I want to provide the list of branches I want to keep.

After a thought that I'd need to add branch `main` or `master` each time I'd run this command, I've decided to always add them to the list of branch names that should not be deleted.

Another improvement I've decided to add was to always keep the current branch. Just in case I've decided to clean up all the branches but forgot that I'm already not on the `main` branch.

In my case, I've added it to a file called `~/.custom_aliases` that I keep developing for improving productivity and is "imported" inside my `~/.zshrc`.

Here's the code for it:
{% gist https://gist.github.com/radlinskii/76a648fac7d02bc48b3f09f1c3468bd3 %}


So if you ran `git branch` and see something like :point_down::

![long list of branches](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4il39p9zf1g13x07asbw.png)

and then you run :point_down::

![run `git_branch_delete_all_but rewrite-everything-to-rust` ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkbexx7d6innqrov1jz7.png)

You will end up with clean repo with just the `main` branch, *current* branch, and the branches you explicitly provided not being deleted:

![list of branches with just main, rewrite-everything-to-rust and current branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sha2zmsyadxjdm1j8y94.png)
 
And all that with just a single command. :not_bad:

That's it from me, thanks for reading. I encourage you to leave a like/comment here or star/comment on [github](https://gist.github.com/radlinskii/76a648fac7d02bc48b3f09f1c3468bd3). See you! :wave:
Introduction to javascript
Tags: javascript, webdev, beginners
Published: 2022-02-04 11:53:55

Javascript is the most popular programming language. JavaScript was invented by Brendan Eich in 1995 and became an ECMA standard in 1997. The language was initially called LiveScript and was later renamed JavaScript. When javascript was created it had another name called “Livescript”. At that time java was very popular so it was decided that positioning a new language “young brother” of java. But after some time javascript became so popular with its own specification called ECMAScript and now it has no relation with java.

**Why Study JavaScript?**
**JavaScript is one of the 3 languages all web developers must learn**
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages

**Javacsript can be added in our html page using two ways**

## Internal javascript
We can add JavaScript directly to our HTML file by writing the code inside the `<script>` tag. The `<script>` tag can either be placed inside the `<head>` or the `<body>` tag according to the requirement.
**Example**
   

```html
<html> <head><script>
    console.log(“welcome to javascript”);
    </script></head><body> 
    // html code 
    </body></html>
```

**External javascript**
We can write JavaScript code in other file having an extension .js and then link this file inside the `<head>` tag of the HTML file in which we want to add this code.

## JavaScript features

JavaScript is the most popular language on earth. 
JavaScript has vast features in client side like react and angular and moved into the server with Node.js and other frameworks. 

JavaScript is capable of so much more. Here is a list that we can do with JavaScript: 

- JavaScript was created in the first place for DOM manipulation. Earlier websites were mostly static, after JS was created dynamic Web sites were made.
- Functions in JS are objects. They may have properties and methods just like another object. They can be passed as arguments in other functions.
- Can handle date and time.
- Performs Form Validation although the forms are created using HTML.
- No compiler or translator is needed.

## Conclusion

Javascript is a lightweight and easy to use programming language.
JavaScript can be run on any operating system and in all the web browsers.
You need a text editor to write JavaScript code and a browser to display your web page.
Introduction to javascript
Published: 2022-02-04 11:26:56

Javascript is the most popular programming language. JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997. The language was initially called LiveScript and was later renamed JavaScript. When javascript was created it had another name called “Livescript”. At that time java was very popular so it was decided that positioning a new language “young brother” of java. But after some time javascript became so popular with its own specification called ECMAScript and now it has no relation with java.

**Why Study JavaScript?**

JavaScript is one of the 3 languages all web developers must learn
   1. HTML to define the content of web pages
   2. CSS to specify the layout of web pages
   3. JavaScript to program the behavior of web pages

**Javacsript can be added in our html page using two ways
Internal javascript**
We can add JavaScript directly to our HTML file by writing the code inside the <script> tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the requirement.
Example
<html><head>
<script>
console.log(“welcome to javascript”);
</script>  
</head>
<body> 
// html code 
</body>  
</html>

**External javascript**
We can write JavaScript code in other file having an extension .js and then link this file inside the <head> tag of the HTML file in which we want to add this code.

## Features of JavaScript
According to a recent study by Stack Overflow, JavaScript is one of the most popular languages ​​in the world.
With the development of browser technology and JavaScript migrated to the server via Node.js and other frameworks, JavaScript is able to do more. 
**Here are a few things we can do with JavaScript
**
1. JavaScript was created in the first place for DOM manipulation. Earlier websites were mostly static, after JS was created dynamic Web sites were made.
2. Functions in JS are objects. They may have properties and methods just like another object. They can be passed as arguments in other functions.
3. Can handle date and time.
4. Performs Form Validation although the forms are created using HTML.
5. No compiler or translator is needed.

## Conclusion
Javascript is a lightweight and easy to use language.
JavaScript can be run on any operating systems and almost all web browsers.
You need a text editor to write JavaScript code and a browser to display your web page.
How to use Stripe webhooks to monitor Payment Links settings
Tags: javascript, stripe, stripepaymentlinks, node
Published: 2022-02-04 11:22:24

By using Stripe webhooks, we can check the settings of the Payment Links we’ve created from the dashboard or API.
We can use the API to automatically check a new Payment Link’s settings, and correct them if need be.

## Supported event types for the Payment Links
We can listen for the following events:

- payment_link.created
- payment_link.updated

## Example code
The following code listens for the Payment Link events mentioned earlier:

```js
const stripe = require('stripe')('YOUR_SECRET_API_KEY');
const express = require('express');
const app = express();

// This is your Stripe CLI webhook secret for testing your endpoint locally.
const endpointSecret = "whsec_xxxxxxx";

app.post('/webhook', express.raw({type: 'application/json'}), async (request, response) => {
  const sig = request.headers['stripe-signature'];

  let event;

  try {
    event = stripe.webhooks.constructEvent(request.body, sig, endpointSecret);
  } catch (err) {
    response.status(400).send(`Webhook Error: ${(err as Error).message}`);
    return;
  }

  if (![
      'payment_link.created',
      'payment_link.updated'
  ].includes(event.type)) {
    response.send();
    return;
  }

  /**
   * TODO: Check Payment Link settings
   **/
  const paymentLink = event.data.object
  console.log(paymentLink)

  // Return a 200 response to acknowledge receipt of the event
  response.send();
});

app.listen(4242, () => console.log('Running on port 4242'));

```
The request object (event.data.object) contains the details of the Payment Link. Using this object we can check its details and settings.
 
If you want to know why we execute the stripe.webhooks.constructEvent function before handling the event, please read the webhook signature [docs](https://stripe.com/docs/webhooks/signatures).

## Correct configuration errors automatically

If we want to correct any issues with our configuration automatically, we can add the following code into the TODO area from the previous code example:

```js
 /**
   * If the link does not allow the promotion code field,
   * it's invalid configuration!
   */
  if (!paymentLink.allow_promotion_codes) {
    /**
     * Call Payment Links API to enable it.
     */
    await stripe.paymentLinks.update(paymentLink.id, {
      allow_promotion_codes: true
    })
  }

```

The request object (event.data.object) contains the details and settings of the Payment Link. 

This example will correct the `allow_promotion_codes` options, in case it wasn’t correctly set when creating the Link.


We can also correct these types of settings:
- Collect Billing / Shipping address
- Activate Stripe Tax
- Behavior after the purchase is complete


## Learn more about Stripe Payment Links

{% youtube N_2Il3Uq-3o %}