teleren/devto huggingface dataset:
Jquery in React JS
Tags: javascript, react, html, css
Published: 2021-11-05 13:25:36

Hello Everyone today i am going to show you how to use Jquery in React JS.

JQuery - 
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Installing JQuery
```
npm install jquery

```

Importing Jquery in React

```javascript
import React, {useEffect} from 'react'
import $ from 'jquery' //importing jquery
window.jquery = window.$ = $ //loader js

```

HTML Part - 
``` html
<button id='btn1' className='btn btn-dark btn-lg'>Fade</button>
<p className="jumbotron bg-dark text-light text-center" id="txt"> 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
book. 
</p>
```

JQuery Part -

```javascript
useEffect(() => {
 if($){
    $('#btn1').click(e=>{
       $('#txt').fadeToggle();
    })
  }
},[$])
```

We have used the fadeToggle effect of jqeury on our paragraph with the help of button we have created.
(useEffect is different topic i had already cover it in one of my blog post)



Full Code - 
```javascript
import React, {useEffect} from 'react'
import $ from 'jquery' //importing jquery
window.jquery = window.$ = $ //loader js

function App(){

useEffect(() => {
 if($){
    $('#btn1').click(e=>{
       $('#txt').fadeToggle();
    })
  }
},[$])

return (
    <div>
    <button id='btn1' className='btn btn-dark btn-lg'>Fade</button>
    <p className="jumbotron bg-dark text-light text-center" id="txt"> 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
        an unknown printer took a galley of type and scrambled it to make a type specimen 
        book. 
    </p>

  
    </div>
)
}
export default App;
```

NOTE - I have used bootstrap also you can add bootstrap either through CDN or through npm!!

THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION PLEASE MENTION IT COMMENT SECTION.
Responsive Personal Portfolio Website with HTML CSS JS - Part 3
Tags: css, javascript, webdev, beginners
Published: 2021-11-05 13:12:34


{% youtube qnjvpzh0fKI %}

How to create Responsive personal portfolio website with html css js

In this video series, 
I will show you how to build a Complete Responsive Personal Portfolio Website using HTML CSS JavaScript. 

🌟 Website features
---------------------------------
+ 5 pages
+ Fully Responsive and mobile friendly
+ Awesome Page Navigation
+ Filterable item showcase

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)
🕐 New videos Every Friday & Tuesday

---

