teleren/devto huggingface dataset:
React Filters with Pagination
Tags: webdev, beginners, tutorial, react
Published: 2022-12-28 11:27:22

Hello Everyone today i will discuss how you can create filter with different form elements like checkbox,input,select and slider.
I will provide the entire code through codesandbox and Explain the main points here.

Let's get started...

# Main Points About the Component
* Firstly i created a form with 4 elements input type of number, a checkbox, a select input and a slider range from 100-1000 with steps of 100.
* Then i created 4 states for these inputs and attached the event listener to all these inputs to change the state of the filters.
* Input, checkbox and select has an "onChange" event listener and slider has a "onInput" event listener to change the state on every slide.
* For the data, i have created an array of object with 3 properties id for the "key" attribute in map function, type for the color value either green or red number, value which is the value used to display the number using map.
* To apply the filters, i have chained the filter method with map method so that it will apply all the filters together.
```js
{
 dummyData
    .filter((item) => item.value > value)
    .filter((item) => item.value > higherValue)
    .filter((item) => item.value > Number(search))
    .filter((item) => {
       if (colorChecker === "") return item;
          return item.type === colorChecker;
       })
    .map((item) => {
         return (
           <div
             key={item.id}
             className={item.type === "red" ? "text-red" : "text- 
             green"} >
              <p>{item.value}</p>
          </div>
        );
 })}
```
* There is a reset filter button which will reset all the filters applied.
* For the styling part you can check the CSS file its not a complex styling, just a simple one.

