teleren/devto huggingface dataset:
Cherry-Pick Your Teammate's Changes Without Push 'n Pull-ing To Your Repo In PhpStorm
Tags: webdev, git, programming, productivity
Published: 2021-12-01 14:49:57

You asked your teammate for help with a piece of code and they showed you the solution in their editor. Now you need to fetch those changes. Usually, this would mean a series of tedious Git commands for both of you (not to mention that the changes will forever grace your git history), but no longer - GitLive allows you to cherry-pick your teammate's changes straight from their local files without having to push and pull to Git.

In PhpStorm, open up the team window by clicking on the GitLive icon on the bottom tool window bar.

![IMG-1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638207847652/QNQpmfrNo.png)

This will show a list of your teammates, if they are online (or away) and the issue they are currently working on. Click the arrow on the left-hand side of the teammate that helped you to see the repositories they have cloned, locate the one they made the changes to and click the arrow beside that too.


![IMG-2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638364480687/11cumW1Kc.png)


Here, you can see the list of files changed by your teammate on their branch compared to the main branch. Files with asterisks next to the file icon contain changes made locally by your teammate that have not yet been pushed to the remote repository.

Since we are only interested in their local changes, click the filter icon at the bottom of the team window to filter to only the unpushed changes.

![IMG-3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638364487050/6dwGmEl82.png)

Now we can see the single file that contains the solution we want to copy! Clicking on it will open a diff of the changes so we can make sure it contains only the changes we need. Now all we need to do is to right click on the file and select the cherry-pick option to pick the changes. And voilà - no need for any git push- or git pull -ing!

![IMG-4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638365529802/UOI7mi8G8.png)


You can also perform the cherry pick at the level above if you want to pick all changes from multiple files at once by right-clicking on the repository and selecting the cherry-pick option.

![IMG-5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638364497951/VDeR8jV6T.png)

Don't have the GitLive extension installed yet? You can [find GitLive here](https://plugins.jetbrains.com/plugin/11955-gitlive), and if you want to learn more, check out [this blog post](https://blog.git.live/gitlive-8-0-Cherry-picking-your-teammates-changes) or the [GitLive docs](https://docs.git.live/docs/cherrypicking/).
Blog Post #9
Published: 2021-12-01 14:41:56

It has been a while but my learning continues.  I am starting to see how front-end, back-end, and Full Stack Developer all tie in.  Gino has me currently learning a curriculum from Ada-Developers Academy, an app called SoloLearn, and continuing working on my github site. 

The app has helped me in understanding what goes in HTML index file compared to a CSS.index file.  For example, in a HTML.index file, that is where I would structure the content that would appear on a website such as images, texts, and videos. On the CSS side, that would be considered the styling to the site and presentation which would be colors, layout, and fonts.  

I forgot to mention that the book Gino gave me, "A Mind for Numbers" by Barbara Oakley has been great and I am currently on chapter 11.
5 APIs to take your frontend game to the Next Level!!
Tags: javascript, react, reactnative
Published: 2021-12-01 14:08:21

##1. [NASA API](https://api.nasa.gov/)

NASA maintains a fantastic **database** of space-related data that is constantly updated.

This API may be used to construct captivating and informative apps and web pages.


---


##2. [Open Trivia Database](https://opentdb.com/)

Wanting to test your intellect, this is the perfect API for you. 

This API contains various topics, from **gaming** to **general** knowledge. You'll find all kinds of questions.

---


##3. [News](https://newsapi.org/)

With the ongoing increase in Internet usage, most people are abandoning traditional media, such as newspapers, and going online to satisfy their appetite for breaking reports.

**It's time we use this to our advantage and build something amazing.**

---

##4. [Google Maps](https://developers.google.com/maps)

Want to integrate map services in your project and wondering what to do. Don't worry Google has got you covered. *pun intended xD*

Use the google maps API, with its ever-growing feature and huge community you are sorted.

---

##5. [Evil Insult Generator](https://evilinsult.com/generate_insult.php?lang=en&type=json)

How many times have you tried to insult your best friend? You've now been given a helpful hand!

The purpose, as the API name suggests, is to provide some of the most heinous insults.
🛠 Using Next.js and Auth0 with Supabase
Tags: webdev, programming, tutorial
Published: 2021-12-01 14:35:51

#### 📘Learn how to integrate Auth0 authentication with database storage and row-level security authorization in Supabase. 

### <br>

### Overview

In this article, we are going to explore using Next.js, Auth0, and Supabase to build a classic Todo app. Each user will only be able to see their own todos, so we will need to implement authentication, authorization, and a database.

This article will cover:

configuring Auth0, Next.js, and Supabase to work together seamlessly
using the nextjs-auth0 library for authentication
implementing Row Level Security (RLS) and policies for authorization
what a JWT is and how to sign our own
using PostgreSQL Functions to extract values from a JWT
The final version of the Todo app code can be found here.