📹 Recommended Videos
---------------------
[Part 1](https://dev.to/codewithsadee/responsive-personal-portfolio-website-with-html-css-js-part-1-3dlg)
[Part 2](https://dev.to/codewithsadee/responsive-personal-portfolio-website-with-html-css-js-part-2-l5)

---

🔗 Essential links
-----------------------------
Images : [image.zip](https://drive.google.com/file/d/1CZZcnaOEVDDneSve6qpSUoyAfEBuPrqD/view)
Font : [Poppins](https://fonts.google.com/specimen/Poppins?query=poppins)
Ionicon : https://ionic.io/ionicons
How to use ionicon : https://youtu.be/TTrYjLOJeKs
Source Code : https://www.patreon.com/codewithsadee

---

⏱️ Timestamp
------------------------
0:00 - Demo
1:05 - Portfolio section
11:09 - Media queries
13:03 - Portfolio filter functionality

---

👤 Like - Follow & Subscribe Me
----------------------------------------------------
Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
UI Dev Newsletter #81
Tags: html, css, javascript, webdev
Published: 2021-11-05 13:02:03

## Links


[Lists](https://bit.ly/31dGg5b)
Chrome Developers share a module where you will learn how to style all the parts of a list.


[#26 HTMHell special: tasty buttons](https://bit.ly/3w4IUWl)
Manuel Matuzović shares the second HTMHell special, which focuses on another highly controversial pattern in front-end development: the burger button.


[Implementing Accessible UX for Your Business Site](https://bit.ly/3my3WcR)
Zoho team shares a guide on navigating a website if visitors cannot use a mouse, listen to a video, or read text and graphics.


[Why Outdated jQuery Is Still the Dominant JavaScript Library](https://bit.ly/3brQNf9)
Richard MacManus tries to find out the latest on this jQuery, so he spoke to one of the developers who continues to maintain jQuery, Michał Gołębiowski-Owczarek.


[GitHub Command Palette](https://bit.ly/3CNj6AR)
GitHub team launched a command palette to navigate, search, and run commands directly from your keyboard.


[30 HTML Snippets for the Most Frequently Used HTML Tasks](https://bit.ly/3GEpv3v)
Stephan Miller lists 30 commonly used HTML code snippets that might be helpful for any project.


[Blobity](https://bit.ly/3pVyuHq)
Georgy Marchuk shares a JavaScript plugin for taking the cursor to the next level.


[100 Best Free Fonts for Designers in 2021](https://bit.ly/3Bz9Pef)
Awwwards team shares some nice fonts that are free to use, some for non-commercial use only, and some that have a free version available.


## Self-promotion

[Using CSS Variables for reduced motion on a global scale](https://bit.ly/3CxIn1y)
I have published an article where you could learn how to use CSS Variable and prefers-reduced-motion media feature to remove or minimize animations and transitions on a global scale.

## Around the web

[The metaverse is bullshit](https://bit.ly/3mzkeSY)
Wes Fenlon explains why metaverse does sound like a worse version of the internet.


**Happy coding!**

[Subscribe to the newsletter here!](https://buttondown.email/starbist)
Pure Function in JS
Published: 2021-11-05 12:57:52

a pure function is one of the concepts of functional programming in javaScript.

- pure function: don't use the global variable scope in order to achieve principle pure function because the function is only dependent on its own input.

this gives us the pure function if I give it the same input will return always the same output every time will be executed.

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

add is a pure function because the output is dependent on only its own arguments that can be received from the function, therefore, if the function takes the same input will return always the same output.



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

in this example, create function is not pure because dependent on another variable from out the scope it owns.




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

and from the other cases, the function can be impure function is in the cases  API function because in some cases the function sometimes will work, sometimes the server will be down, we will get an error 500 or 404, and in the future, the API may change, therefore, we can say that fetchLoginToken isn't pure function.


- pure function won't cause any side effects. A side effect is any change in the system.


1- some side effects can be like.
2- making on HTTP call 
3- mutation(changing)
4- obtaining user input




- there are some reasons for writing pure function.


1- readability: side effects make code hard to read, then if the function is pure is easy to read it and understand it in an easier way.


2- testability: because the pure function is deterministic by 
nature, therefore, writing the unit testing is very easy.


3-  reusability: thinking in a pure function as a little bit of part logic because dependent on only its own input, then we can easy to use in different parts of our project.




- Features of the pure function.

  1- we can always predict the output.
  2- function programming reduces the numbers of lines of code.
  3- test is easy because does not change the state of the variable.


last but not least, in the JavaScript data types like string, Boolean, and number they are immutable opposite the data structure is like array and object they are mutable because they collect a set of data, and apparently because they are non-primitive data type, and therefore if there is any change in the state of the old array, it is considered an impure function.





if you would like to read more about the pure function you can check this link you can find some links explaining that in an easier way.


- https://bit.ly/3bmTAGv
Coding with an accent
Tags: webdev, beginners, programming
Published: 2021-11-05 12:24:25

After few years working in the software industry, I realized that most of the companies do not really care enough about conventions. They mostly focus on the "Getting Things Done" and keep using accent - sometimes unconsciously - in their code base which make the integration of newcomers very difficult.

## Natural Languages & Software Languages
 We use natural languages to communicate with humans as we use software languages to communicate with computers. The fact is when we code we do not communicate only with the computer but also with other coders. So basically we want other to understand what we do. 
 As you can feel the accent of a french native speaker speaking in English without respecting words pronunciations, you can also feel the accent of a developer from `Java` world coding in `Python` without respecting conventions. It's the same thing when a developer comes from technology A and apply its conventions to a technology B.
In natural languages, accent is not that bad. However, it can provoke a big mess in software development.
 
## Avoid using accent
 I one day worked on a project where the technology used was `Python/Django`. The first time I joined the team - as usual - they gave me the requirements to read. After reading them and jumped into the project, I was a little lost. The project architecture did not respect the Django conventions and there were no documentation in the project saying it. It took me time to get into it and start coding. "Why you didn't use the default architecture?" "Is there any purpose on changing it?" I asked. "No, We've used to design like that" one of my teammate answered.
 It was not the only weird thing I've found. For each python `.py` files, there was only one `class` that has the same name as the file. Then I realized those guys are from `Java` or `C#` where the convention is to have only one class for each file (required in Java, preferred in C#). In fact in those languages, files are not modules whereas they're in Python. So they were coding with `accent`.
 
 The following snippets shows two Python code: the first with accent (brought from `Golang`) and the second with Python's conventions:

Python code with Golang accent:
```python
 def multiply(x, y):
    error = False
    result = None
    if not x.isdigit() or not y.isdigit():
        error = True
    else:
        result = x * y
    return result, error
 
 result, error = multiply(5, 4)
 if not error:
    print(result)
 ```
Python code without accent:
 ```python
 def multiply(x, y):
     if not x.isdigit() or not y.isdigit():
         raise ValueError("inputs should be digits")
     return x * y
 
 # Python doesn't use errors. It uses exceptions.
 try:
    result = multiply(5, 4)
 except ValueError as e:
    print(e)
 else:
    print(result)
```
  
This shows how bad it is to code with `accent`. It's because people usually don't read the official technologies documentations. They pick a technology and apply a foreign conventions to it. It makes the code harder to understand.

Don't fall into the trap.
Day 51/100 Higher-Order Functions
Tags: 100daysofcode, challenge, programming, motivation
Published: 2021-11-05 12:21:04

"Tzu-li and Tzu-ssu were boasting about the size of their latest programs. ‘Two-hundred thousand lines,’ said Tzu-li, ‘not counting comments!’ Tzu-ssu responded, ‘Pssh, mine is almost a million lines already.’ Master Yuan-Ma said, ‘My best program has five hundred lines.’ Hearing this, Tzu-li and Tzu-ssu were enlightened."

– Master Yuan-Ma, The Book of Programming

![functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flzd4z2u6yo53y0bcsa6.png)
Better plots for Statistics display - ggstatsplot
Tags: ggplot2, github, r, opensource
Published: 2021-11-05 12:11:27

I thought I would write my #firstpost about this. If you've done any plotting in R, you've almost certainly used ggplot2 while it offers a simple approach to making plots, they are sometimes but ggstatsplot is an extension to it. It provides a variety of statistical tests including a text rich plots for better visualizations.

The link to the github repo is [ggstatsplot](https://github.com/IndrajeetPatil/ggstatsplot).

This a very useful plotting technique has statistical details, which makes data exploration simpler and faster. 

a quick peek of the ggbetweenstats code:

```r
# for reproducibility
set.seed(123)
library(ggstatsplot)

# plot
ggbetweenstats(
  data = iris,
  x = Species,
  y = Sepal.Length,
  title = "Distribution of sepal length across Iris species"
)
```
![ggbetweenstats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwoh3awpqwt4f18bo60y.png)

Everything in detail is presented in the github repo for more details do [visit!](https://indrajeetpatil.github.io/ggstatsplot/) 

Credits: [Indrajeet Patil](https://github.com/IndrajeetPatil)
Bridge between ERC20 to BEP20 token
Published: 2021-11-05 12:04:05

does anyone knows how to make a bridge in metamask to send ERC20 tokens : https://etherscan.io/token/0x8ab0565dfe65bf9be754d7b0dadbb42c4ecaec01

To Bep20 tokens : https://bscscan.com/token/0xea255909e46a54d54255219468991c69ca0e659d

Is it possible to make it in metamask, does anybody have smart contract for this and than when transfer done funds to be locked for 6 months. Thank you
Git Delete local branch
Tags: gitprogramming, codenewbie, tutorial
Published: 2021-11-07 04:14:24

---
title: Git Delete local branch
published: true
date: 2021-11-05 11:59:43 UTC
tags: #git#programming #codenewbie #tutorial
canonical_url: https://itsmycode.com/git-delete-local-branch/
---

ItsMyCode |

While working on a project, it always becomes tedious to manage git branches. We often create many feature branches on local and remote, and later it becomes difficult to manage the git branches. In this article, let’s take a look at how to delete local branch in Git.

## Git Delete local branch

First, let us list out all the branches that we have in our local and remote using the  **git branch ** command.

### List all Git branches

In order to list all the git branches, you can run the **`git branch`** command with the **`-a `** flag(all).

```bash
git branch -a
```

**Output**

```bash
  develop
  master
  feature-1
  remotes/origin/develop
  remotes/origin/master
  remotes/origin/feature-1
```

### **Git command to delete local branch**

You can delete the local branch using the **`git branch`** command followed by the **`-d`** (delete) flag and provide the local branch name you need to delete.

**Syntax**

```bash
$ git branch -d <branch_name>
$ git branch -D <branch_name>
```

- The **`-d`** option is an alias for **`--delete`**. Using this flag can only delete the branch if it has already been fully merged to its upstream branch.
- The **`-D `** option is an alias for **`--delete --force`**. It is a force deletion of a branch. Using this flag deletes the branch “ **irrespective of its merged status**.”
- You will receive an error if you try to delete the currently selected branch.

#### **Example delete local branch**

You could use one of the below commands to delete your local branch.

```bash
$ git branch -d feature-1

$ git branch -D feature-1
```

**Output**

```bash
Deleted branch feature-1 (was 0c3dae4).
```

### Git Delete Remote Branch

Deleting the remote branch is slightly different from deleting a local branch. You cannot use the git branch command to delete remote branches. Instead, we need to use the git push command with the — delete flag to delete a remote branch. Ensure to provide the remote branch name correctly.

If you are looking to delete the remote branch, you can use the below command.

```bash
git push origin --delete <branch> # Git version 1.7.0 or newer
git push origin -d <branch> # Shorter version (Git 1.7.0 or newer)
git push origin :<branch> # Git versions older than 1.7.0
```

#### Example Delete remote branch in Git

```bash
$ git push origin --delete feature-1
```

**Output**

The post [Git Delete local branch](https://itsmycode.com/git-delete-local-branch/) appeared first on [ItsMyCode](https://itsmycode.com).
Top 10 trending github repos of the week🚽.
Tags: go, react, designsystem, im
Published: 2021-11-05 11:37:24

---
title: Top 10 trending github repos of the week🚽.
published: true
description: Most popular trending Github repos in this week.
cover_image: https://source.unsplash.com/featured/?coding
tags: golang,react,designsystem,im
series: Weekly Github top 10
---
GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and features, power your CI/CD and DevOps workflows, and secure code before you commit it.

Here is the most popular repos published on this platform.

## #1
![social banner of repo](https://opengraph.githubassets.com/cb2219f5e74a97bd9646e974385b8d5f8266b36e75fde3bedcbcc5c14b55dd3c/OpenIMSDK/Open-IM-Server)
{% github OpenIMSDK/Open-IM-Server %}

## #2
![social banner of repo](https://opengraph.githubassets.com/ee9ab983e61bedde003c6c5c66d689597d818e34bf4817bc34da3171a1dd301d/github/copilot-docs)
{% github github/copilot-docs %}

## #3
![social banner of repo](https://opengraph.githubassets.com/120bf6ad1b19e883661797175d7e0ed2fbd97af007f25156b3c7f03086d23ba8/github/copilot.vim)
{% github github/copilot.vim %}

## #4
![social banner of repo](https://opengraph.githubassets.com/586fc350393cfb103c3304eb7bf029dc34b4feadcd2b0542220765cdf47cce45/arco-design/arco-design)
{% github arco-design/arco-design %}

## #5
![social banner of repo](https://opengraph.githubassets.com/7220978ac4bee5913933979304e72d297a5c95a0c9c4f0fde16c1fc3e323db8e/zero205/JD_tencent_scf)
{% github zero205/JD_tencent_scf %}

## #6
![social banner of repo](https://repository-images.githubusercontent.com/344191198/8ccb9f17-6cae-4511-ac05-63ab9251c10b)
{% github microsoft/Data-Science-For-Beginners %}

## #7
![social banner of repo](https://repository-images.githubusercontent.com/107286889/da3aec00-a78e-11e9-8627-46ec1ac39ae5)
{% github schollz/croc %}

## #8
![social banner of repo](https://repository-images.githubusercontent.com/19257422/e304db00-76b0-11eb-8bf9-c8edce4ed374)
{% github questdb/questdb %}

## #9
![social banner of repo](https://opengraph.githubassets.com/9019743c78e6e65a66f5c0ea9b29e2cbafe15032a15775d0a7a3d5b270aba351/DouyinFE/semi-design)
{% github DouyinFE/semi-design %}

## #10
![social banner of repo](https://opengraph.githubassets.com/dbd7cd16b212496a64bc3057985d95564eb475da2512ea4a16cd16b4bc6452f1/taichi-dev/taichi)
{% github taichi-dev/taichi %}

Enjoy these repos.
Follow me for more articles.
Thanks 💖💖💖
Anybody have idea how to make bridge from ERC20 token to BEP20 token
Tags: crypto, bridge, token, javascript
Published: 2021-11-05 11:03:33

Hi dear people, does anyone knows how to make a bridge in metamask to send ERC20 tokens : https://etherscan.io/token/0x8ab0565dfe65bf9be754d7b0dadbb42c4ecaec01

To Bep20 tokens :
https://bscscan.com/token/0xea255909e46a54d54255219468991c69ca0e659d

Is it possible to make it in metamask, does anybody have smart contract for this and than when transfer done funds to be locked for 6 months. Thank you
Understand OOPS using Squid Game
Tags: development, webdev, objectoriented, opp
Published: 2021-11-13 15:39:32

---
title: Understand OOPS using Squid Game
published: true
date: 2021-11-05 10:31:46 UTC
tags: development,webdevelopment,objectoriented,opp
canonical_url: https://gyanendraknojiya.medium.com/understand-oops-using-squid-game-2fd9f5634b6
---

#### Object-oriented programming is a programming paradigm based on the concept of “objects”, which can contain data and code.

![](https://cdn-images-1.medium.com/max/1024/1*J0Kja1Bvmpt3ynTaQfwPvA.jpeg)

Object-oriented programming is a programming paradigm based on the concept of “objects”, which can contain data and code: data in the form of fields, and code, in the form of procedures. A feature of objects is that an object’s own procedures can access and often modify the data fields themselves.

Here we will try to understand using squid game web series-

### 1. Polymorphism

> Polymorphism is the ability to exit in many forms.

The old man played roles in many forms as the creator, player, and host of the game.

![](https://cdn-images-1.medium.com/max/735/1*SCYergYsKJoAYxRHOxiz9A.png)

### 2. Inheritance

> Inheritance allows classes to inherit common properties from the parent class.

All players inherit the same parent properties like dress, food, tasks. With that ca have a different player with different playing strategical methods.

![](https://cdn-images-1.medium.com/max/866/1*plfvrTVNcFumAOVgtuFc8w.png)

### 3. Encapsulation

> Encapsulation means it binds data and code together into one unit.

Squid Game itself is a big Encapsulation. Combination of frontman, VIP, Host, Players, Money (consider as variables), Tasks (consider as a function) makes the Squid Game.

![](https://cdn-images-1.medium.com/max/531/1*BtxWeDOSJdhnJEWZmRNZ0A.png)

### 4. Abstraction

> Hiding internal details and showing functionality is known as abstraction.

**Tasks:**

Though everyone performs the tasks no one knows the process behind them. From soldiers, The moto to behind the scenes of preparing everything for the task, which are all hidden.

![](https://cdn-images-1.medium.com/max/857/1*uIQ8okyva9vElnjkT7oR0A.png)

buy a coffee for me [https://www.buymeacoffee.com/gyanknojiya](https://www.buymeacoffee.com/gyanknojiya)
#StressAwarenessDay
Tags: testin, qa, okqa
Published: 2021-11-05 10:09:05

How many posts or articles on stress and burnout at work can you come across in the newsfeed per day? We bet a lot of. Stress is something that all of us can experience, regardless of the office or remote work format. But do not forget that there is always a way to reduce the effects. 
Take breaks from ongoing activity. 
Remember to breathe. 
Make time to unwind.
Working on software development, partner up with a QA vendor to ensure product quality and smooth releases. 
What are the ways that you deal with stress? 

https://ok-qa.com/