{% codesandbox https://codesandbox.io/embed/react-filters-with-pagination-i4dlid?fontsize=14&hidenavigation=1&theme=dark %}

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90
React class to functional: states
Tags: react, refactoring, usestate, hooks
Published: 2022-12-28 11:08:08

In 2018 React introduced Hooks. "They let you use state and other React features without writing a class." Hooks can be used in functional components but a lot of projects are still written in class components.

In this serie I'll explain how easy it is to convert/refactor your class component to a functional component so you can use Hooks.

# States

## class component

```
import React from 'react';
import {Button} from "react-bootstrap";

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        }
        this.handleShow = this.handleShow.bind(this);
    }

    handleShow() {
        this.setState({show: true});
    }

    render() {
        const {show} = this.state;

        return (
            <>
                <Button onClick={this.handleShow}>Show</Button>
                {show && <h1>Awesome</h1>}
            </>
        )
    }
}

export default Example;
```

## functional component

```
const Example = () => {
  const [show, setShow] = useState(false);

  const handleShow = () => {
    setShow(true);
  }

  return (
    <>
      <Button onClick={handleShow}>Show</Button>
      {show && <h1>Awesome<h1>}
    </>
  );
}
```

**1. Extends**
Functional components no longer need to extends from React.Component

**2. Constructor**
Where as a constructor is needed in a class component to set states, a functional component can use the "useState" hook. Just import this hook to use it `import React, {useState} from 'react';`

**3. Passing Functions to Components**
In class components it is necessary to pass functions to components in the constructor by `.bind(this)` in order to work. Not needed in a functional component anymore.

**4. Function**
Functions are written a little different. The good old `myFunction() { ... }` has been replaced by `myFunction = () => { ... }`

**5. Variables**
Not needed anymore to point out to `this.state.myState`, but just use `myState`
Shortest Path In DAG
Tags: javascript, leetcode
Published: 2022-12-28 11:06:23

```js
class shortestPathInDAG {
  constructor(v) {
    this.V = v;
    this.adjL = [];
    for (let i = 0; i < v; i++) {
      this.adjL[i] = [];
    }
    this.indegree = [];
    for (let i = 0; i < v; i++) {
      this.indegree[i] = 0;
    }
    this.topOrder = [];
  }

  addEdge = (source, destination, weight) => {
    this.adjL[source].push({ d: destination, wt: weight });
  };
  printAdjList = () => {
    console.log(this.adjL);
  };

  getIndrgree = () => {
    for (let i = 0; i < this.V; i++) {
      let current = this.adjL[i];
      for (let j = 0; j < current.length; j++) {
        this.indegree[current[j].d]++;
      }
    }
  };

  getTopologicalSort = () => {
    let q = [];
    this.getIndrgree();
    for (let i = 0; i < this.V; i++) {
      if (this.indegree[i] == 0) q.push(i);
    }

    let cnt = 0;

    while (q.length) {
      let u = q.shift();
      this.topOrder.push(u);
      this.adjL[u].forEach((adjacent, i) => {
        this.indegree[adjacent?.d]--;
        if (this.indegree[adjacent?.d] === 0) {
          q.push(adjacent?.d);
        }
      });
      cnt++;
    }

    // for (let i = 0; i < this.topOrder.length; i++) {
    //   console.log(this.topOrder[i] + " ");
    // }
  };

  getShortestPath = (source) => {
    let distance = [];
    for (let i = 0; i < this.V; i++) {
      distance[i] = Infinity;
    }
    distance[source] = 0;

    for (let i = 0; i < this.topOrder.length; i++) {
      let currentList = this.adjL[this.topOrder[i]];
      currentList.forEach((each) => {
        if (distance[each?.d] > distance[this.topOrder[i]] + each?.wt)
          distance[each?.d] = distance[this.topOrder[i]] + each?.wt;
      });
    }

    console.log(distance);
  };
}
// Example 1
graphInstance = new shortestPathInDAG(6);
graphInstance.addEdge(0, 1, 5);
graphInstance.addEdge(0, 2, 3);
graphInstance.addEdge(1, 3, 6);
graphInstance.addEdge(1, 2, 2);
graphInstance.addEdge(2, 4, 4);
graphInstance.addEdge(2, 5, 2);
graphInstance.addEdge(2, 3, 7);
graphInstance.addEdge(3, 4, -1);
graphInstance.addEdge(4, 5, -2);
graphInstance.getTopologicalSort();
graphInstance.getShortestPath(1);

// Example 2
graphInstance = new shortestPathInDAG(6);
graphInstance.addEdge(0, 1, 2);
graphInstance.addEdge(0, 4, 1);
graphInstance.addEdge(1, 2, 3);
graphInstance.addEdge(2, 3, 6);
graphInstance.addEdge(4, 5, 4);
graphInstance.addEdge(4, 2, 2);
graphInstance.addEdge(5, 3, 1);
graphInstance.getTopologicalSort();
graphInstance.getShortestPath(0);


```
TECH IS THE NEW OIL
Published: 2022-12-28 10:57:09

I made the decision to transition into the tech industry, and while the process has not been easy, the growth and progress I have made has been extremely encouraging. I have always been interested in technology and the endless possibilities it presents, and I felt drawn to pursue a career in this exciting field.

The process of learning and adapting to a new industry has definitely had its challenges, but I have found the experience to be incredibly rewarding. I have gained a wealth of knowledge and skills, and I am constantly learning and growing as a professional.

Despite the challenges, I am confident that my decision to transition into tech was a good one, and I am excited for the opportunities that lie ahead. I am eager to land a job in this industry and make a positive impact in the tech community. I am confident that with hard work and determination, I will be able to achieve my goals and make a successful career in tech.
Intro to Version control Systems
Tags: subversion, git, cvs, mercuriall
Published: 2022-12-28 10:30:00

Version control systems are tools that help software developers track and manage changes to their code over time. These systems allow developers to keep a record of every version of their code, as well as revert back to previous versions if necessary. They also enable multiple developers to work on the same codebase simultaneously, without the risk of overwriting each other's changes.

There are many different version control systems available, including `Git`, `Subversion`, and `Mercurial`. Each system has its own unique features and capabilities, but *they all serve the same general purpose of helping developers manage and track changes to their code*.

One of the primary benefits of using a version control system is the ability to roll back to previous versions of the code. This can be helpful in situations where a bug is introduced or a feature is not working as intended. By reverting to a previous version, developers can fix any issues and then continue working on the code from that point.

Another benefit of version control systems is the ability to collaborate with other developers. By using a version control system, multiple developers can work on the same codebase at the same time, without the risk of overwriting each other's changes. This makes it easier to collaborate on projects and ensures that the code remains organized and up-to-date.

## centralized vs decentralized version control systems

There are two main types of version control systems: centralized and decentralized. Centralized version control systems, such as Subversion, rely on a central server to store all versions of the code. Developers commit their changes to the central server, which keeps track of every version of the code.

Decentralized version control systems, on the other hand, do not rely on a central server. Instead, each developer has a complete copy of the codebase and its entire history on their own machine. Changes are made locally and then pushed to other developers' machines. Git is an example of a decentralized version control system.

One of the main advantages of centralized version control systems is their simplicity. Because there is only one central server, it is easier for developers to collaborate and keep track of changes. Centralized systems are also generally easier to set up and maintain.

However, decentralized version control systems have several advantages as well. Because each developer has a complete copy of the code-base and its history, there is no single point of failure. If the central server goes down or is lost, the code is still safe on each developer's machine. Decentralized systems are also generally faster and more flexible, as developers can work offline and commit their changes whenever they want.

In this series we are going to look at these Version control systems and get to know them in full length as well as their differences. stay tuned and happy coding.
Người Hùng Của ĐT Pháp Thừa Nhận May Mắn Hơn Tuyển Anh
Published: 2022-12-28 10:19:41


Tiền đạo Giroud thừa nhận Pháp may mắn và hiệu quả hơn trong vòng cấm so với Anh ở tứ kết World Cup.
Xem thêm:[bóng đá số](https://teccoskyville.com.vn/bong-da-so/)
Olivier Giroud đã trở thành người hùng của Pháp khi ghi bàn thắng quyết định trong chiến thắng 2-1 trước Anh ở tứ kết World Cup 2022. Nhưng tiền đạo của AC Milan thừa nhận Tam Sư là đội chơi tốt hơn trong 90 phút và sẽ giành chiến thắng. Nếu hai đội gặp lại nhau thì thắng ván khác.
Tiền đạo 36 tuổi nói với ITV: "Có thể họ xứng đáng nhận nhiều hơn một thất bại nhưng cuối cùng ở cấp độ này, chính những điều nhỏ nhặt mới tạo nên sự khác biệt. Hôm nay, chúng tôi đã thể hiện điều đó một lần nữa. Pháp hiệu quả hơn trong vòng cấm, biết cách sử dụng các chi tiết."
Xem thêm:[Những Tình Huống Xung Quanh Quả Phạt Đền Của Harry Kane Gây Ra Tranh Cãi](https://penzu.com/p/6cd91c48)
Đề cập đến tình huống Theo Hernandez phạm lỗi với Mason Mount dẫn đến quả phạt đền, Giroud thừa nhận Pháp may mắn khi không có bàn gỡ hòa. Cựu xạ thủ nói thêm: "Khi ông ấy chỉ tay vào chấm phạt đền, tôi đã nói với trọng tài rằng đó là một quyết định khó khăn."
"Những pha phạm lỗi như thế này xảy ra trong mọi trận đấu. 
Nó xảy ra rất nhiều khi các tiền đạo đến từ phía sau, vì vậy nếu đó là một quả phạt đền, tôi nghĩ là hơi quá. Tôi không nói gì với Harry Kane, tôi chỉ nói chuyện với trọng tài thôi."
Xem thêm:[Chiếc Giày Vàng World Cup 2022: Cuộc Chiến Tay Ba](https://teccoskyvillezz.wixsite.com/tecco-skyville-tower/post/chi%E1%BA%BFc-gi%C3%A0y-v%C3%A0ng-world-cup-2022-cu%E1%BB%99c-chi%E1%BA%BFn-tay-ba)
 .Dù thế nào đi nữa, không ai có thể thay đổi quyết định, nhưng may mắn cho chúng tôi là cú sút của Harry Kane không đi vào lưới".
Nếu Benzema không chấn thương, Giroud gần như không có cơ hội ra sân. Nhưng cầu thủ 36 tuổi đã hoàn thành quá tốt nhiệm vụ thay thế hàng tiền đạo của Real Madrid. Với bàn thắng vào lưới Anh, Giroud đã ghi 4 bàn vào lưới Qatar.
Xem thêm:[8 Trận Đấu Có Nhiều Bàn Thắng Nhất Tại World Cup](https://dev.to/teccoskyvillezz/8-tran-dau-co-nhieu-ban-thang-nhat-tai-world-cup-3l98)
Ở vòng bán kết, đội tuyển Pháp sẽ đối đầu với Maroc, đội đã gây sốc trước đội tuyển Bồ Đào Nha. Nếu vào chung kết, Les Blues sẽ đối đầu với Argentina hoặc Croatia.
Bạn vừa xem:[Người Hùng Của ĐT Pháp Thừa Nhận May Mắn Hơn Tuyển Anh](https://dev.to/teccoskyvillezz/nguoi-hung-cua-dt-phap-thua-nhan-may-man-hon-tuyen-anh-53p0)
Mọi thông tin xin vui lòng liên hệ với[ Tecco Skyville Tower ](http://teccoskyville.com.vn/)
Android development course in Patiala
Published: 2022-12-28 10:15:05

If you have made up your mind to be an android app developer then you are going in the right direction. Making a career in android development is going to make your life easier. An android development course in Patiala from AD Solutions Market is going to make your learning journey easier. Application development is not just programming. Moreover, it includes understanding related to various types of unique and interesting business ideas that you are going to implement.

**[Android development course in Patiala](https://adsolutionsmarket.com/android-development-course-patiala/)**

Android application development course in Patiala will help you know all the knowledge that you need to know to create an app on your own. Moreover, this android course in Mohali with AD Solutions Market will also tell you about how you can understand the insights of functionalities of the app and recommend better features for the app to the client.
Sounds intriguing? Tell us how this Android training facility in Patiala would impact your life.


Despite the fact that this course will train you to be an expert in Android app development. This is also a beginner's Android app development course. Our implies that you may begin this android developer course in Patiala even if you have never written a single line of computer code in your life. Solutins1313 will meet all of your expectations and make your learning experience a breeze.

Mobile application development may appear to be a daunting task. The reason for this is that in the case of iOS app development, the developer is required to design and construct the programme for just Apple devices that are overly similar to one another. However, things are very different in the case of Android. The developer of an android mobile application must consider a number of devices. This not only makes it harder for him to create the programme compatible with all types of devices, but it also raises the market worth of developers.
4 places to use Chat GPT
Tags: webdev, news, openai, programming
Published: 2022-12-28 10:02:07

## Under the Hood
The picture begins when I want to use chat GPT for my work. I was confused about how to use it and where it can fit well.

{% youtube 0ePcid71ByI %}

So I did a bit of research, understand the tool and then try to get into my daily routine or work.

See, I am an entrepreneur, writer, developer and designer, so I need to google things, and research a lot and that is a time-consuming process.

Instead, I can directly use chat GPT to do most of the time-consuming work for me.

**Let’s start**

## Digital Content
You can create Twitter tweets, blog titles, summaries and many other types of content.

I use to create some solid messages for emailing, feedback, thanking letters, LinkedIn posts and so on.

## Writing Code
I am anyway building this code system for my business. Where I will reuse most of the code, templates and components and for that, I am using chat GPT to write most of the repeated code for me.

For example, I don’t want to rewrite the navbar, sidebar, Ui components CSS again and again and handle responsiveness. So I directly use chat GPT code and put it somewhere in the repository and reuse it again and again.

## Design Inspirations
Every time, I want to make some project interface, I need to go to dribble and got confused about how to find the exact inspiration.

I can now directly tell chat GPT the idea about the website I want to develop and can ask the basic design inspirations to get started.

It was really fast and helpful when I got the first basic design, helps me to proceed asap.

## Collecting Data
I don’t want to google out the data points and copy-paste them into the notion or other databases.

Repeated work, instead I just ask chat GPT about the data points and wrote a script to store the chat GPT output into notion databases or even other databases like Supabase.

When chat GPT gives me some data or collections, I can simply tweet about it helping others around the world with some information, so cool.

## Conclusion
I am developing projects using chat GPT, for the idea watch [this video](https://youtube.com/shorts/56VBTq9JA6c).

[Stay tuned for more such stories or subscribe, I will reach directly to you via email](http://ihatereading.in/subscribe).

Keep developing
Shrey
iHateReading
Wednesday Links - Edition 2022-12-28
Tags: java, jvm, mongodb, gradle
Published: 2022-12-28 09:45:46

Testing (if there are no) pinned Virtual Threads (8 min)📌
https://softwaregarden.dev/en/posts/new-java/loom/testing-pinned-virtual-threads/

Java HTTP Server and Virtual Threads (6 min)🧵
https://piotrminkowski.com/2022/12/22/java-http-server-and-virtual-threads

Transactions in MongoDB (6 min)🍃
https://blog.allegro.tech/2022/12/transactions-in-mongodb.html

Compilation Avoidance with Gradle (4 min)✋
https://foojay.io/today/compilation-avoidance-with-gradle/

Why the Cool Kids Use Event Loops (5 min)➰
https://foojay.io/today/why-the-cool-kids-use-event-loops/

GraalVM, Galahad, and a New Release Schedule (2 min)🏆
https://medium.com/graalvm/graalvm-galahad-and-a-new-release-schedule-d081d1031bba
Figma : NFT Dashboard Components Design In Figma
Tags: figma, webdev, beginners, tutorial
Published: 2022-12-28 09:41:33

{% youtube f4mlb4oKpjk %}

Hi guys, today we want to show Figma : NFT Dashboard Components Design In Figma
Please, if you love it, support us with Like & Subscribe.🙏🙏❤️❤️

download Link : 
https://www.figma.com/community/file/...

Let's be friends and connect
📩 Subscribe:https://shorturl.at/BCTV8
📷 Instagram: https://www.instagram.com/soudemy/
📱 Behance: https://www.behance.net/soudemy
🐦 Twitter: https://twitter.com/SoudemyAcademy

In the comments, you can say what design you want so that we can prepare the video for you.
How To Generate Automation Script Using ChatGPT for Automation tool Playwright
Tags: chatgpt, playwright, javascript, programming
Published: 2022-12-28 09:41:19

As ChatGPT may be used to write code in a variety of programming languages and technologies. After more investigation, I made the decision to create some scenarios using it. I have created some use cases around UI scenarios and generate the Cucumber feature file using ChatGPT.

Please follow the link to know more about how Code Generated Using ChatGPT for Playwright.

Please follow [the link](https://qaautomationlabs.com/chatgpt-for-automated-testing-for-playwright/) to know in detail

The aim of this blog is

1. How you can set up ChatGPT?

2. To know Is ChatGPT really helpful in generating Playwright/JavaScript Code?

3. How Can we generate an automation script For:

UI Automation Using Playwright /Javascript
Generate Cucumber Feature file
How ChatGPT Generate Code for Automation tool Cypress
Tags: chatgpt, cypress, testing, ai
Published: 2022-12-28 09:38:34

In its first week of launch, ChatGPT shattered Internet records by becoming extremely popular. As a person who works in QA automation, my initial thinking when I started looking into it was how to use this wonderful platform to make the jobs of testers for Web and UI automation simpler.


Please open the link to know in detail how we can use ChatGPT to Generate the code https://qaautomationlabs.com/how-chatgpt-generate-codes-for-automation-tool-cypress/


**The aim of this blog is**

1. How you can set up ChatGPT?

2. To know Is ChatGPT really helpful in generating Cypress/JavaScript Code?

3. How Can we generate an automation script For:

UI Automation Using Cypress /Javascript
API Automation Using Cypress /Javascript
Generate Cucumber Feature file
How To Use Laravel 9 To Add A Digital Signature To A PDF
Tags: laravel
Published: 2022-12-28 09:20:19

We'll learn how to add a digital signature to a PDF document using Laravel 9 in this tutorial. Learning how to add a digital signature certificate in pdf in Laravel 8 and Laravel 9 is covered in this article. The elibyy/tcpdf-laravel package will be used.

The only PHP-based library that fully supports right-to-left languages and UTF-8 Unicode, including the bidirectional algorithm, is TCPDF, an open-source PHP library. Additionally, PHP 7 does not support TCPDF.

Let's examine Laravel 9 now. In Laravel 7/8/9, you can add a digital signature in pdf, a digital signature to the pdf file, and a digital signature certificate in pdf.

**Step 1: Install Fresh Laravel 9**
The following command will be used to install Laravel 9 in this phase.
`composer create-project --prefer-dist laravel/laravel laravel9_digital_signature`
**Step 2: Install TCPDF Package**
The Laravel TCPDF service provider can be installed via composer by requiring the **elibyy/tcpdf-laravel** package in your project's composer.json. So, run the following command in the terminal.

`composer require elibyy/tcpdf-laravel`
**Step 3: Configure TCPDF Package**
If you are using a lower version of laravel like 5.5+ then need to add providers and aliases to the config.php file.
[continue......](https://www.frezhtech.com/post/how-to-use-laravel-9-to-add-a-digital-signature-to-a-pdf)

Read Also: [How To Merge Two PDF Files In Laravel 9](https://www.frezhtech.com/post/how-to-merge-two-pdf-files-in-laravel-9)