### Prerequisites

This article does not assume prior experience with any of these technologies. However, you will need Node.js installed to follow along. In addition, plan to have accounts for the managed services in the section below (Auth0 and Supabase). Both are free as of this writing and don't require a credit card.

### Stack

Next.js is a React framework that makes building efficient web apps super easy. It also gives us the ability to write server-side logic — which we will need to ensure our application is secure — without needing to maintain our own server.

Auth0 is an authentication and authorization solution that makes managing users and securing applications a breeze. It is an extremely battle-tested and mature solution for auth.

Supabase is an open-source backend-as-a-service, which makes it possible to build an application in a weekend and scale to millions. It is a convenient wrapper around a collection of open source tools that enable database storage, file storage, authentication, authorization, and real-time subscriptions. While these are all great features, this article will only use database storage and authorization.

"Wait, if Supabase handles auth, why are we using Auth0?"

One of the real strengths of Supabase is the lack of vendor lockin. Maybe you already have users in Auth0, your company has a lot of experience with it, or you're interacting with other applications that use it. Any of the Supabase components can be swapped out for a similar service and hosted anywhere.

So let's do just that!

[Read more...](https://auth0.com/blog/using-nextjs-and-auth0-with-supabase/?utm_source=content_synd&utm_medium=sc&utm_campaign=nextjs)
Flask user authentication with JWT
Tags: python, tutorial, security, webdev
Published: 2021-12-01 14:31:32

This is a video tutorial that explains first what is Json Web Token and how is it different from cookies based sessions.

Then we move on to create a simple Python program using Flask micro framework, which demonstrates user authentication with JWTs.

Here's the video :

{% youtube _3NKBHYcpyg  %} 

Social Media  
----------------------
Twitter : https://twitter.com/BekBrace
Instagram : https://www.instagram.com/bek_brace/
GitHub profile : https://github.com/BekBrace​​​
Website : https://bekbrace.com

Tools used in video:
---------------------------------
Microphone used in recording Blue Yeti
To check it out on Amazon : https://amzn.to/3lh6GdA
Coding on Logitech G PRO Mechanical Gaming Keyboard
To check it out on Amazon : https://amzn.to/3G4gH5T

Support
--------------
Join the Channel : https://www.youtube.com/channel/UC7EVSn5inapL20oPSwAwEUg
OR
☕ Buy Me A Coffee : https://www.buymeacoffee.com/bekbrace
Compile and Run C# programs without visual studio or any other IDE
Tags: csharp, visualstudio, beginners, computerscience
Published: 2021-12-01 14:12:13

In this Article, We are going to explore how to Compile and Run your C# programs without using any IDE.

Even Before thinking of doing it, lets ask ourselves this simple question.

__Q__: _Why? Am I going back to stone age?_
__Ans__: _No, Writing sample codes in any language without IDE and compiling it will help you understand the eco system better._

Lets move on to Implementation part.

### Download and install.

1. Download .NET Framework and install the dev packs.
2. Then add C:\Windows\Microsoft.NET\Framework64\v4.0.30319 (it can be any version you download) to environment path.

Step 2 will make csc (c sharp compiler) executable to be available to access.

### Coding Part

#### 1. Compile and Run Class A

Open Notepad and copy class below and name it as `A.cs`

```cs

// C# program to print Hello World!
using System;


// namespace declaration
namespace HelloWorldApp {

// Class declaration
class A {

	// Main Method
	static void Main(string[] args)
	{

		// printing Hello World!
		Console.WriteLine("Hello World!");
		// To prevents the screen from
		// running and closing quickly
		Console.ReadKey();
	}
  }
}
```

__Steps to compile and run the program__:
1. Open cmd
2. Navigate to path and then run `csc A.cs`
3. Then run command `A`.

#### 2. Compile and Run Class A, which uses Class B

Open notepad and copy below code and name it as A.cs

```cs

using System;

// namespace declaration
namespace HelloWorldApp {

// Class declaration
class A{
	// Main Method
	static void Main(string[] args)
	{
	        // printing Hello World!
		Console.WriteLine("Hello World!");
                var b = new B();
		b.startMusic();
		// To prevents the screen from
		// running and closing quickly
		Console.ReadKey();
	}
   }
}

```

open notepad and copy below code and name it as B.cs
```cs
using System;

// namespace declaration
namespace HelloWorldApp
{
	public class B{
            public void startMusic(){
	           Console.Write("I am in B");
            }	
	}
}

```

If you run the above steps as mentioned before to compile and run, you will see compile time error saying B not found.

it is obvious, because we didn't create any assembly or sln in visual studio or other IDE that usually does most of the heavy lifting.

So, we need to create dll for B and refer that dll while compiling A.(So that A knows there exists a library which goes by name B)

__New Steps to compile and run__:
1. Create a dll for B using `csc /target:library B.cs`(It generates B.dll file)
2. Now compile A using `csc /r:B.dll A.cs`(It generates A.exe file)
3. Run exe using `A`
Sync latest template repo
Tags: actionshackathon21
Published: 2021-12-01 14:11:10

### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)

I create cheatsheets app based on github, everyone can use this [cheatsheets](https://github.com/ohmycheatsheet/cheatsheets) as template to create own cheatsheet app. But I want every user repo code update to date. So, I create github action to fetch latest changes from original repo, then create a pr.


### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)

Must-Haves

### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github https://github.com/ohmycheatsheet/actions-updater %}

```yaml
name: "updater"

on:
  schedule:
    - cron: "0 23 * * *"

jobs:
  cronjob:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: ohmycheatsheet/actions-updater@v1
      with:
        repo: ohmycheatsheet/cheatsheets
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```



### Additional Resources / Info

there is a example repo

{% github https://github.com/JiangWeixian/cheatsheets %}

![screenshot](https://user-images.githubusercontent.com/6839576/140630037-09abd412-b19a-4893-bded-a3022949dafc.png)
How to convert CSV to ASCII table (beautiful plain-text table in code)
Tags: tooling
Published: 2021-12-01 13:58:03


Highly recommended a online tools: **[Convert CSV to ASCII Table][1]**

It is my favorite conversion tool designed for table format, and it can convert csv into different friendly plain text tables:

1, ASCII table (mysql style)
```
+─────────────+─────────+───────────────────+
| 2012-05-02  | palani  | My first comment  |
+─────────────+─────────+───────────────────+
| 2012-05-02  | raja    | My second comment |
+─────────────+─────────+───────────────────+
| 2012-05-02  | palani  | My third comment  |
+─────────────+─────────+───────────────────+
| 2012-05-03  | raja    | My fourth comment |
+─────────────+─────────+───────────────────+
```
2, reStructuredText Grid table
```
+-------------+---------+-------------------+
| 2012-05-02  | palani  | My first comment  |
+=============+=========+===================+
| 2012-05-02  | raja    | My second comment |
+-------------+---------+-------------------+
| 2012-05-02  | palani  | My third comment  |
+-------------+---------+-------------------+
| 2012-05-03  | raja    | My fourth comment |
+-------------+---------+-------------------+
```
3, Unicode table (single line)
```
┌─────────────┬─────────┬───────────────────┐
| 2012-05-02  | palani  | My first comment  |
├─────────────┼─────────┼───────────────────┤
| 2012-05-02  | raja    | My second comment |
| 2012-05-02  | palani  | My third comment  |
| 2012-05-03  | raja    | My fourth comment |
└─────────────┴─────────┴───────────────────┘
```
4, Unicode table
```
╔═════════════╦═════════╦═══════════════════╗
║ 2012-05-02  ║ palani  ║ My first comment  ║
╠═════════════╬═════════╬═══════════════════╣
║ 2012-05-02  ║ raja    ║ My second comment ║
║ 2012-05-02  ║ palani  ║ My third comment  ║
║ 2012-05-03  ║ raja    ║ My fourth comment ║
╚═════════════╩═════════╩═══════════════════╝
```

And some other formats of plain text ASCII Table. You can also type "Force separate lines" to decide whether to express the title clearly!


  [1]: https://tableconvert.com/csv-to-ascii



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8una3ty8ur2a9n2avzi.png)
How to create whatsapp bot using javascript ?
Tags: bot, whatsappbot, automation, javascript
Published: 2021-12-01 13:39:07

To build a whatsapp bot we will be using **[whatsapp-web.js](whatsapp-web.js/)** 

**Step 1) Create a project**
Run following commands
``` js
$ npm i whatsapp-web.js
```
You will also require to install **qrcode-terminal** for generating QR Code. Install it using
```js
$ npm i qrcode-terminal
```
**Step 2) Create index.js**

Add following code
```js
const qrcode = require('qrcode-terminal');

const { Client } = require('whatsapp-web.js');
const client = new Client();

client.on('qr', qr => {
    qrcode.generate(qr, {small: true});
});

client.on('ready', () => {
    console.log('Client is ready!');
});

client.initialize();
```

First it will Display QR code,
you can scan in your whats app -> Linked devices and add new device

After Sucessfully Scan you should get message
"Client is ready!"

**Step 3) Listen to Messages**
```js
client.on('message', message => {
	console.log(message.body);
});
```

