teleren/devto huggingface dataset:
Instagram Phising
Tags: javascript, programming
Published: 2021-12-31 06:30:26


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

**Instagram Phishing Usage :**
- Note : Don't forgot I don't give a fuck about what you do with my code, I am obviously not responsable of shit you do ok ? 😉
- My Instagram phishing page is really easy to use, you only have to replace WEBHOOK on line 101 by your Discord webhook. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mh7ps5m5kta892jwm08.png)
- Next you upload it in your website (like netlify or 000webhost, they are free)
- When someone will login you will receive his credentials and he will be redirected to a funny video (the one in the link, you can change it by editing the link and the js part in HTML on line 108). 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gt924f7gqi4qhe6p6t6.png)

- Github Repo: [PenucuriCode](https://github.com/GarudaID/ig-phising)
Good Bye console.log,no console.log in 2022
Tags: javascript, webdev, html, devops
Published: 2021-12-31 06:30:06

yes you heard it right.

we frequently use **console.log()** to check our outputs in console, it's ok in Development mode but it is highly disgraced in production.

so then what's the solution for it.so in production we basically use production grade loggers.This article is going to teach you how to use **[ps-logger](https://www.npmjs.com/package/ps-logger)**.

 **Q.Why ps-logger ?**
=>yes you have **few** other options but the problem is that you have to do lots of manual configurations in it.That's why beginners don't even touch production grade loggers.


**[ps-logger](https://www.npmjs.com/package/ps-logger)** is a plug and play logger.There is no manual configurations.you have to just install and use it.

```bash
npm i ps-logger
```

- Example:-

```javaScript
const logger=require('ps-logger');

logger.info("This is info")
logger.warn("This is warning");
logger.error("This is error");
logger.debug("This is debug");
logger.prompt("This is prompt");
logger.verbose("This is verbose");
logger.silly("This is silly");
```

![ps-logger](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n7u5kg64veijm949bxc.PNG)

- if you want to disable its colors

```javascript
logger.setColor(false);
```

in future updates it will provide more features to you guys
What was your win this YEAR?
Tags: discuss, weeklyretro
Published: 2021-12-31 06:24:05

---
title: What was your win this YEAR?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 

I'm mixing up this week's win thread in honor of the upcoming new year (for those cultures that recognize the New Year as beginning this upcoming Saturday, that is). 

<mark>Instead of looking back on our weeks, what would you say your biggest win was for this past YEAR? What are you proud of having accomplished?<mark>

All wins count — big or "small" 🎉

Examples of 2021 'wins' include:

- Starting a new job
- Learning to value your personal strengths 
- Taking more time off to unplug with loved ones regularly ... or whatever else might have sparked joy and purpose ❤️ 

---

Congrats on your accomplishments in 2021! You're amazing 🌠 

![Whitney Houston Celebrating](https://media.giphy.com/media/3o6MbeDiaHJaF2EuQM/giphy.gif)
MERN-How Add rows dynamically and store it it mongodb
Tags: javascript, react, webdev, beginners
Published: 2021-12-31 06:11:19

i have a react app in which i want to add songs dynamically one by one [like this](https://stackoverflow.com/questions/49171107/how-to-add-and-remove-table-rows-dynamically-in-react-js) but when i changed the state according to my code it stopped working.. Please Help me to clear this issue [my code](https://sourceb.in/avOydHYkA9) Thanks in advance
Contact from - send Email directly from client-side
Tags: emailjs, react, webdev
Published: 2021-12-31 05:30:52

**A contact form let visitors fill out the form and submit it to send a message to the site owner**

_Behind the scenes, your contact form triggers an emails.sendForm() function which generate email message and send it to your mail id._

```javascript
emailjs.sendForm(
    'YOUR_SERVICE_ID', 
    'YOUR_TEMPLATE_ID', 
    form.current, 
    'YOUR_USER_ID'
).then((result) => {},(error)=>{})
```

**Steps**

1 . Create account on EmailJS

2 . Add new email service

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

3 . Add new template
_edit template as per your requirement_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyexa2ztavbx45royyxs.png)

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

4 . create react app

```
$ npx create-react-app project_name
```

5 . Install EmailJS library

```
$ npm install @emailjs/browser --save
```

6 . Create contact form

```html
<form ref={form} onSubmit={sendMail} className='contact-form'>
   <input type="text" className="form-input" name="name"  placeholder='your name'/>
   <input type="text" className="form-input" name="subject" placeholder='subject' />
   <input type="email" className="form-input" name="email" placeholder='youremail' />
   <input type="message" className="form-input" name="message" placeholder='message' />
   <input type="submit" className='form-button' value="Send Mail" />
</form>
```

**useRef() hook**
Note - The useRef is a hook that allows to directly create a reference to the DOM element in the functional component.

```javascript
const form = useRef();
console.log(form.current)
```
Result - 
```
[Log] <form class="contact-form">
<input type="text" class="form-input" name="name" placeholder="your name">
<input type="text" class="form-input" name="subject" placeholder="subject">
<input type="email" class="form-input" name="email" placeholder="youremail">
<input type="message" class="form-input" name="message" placeholder="message">
<input type="submit" class="form-button" value="Send Mail">
</form>
```

7 . Now call emailjs.sendForm()

```javascript
emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
```

This function generate email message and send it to your mail id.
Developing a 3D game which runs on your browser
Tags: javascript, threejs, gamedev, programming
Published: 2021-12-31 05:30:35

So it all begins with a person who is inspired to develop games, but is experienced in web development and has no prior experience with C#. Yes, that person is me 😅. I an a web developer who had previously created a few basic 2D games like PONG, Snake etc using javascript and PyGame but never explored the 3D version of game development, until this year when I discovered this awesome Javascript library Three.js.

I have created a 3D TPP game which sets your character in a sandbox world where you can move around, eliminate bots, or get eliminated by them. 
Along with this, I have also used the previous knowledge I had about backend and developed a multiplayer mode where all the joined users are synchronized to enable a smooth gameplay.

### Some useful links👀

> [Github Repository](https://github.com/RishavMz/Battleinator5000)

> [Deployment](https://battleinator5000.netlify.app/)

Hmm, that seems enough of an introduction... Let's elaborate further

## Singleplayer Mode

![A screenshot of singleplayer mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q94upcbdwihhcpzb7n3k.png)

Some exciting features added:
* The terrain generation is random, and may reset every time the page is refreshed.
* Position of bots is handled by spatial QuadTree, which reduces the load on processor by handling only the nearest bots movement (not all the bots on the map)
* Added dense fog for a better battleground appearance 
* Moving water (cause why not?)
* Some bots chase you, and may damage you if too near
* Switch weapons(for Melee attack) and destroy bots
* Shoot projectiles to destroy bots

## Multiplayer Mode

![A screenshot of multiplayer mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1p153ynzaw2zt0edoph.png)

Some exciting features added:
* Usernames hover above the players
* Syncing of user positions in real time using SocketIO
* A real time chat feature for better experience

## System Architecture
### Frontend
![A schematic view of frontend design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ssm1jer11cvj40846k4.png)
> Followed OOP patterns to enable efficient handling of shared variables, repeating blocks of code and dependencies

### Backend

![A schematic view of backend structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apk6owa06d6hn2vj8crt.png)
> Used SocketIO for syncing of all the clients, and NodeJS as backend




### Ending notes😅:
* The server for multiplayer mode is currently down, had some deployment issues due to heavy traffic, would figure out some solution in a while.
* There might be some bugs, if found you may report it [here](https://github.com/RishavMz/Battleinator5000/issues)
Machine Learning vs Deep Learning: What’s the Difference?
Published: 2021-12-31 05:19:15

**Machine Learning vs Deep Learning: What’s the Difference?**
In this blog we are going to see difference between Machine Learning and Deep Learning. Machine Learning Vs Deep Learning(ML vs DL). Let's Start Click Here to read this post:👇

[Machine Learning vs Deep Learning: What’s the Difference?](https://codexashish.com/2021/12/machine-learning-vs-deep-learning-whats.html)


**Thankyou for reading my blogs.**
#####My Website:👇
[CodexAshish](https://codexashish.com/)
Extracting info from Wikipedia in python
Tags: python, programming, beginners, tutorial
Published: 2021-12-31 05:03:27

#Intro 
Hi there, as you read in this post we are going to do some **data extracting** from wikipedia in python. This project is very simple and fun to build and after reading this post please do comment down that what should I build next .

#Modules required
1. `wikipedia` : This module helps us to get data from wikipedia using python.

###Installation
```script
pip install wikipedia
```
#Let's Code
First we will import the required module, so lets do it quickly
```python
# importing the module
import wikipedia
```
Now we will ask the user to enter the subject he wants to search
```python
search = input("What do you want to search ? \n")
```
Now we will use the input to search data from wikipedia
```python
# finding result for the search
''' sentences = 2 refers to numbers of line the number may vary it is according to you '''
result = wikipedia.summary(search, sentences = 2)
```
Now we will finally print the result
```python
# printing the result
print(result)
```
And with that done we have successfully completed another project.
That's it for today stay safe and do take very good care of yourselves and **VERY HAPPY NEW YEAR !**
#And pls do comment what can I make I next post and feel free to ask/suggest something in the comments section.
#Happy Coding !
css overlay: create an overlay with opacity without affecting content inside the overlay
Tags: css, uidesign, overlay
Published: 2021-12-31 04:12:41

## Problem
- Create an overlay with opacity => content inside it also opacity
- Want to ignore opacity on content inside the overlay

## Solution
```html
<div class="wrapper">
  <div class="overlay overlay-black">
    <h2>Hi Jisoo</h2>
  </div>
  <img src="https://image.thanhnien.vn/w2048/Uploaded/2021/wsxrxqeiod/2021_12_24/blackpink-1-6772.jpg" alt="testpic">
</div>
```

```css
.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none;
}

.overlay-black {
  // css for content inside overlay
  background: rgba(0,0,0,0.1);
  color: white !important;
}

.wrapper:hover .overlay-black {
  display: flex;
}
```
Use Signals to Safely Stop processes
Tags: python, linux, systems
Published: 2021-12-31 04:05:29

---
canonical_url: https://www.wilbertom.com/tutorial/use-signals-to-safely-stop-a-process/
---

Here are some times you probably don't want your process to stop:

* When saving data to disk or some other resource.
* When in the middle of some long running job.
* When doing something business critical.

We can add signal handlers that place your process into a state of stopping the
next time it is ready.

```python

import signal  # (1)
import time
import os

should_quit = False  # (2)

def main():
    stop_signal = signal.SIGUSR1  # (3)
    signal.signal(stop_signal, on_signal)  # (4)

    print(f"Starting - process id is: {os.getpid()}")  # (5)
    print(f"Send {stop_signal} to safely stop")  # (6)

    while not should_quit:
        print("Doing work, please do not interrupt this.")
        time.sleep(3)  # (7)
        print("Done with this unit of work")

    print("Stopping")


def on_signal(signum, frame):  # (8)
    global should_quit

    print("Received request to stop...doing so when it is safe.")
    should_quit = True  # (9)


if __name__ == "__main__":
    main()

```

1. The builtin [signal](https://docs.python.org/3/library/signal.html) module in Python. Most programming languages will provide a similar module for using signals.
2. We use a global variable(`should_quit`) to keep track of when the program should stop.
3. We are choosing `SIGUSR1` for this example. There are many different signals,
  some are reserved for special purposes by your OS or programming language.
  `SIGUSR1` is set aside for programmers to define their own custom handler.
4. Here we are saying: when my program receives a `SIGUSR1`, I want you to call the `on_signal` handler.
5. We print the process ID to make it easier to send the signal to the correct process.
6. We print the signal to make it easier to send the correct signal. On my OS, behind the scenes `SIGUSR1` maps to `10`.
7. This line represents some task your program is doing that you do not wish to interrupt.
8. A signal handler is a regular function that takes two parameters `signum` and `frame`.
9. `on_signal` simply sets `should_quit` to `True`, the next time we check against it, the programs stops.


Here is an example run:

```bash
$ python program.py
Starting - process id is: 25716
Send 10 to safely stop
Doing work, please do not interrupt this.
Done with this unit of work
Doing work, please do not interrupt this.
Done with this unit of work
Doing work, please do not interrupt this.
Done with this unit of work
Doing work, please do not interrupt this.
```

We see that our process ID is `25716` and the signal is `10`. So to send our signal
we execute:
```bash
$ kill -10 25716
```

```bash
Received request to stop...doing so when it is safe.
Done with this unit of work
Stopping
```

Our processs receives the signal and calls our handler but the program resumes
its work without interruption. The next time around, it sees that we requested
to stop and does so.
Node Blog
Published: 2021-12-31 03:02:26

 CRUD Operations: CRUD full meaning is Create , Reade ,Update and Delete. In programming you need a database. By using CRUD you can insert, read and update and delete. For store data in database you need to insert data and for update data you 
Need update and using delete you can delete date. For CRUD operation database have method there are 4 types of method 
Method	Description
GET	           Retrieve information about the REST API resource
POST		Create a REST API resource
PUT		Update a REST API resource
DELETE	Delete a REST API resource or related component

JWT : JWT Stand for JSON web token. For firebase authentication JWT tokens are used. JWT tokens are random generated numbers when a user request for data firebase generates JWT and Match user side token and server side token. 

Relational database : Relational database is a database which stores data in a table. Tables consist of rows and columns. Databases receive data as row and table wise. Every table has a primary key and  foring key. Using this primary key, relational databases maintain relations. There are many kinds of Mysql, Oracle, Sql server.
Major difference between sql and nosql database
Relational database management systems use SQL  and Non-relational databases use no-sql.
Sql is vertically Scalable and No-sql is horizontally scalable 
Sql depends on table, column and rows and No-sql depends on object 
Sql is a Query language and No-sql is a non query language 


Aggregation: Aggregation group values from multiple documents together and can perform a variety of operations with the group data. In relational databases hava group function but in nosql it is maintained with aggregation.

Node.js and javascript:
Node.js is a javascript runtime environment that executes javascript code outside of a web browser.Node.js is open source platform. Node.js makes it easy to start building the back-end.Node.js allows us to use JavaScript everywhere. 
Javascript is a programming language. it runs in any web browser.
on the other hand Node.js is a interpreter and environment for javascript
How to checkout a git tag?
Tags: git, tutorial, beginners
Published: 2021-12-31 03:42:18

Git tags are created to mark a release candidate. Because it points directly to a commit in the git history and will not change.

But sometimes we need to checkout a remote tag to our local.

Here is how we can achieve this.

## Fetch git tags

The first thing you need is to fetch the git tag to your local. You can do this by using the git fetch command with --all and --tags arguments.

```
$ git fetch --all --tags
```

## Checkout tag as a branch

The next step is to checkout a specific tag as a branch with git checkout command with the tag name and new branch name.

```
$ git checkout tags/<tag_name> -b <branch_name>
```

Now you can test the code from a tag on your local branch and make updates as well.

Original Post: https://www.novicedev.com/blog/how-checkout-git-tag
Cloud Native Transformation Patterns
Tags: cloudnative, agile
Published: 2021-12-31 03:23:06

I am fan of **Agile Transformation** and **Cloud Native Transformation**. I think that they shape the **Digital Business Transformation & Innovation**.  

I created **Cloud Native Transformation Patterns** project  
[https://github.com/truongnhatbui/t/projects/1?fullscreen=true](https://github.com/truongnhatbui/t/projects/1?fullscreen=true)

You can WATCH, FORK and STAR @github[](url)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5c989nnlys3pw3yy1pbe.PNG)
Mixins are inheritance
Tags: ruby, beginners
Published: 2021-12-31 03:09:14

Inheritance is getting a bad rap and rightfully so in my opinion. Inheritance has turned out to be a specialist tool for specific situations and was unfortunately overused. Long story short, [try composition before inheritance](https://en.m.wikipedia.org/wiki/Composition_over_inheritance).

Now, that said, I have come across developers who understand the above and yet still fall unwittingly into the trap of inheritance over-use. This happens because they think mixins are composition, but mixins are actually [Ruby's answer to multiple inheritance](https://ruby-doc.com/docs/ProgrammingRuby/html/tut_modules.html). Don't believe me?

Here is an example of classic inheritance:
```
class Superclass; def talk; "world"; end; end
class Subclass < Superclass; def talk; "hello #{super}"; end; end
```
Now here is an example usage and a look under the hood.
```
puts Subclass.new.talk
#> hello world
puts Subclass.ancestors.inspect
#> [Subclass, Superclass, Object, PP::ObjectMixin, Kernel, BasicObject]
```
Now, here is the same code using mixins. Note that the method signature is identical.
```
module Superclass; def talk; "world"; end; end
class Subclass; include Superclass; def talk; "hello #{super}"; end
```
And again, a usage and a look under the hood. Note that they are identical to the classic inheritance implementation.
```
puts Subclass.new.talk
#> hello world
puts Subclass.ancestors.inspect
#> [Subclass, Superclass, Object, PP::ObjectMixin, Kernel, BasicObject]
```
To sum up, mixins are going to run into most of the problems you would get with inheritance because they are a type of inheritance.
Data Structure Complete Roadmap 2022
Tags: oop, programming, python, beginners
Published: 2021-12-31 03:07:58

##Data Structure Complete Roadmap 2022
In this blog we are going to discuss complete roadmap for Data Structure in 2022. I will give you only topics and if you like my post then follow my Blogs. Lets Start:-👇

###[Data Structure Complete Roadmap 2022](https://codexashish.com/2021/12/complete-roadmap-of-data-structure.html)


##New & Trending Topics:👇
[Top 10 Trending Technologies to Learn in 2022](https://codexashish.com/2021/12/top-10-trending-technologies-to-learn.html)
[Top 10 Programming Languages You Must Know In 2022](https://codexashish.com/2021/12/top-10-programming-languages-you-must.html)
[Machine Learning Complete Roadmap 2022](https://codexashish.com/2021/12/complete-roadmap-of-machine-learning.html)

##Complete Roadmap 2022:-👇
[Python Complete Roadmap 2022](https://codexashish.com/2021/12/complete-roadmap-of-python-programming.html)
[Machine Learning Complete Roadmap 2022](https://codexashish.com/2021/12/complete-roadmap-of-machine-learning.html)
[C++ Complete Roadmap 2022](https://codexashish.com/2021/12/complete-roadmap-of-c-programming.html)
[Java Complete Roadmap 2022](https://codexashish.com/2021/12/java-complete-roadmap-2022.html)
[Data Structure Complete Roadmap 2022](https://codexashish.com/2021/12/complete-roadmap-of-data-structure.html)


##Some Laravel Tutorial for developer:👇
[Laravel 8 Interview Questions and Answers in 2022 (Part #1)](https://codexashish.com/2021/12/laravel-8-interview-questions-and.html)
[Laravel 8 Interview Questions and Answers in 2022 (Part #2)](https://codexashish.com/2021/12/laravel-8-interview-questions-and_22.html)
[Advance Laravel 8 Interview Questions and Answers 2022](https://codexashish.com/2021/12/advance-laravel-8-interview-questions.html)
[Everything About Laravel 8 Composer 2022 | Composer in Laravel 8](https://codexashish.com/2021/12/everything-about-laravel-8-composer.html)
[Laravel Jetstream vs Laravel ui  vs Breeze](https://codexashish.com/2021/12/laravel-jetstream-vs-laravel-ui-vs.html)

##Python Concept and Projects:-👇
[10 Best Python Libraries For Machine Learning](https://codexashish.com/2021/12/10-best-python-libraries-for-machine.html)
[Alarm Clock in Python with GUI](https://codexashish.com/2021/07/alarm-clock-in-python-with-gui.html)
[Tic Tac Toe Game Using Pygame in Python](https://codexashish.com/2021/06/tic-tac-toe-game-using-pygame-in-python.html)

**Thankyou for reading my blogs.**
#####My Website:👇
[CodexAshish](https://codexashish.com/)