Inside on message call back you will get message object and listen to specific message like this

```js
client.on('message', message => {
	if(message.body === '!ping') {
		message.reply('pong');
	}
});
```

**Step 4) Saving session**
One proble you will face is ,you have to scan QR Code every time.

So for that you can store your session in .json file and when it will start app ,first it will check that is already authenticated or not, and if its authenticated
 then continue using previous session.

So first we have to import 'fs' for creating a .json file

```js
const fs = require('fs');
const { Client } = require('whatsapp-web.js');

// Path where the session data will be stored
const SESSION_FILE_PATH = './session.json';

// Load the session data if it has been previously saved
let sessionData;
if(fs.existsSync(SESSION_FILE_PATH)) {
    sessionData = require(SESSION_FILE_PATH);
}

// Use the saved values
const client = new Client({
    session: sessionData
});

// Save session values to the file upon successful auth
client.on('authenticated', (session) => {
    sessionData = session;
    fs.writeFile(SESSION_FILE_PATH, JSON.stringify(session), (err) => {
        if (err) {
            console.error(err);
        }
    });
});
```

**Step 6) Downloading Media**
```js
client.on('message', async msg => {
    if(msg.hasMedia) {
        const media = await msg.downloadMedia();
        // do something with the media data here
    }
});
```

**Step 7) Sending Media**
```js
const { MessageMedia } = require('whatsapp-web.js');

const media = new MessageMedia('image/png', base64Image);
chat.sendMessage(media);
```

I have created my own bot using this package 
[Click here](https://www.youtube.com/watch?v=HpDfT-s5Jms) to see my bot
Placeholder title
Tags: python, beginners
Published: 2021-12-01 13:36:54

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)


### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)


### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on December 8th, 2021 (11:59 PM PT or 2 AM ET/6 AM UTC on December 9th).
🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way].
Tags: javascript, webdev, beginners, programming
Published: 2021-12-01 13:21:03


## Halo Guys 👋

In this tutorial we will show you how to add scroll the page to the top smoothly using pure javascript. 

> Scroll to top buttons allow users to quickly return to the top of a webpage with a single click. This can be very useful when the page has a lot of content.

![Image start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w44nolmkdul3vf103na0.gif)

+ Let’s start by creating a **`scrollToTop()`** function that will contain all the required JavaScript:

```js
function scrollToTop(){
// all JavaScript will go here
};
```
+ Next inside the **`scrollToTop()`** function pass the window.scrollTo() method with two parameters coordinate and behaviour:

```js
function scrollToTop() {
window.scrollTo({
    top: 0,
    behavior: 'smooth'
})
}
```
+ Next best part is smooth scrolling could be done easily using **`behavior:'smooth'`**.

Thats all, this is how to smoothly scroll page to top using javascript. You can customize this code further as per your requirement.

### Keep Claim And Just Code It 😎
Trees and Graphs in data structures
Tags: data, tutorial, programming, beginners
Published: 2021-12-01 13:11:28

Programmers are often interested in the Tree vs Graph comparison. To begin with, know that trees and graphs both are non-linear, non-primitive types of data structure.

Both use nodes to represent many structures that are used to solve real-world problems albeit differently. The tree uses the hierarchical model to represent its structure, whereas a graph uses the network model to represent its structure.

![Tree vs Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mknnmy1sjd3dgfkcmgzn.png) 

There are two types of non-linear data structure:

1. Tree
2. Graph

## Tree

A tree is a progressive model information design and it is an assortment of a limited number of information components. Here information components are hubs. In the tree information structure, the fundamental hub is the root hub, the highest hub of the construction, and the wide range of various hubs are its kids, grandkids, etc hubs. 

There are many kinds of tree information structures. How components are put away in the tree information structure relies on the particular kind of equivalent.

**Tree Properties**

- Root Node
- Edge
- Parent Node
- Child Node
- Leaf Node
- Subtree
- Level

## Graph

A graph is likewise a non-straight information structure. It is an assortment of two sets; vertices and edges, where vertices are the hubs and edges are the arrangements of components that interface the two vertices. 

The graph information structure follows an organization model to address its construction and the organization model can frame a shut circle. There are many sorts of graphs and how the vertices are associated with edges relies on the particular kind of graphs.

**Properties of a Graph**

- Edges
- Vertices
- Cycle

[Difference between tree and graph](https://www.techgeekbuzz.com/tree-vs-graph/):

![tree vs graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/siilozu9jhwgt9ui0y4u.png)
![tree vs graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0jsqim9e5mj2p4jhk9z.png)
![tree vs graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9i2o8e12eqh1hwg5q76j.png)
   

## Conclusion

That is the finish of the Tree vs Graph discussion; Also the distinction between tree and graph. To summarize, although the two trees and graphs are non-direct kinds of information structures, the tree information structure follows a legitimate construction while there is no particular design followed by a graph.