teleren/devto huggingface dataset:
OAuth2 in NestJS for Social Login with GitHub (and Google, Facebook, …)
Tags: oauth2, webdev, node, nestjs
Published: 2022-02-10 05:40:18

[This sample NestJS app](https://github.com/m-haecker/nestjs-social-login) is one of the kind you get with `nest new`, but with the addition of [Passport](https://www.passportjs.org/) to

-   authenticate a user by identity token issued from GitHub as an Identity Provider,
-   manage authenticated state (by issuing a JSON Web Token, JWT),
-   attach information about the authenticated user to the `Request` object for further use in route handlers.

It is easy to add another [strategy](https://www.passportjs.org/packages/) or replace GitHub with Google or Facebook for instance.

The code has many comments that make everything very clear and understandable.

### Run

First you have to [register](https://github.com/settings/applications/new) a new OAuth application in GitHub:

![GitHub Screenshot](https://raw.githubusercontent.com/m-haecker/nestjs-social-login/main/_resources/2022-02-07-14-09-29.png)

Then copy file `.env.sample` and name it `.env`. Open `.env` and fill the values of `GITHUB_OAUTH_CLIENT_ID` and `GITHUB_OAUTH_CLIENT_SECRET` according to the application just created in GitHub. Also set an arbitrary value for `JWT_SECRET`.

Then you can start the app with

```sh
$ npm run dev
```

In your browser, open [http://localhost:5000](http://localhost:5000) or [http://localhost:5000/profile](http://localhost:5000/profile). You will get HTTP status 401 "Unauthorized" because these are protected routes that are accessible only to requests that contain a valid JWT.

So open [http://localhost:5000/auth/github](http://localhost:5000/auth/github). This route allows users to authenticate via GitHub, returning a JWT for use in subsequent calls to protected API endpoints. The JWT is included in the response body and as a cookie named **jwt**. Because of the cookie, you are now able to visit [http://localhost:5000](http://localhost:5000) and [http://localhost:5000/profile](http://localhost:5000/profile).

Protection is realized by annotating the routes with `@UseGuards(JwtAuthGuard)`: When such a route is hit, the Guard will automatically invoke our passport-jwt custom configured logic, validating the JWT, and assigning the `user` property to the `Request` object. Clients can send the JWT either

-   as a bearer token in an authorization header (`"Authorization: Bearer eyJhbGciO…"`) or
-   in a cookie (name "jwt", its value is the token).
5 things that will give you a healthy sleep
Tags: selfimprovement, workhealth
Published: 2022-02-10 05:27:39

---
title: 5 things that will give you a healthy sleep
published: true
description: SlEEP OF HAPPINESS
tags: selfImprovement, workHealth
//cover_image: https://direct_url_to_image.jpg
---

> 1.Stop using your phone at least 2 hours before you go to bed
> 2.Reading is a real sleeping pill
> 3.Exercising 2 hours before bed can help you fall asleep easier >>and sleep more deeply
> 4.Oversleeping is not a good thing. But it might even be a bad thing
> 5.Meditation for 5 minutes a day can help you sleep deeper and focus on work longer
AWS Static website using CI/CD Pipeline and S3 bucket
Tags: aws, cloud, webhosting, devops
Published: 2022-02-10 05:09:19

## 1. Make a repo in github with simple HTML page/s.
([sample repo](https://github.com/kakashi96/aws-test))

## 2. Open AWS management console and search for S3 bucket. Open S3 console.

## 3. Create a simple bucket

- Click on create bucket
- Give a unique name to the bucket and choose a region.
- Under _Object Ownership_ click on _ACLs enabled_.
- Unselect Block _all public access_ and select _I acknowledge that the current settings might result in this bucket and the objects within becoming public_.
- Finally click _create bucket_.

## 4. Once the bucket is created on the S3 console, copy it’s ARN and paste it in the notepad.

## 5. Then open the bucket and go to properties tab

- Scroll down to bottom and find “_Static website hosting_” and click EDIT.
- Click Enabled.
- Under _Index _Document enter the name of the HTMl file that you have in your github repo.
**     For ex:- index.html, app.html**

- Click Save _Changes_.

## 6. Now under the Permission tab click Edit under Bucket Policy.

## 7. Click on _Policy Generator_.

- Under Select _Type of Policy_ choose _S3 Bucket Policy_.
- For Principal enter * .
- Under _Actions _select _GetObject_.
- Under _ARN _paste the ARN that you copied in “Step 4”
- Click _Add Statement_ and then click _Generate policy_.
- Copy the generated policy and paste it into the notepad.
- Close the _AWS Policy Generator_ tab.

## 8. Paste the policy under the _Edit Bucket Policy_ tab.

1. In the field Resource edit it to look like the following.
2. 

```
{
…
“Resource”: “arn:aws:S3:::BUCKET-NAME/*”
…
}

```

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

3. Click _Save Changes_.

## 9. Now search for _CodePipeline _and open it’s console.

## 10. Click on _Create Pipeline_

1. Give the pipeline a name then click on _Next_.
2. Under Service Provider choose _Github Version 2_.

- Click on _Connect to GitHub_.
- Give a _Connection Name_.
- Click on _Install new app_.
- Select _Install_.
- Click on _Connect_.
- Select appropriate _Repo name and Branch name_.
3. Click _Next _and click _Skip Build Stage_.
4. In the _Deploy Provider_ select _S3 _and check the _Extract file before deploy box_.
5.  Click Next and click _Create Pipeline_.

{% youtube rYkOAWVTsto %}
Using React useRef Hook to access immediate past props or state.
Tags: javascript, react, hooks, useref
Published: 2022-02-10 05:05:51

originally posted on my personal blog [walecloud.me](https://walecloud.me/access-previous-state/)
## Using React useRef Hook to access immediate past props or state

Do you want to know what the previous state of a value is before it got updated in React?
You can easily leverage useRef to track the previous value of state or props in React.

Recently, while working on a project built with React and Firebase, we had a use-case for knowing what the previous state of a value was. This need came to be when a state item needed to be reset if an ID from firebase changes.

The useRef hook in react is ideal for things like this, you probably thought its sole purpose is for DOM manipulation but it can be more and almost anything you want it to be.

TL;DR

`// usePrevious hook` [React official documentation](https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state)

```js
import { useEffect, useRef } from 'react';

export const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
};
```

`// use returned value like so;`

```js
  const prevModuleId = usePrevious(moduleId);
```

Hopefully Reacts make the `usePrevious` into an official hook soon as it seems like a no-brainer.

### How does the usePrevious hook works?

Short answer:

- `useRef`: A container that is useful to keep a mutable (changeable) value in its `.current` property
- `useEffect`: Allows for monitoring changes and performing side effects in functional components.

You can read more about both hooks on the [React official site](https://reactjs.com)

First, we create an instance of `Ref` whenever the hook is called.
The `useEffect` only runs when the `value` parameter changes and then assign that to the ref's `.current` property
Finally, we return the `ref.current`.

The first time the hook is called, ref.current will be `undefined` until a state or props value changes until then before the useEffect hook is executed to reflect the latest previous value of the parameter.

---------------

Find this helpful? Kindly share so others can too.
cheers 🥂
Build a Video Conference App from Scratch using WebRTC,Websocket,PHP +JS Day 34
Tags: webrtc, webdev, javascript, tutorial
Published: 2022-02-10 05:02:09

#What is RTCPeerConnection?
RTCPeerConnection is an API for making WebRTC calls to stream video and audio, and exchange data.

In this video we'll cover how to get started with peer connection

{% youtube OA_WS35NbFE %}
Progressive Web App Calculator - Hex Calculator 
Tags: javascript, pwa, webdev, ux
Published: 2022-02-10 04:59:58

## Test it live 
<u>[Hex Calculator](https://hex-calculator.app/)
</u> 

![2 iPhones showing a calculator ui](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2cpry1zer08b9gitg8w.png)

A Progressive web app that has features to convert between Hexagonal, Octagonal, Decimal and Binary numbers, as well as adding, substracting, multiplying and dividing them. I call it the Hex Caculator.

Features

- Can be installed and works completely offline

- Convert between the following base numbers: base 16 (Hexahonal), base 10 (Decimal), base 8 (Octagonal) and base 2 (Binary)

- Adding, substracting, multiplying and dividing using the different base numbers.

- Dark and light mode toggable via a button.

## Progressive Web App compliant

Can be installed to work completely offline as a native app

![Install feature on google chrome for android](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwn0lymhns32aq9w99ri.jpeg)

## Using different base numbers

When changing between the base number options the UI responds accordingly, turning on or off the available buttons for that base number type.

![A gif showing the calculator changing between different base numbers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa1xdxvkcfcxzsbxp1pt.gif)

## Switching between the Dark and Light mode

The app has to UI themes, a Dark and a Light one, to switch between them you use the bottom left corner button.

![A gif showing how dark and light mode for the calculator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myc8c9kodukb6qdxvgh4.gif)

## Calculator functions

The app has basic adding, substracting, multiplying and dividing functions that you can use with the different base number types.

![A gif showing the calculator performing operations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uwen7zr6bxy5e6wzi85.gif)

The code for it is on my [github](https://github.com/Alwurts/Hex-Calculator ), I'm always looking for ways to improve it, some let me know what you think of it. 

Also do visit [my website](https://www.alejandrowurts.com/ ) for more information and other projects.
Self-Taught Developer Journal, Day 57: TOP Building Rock Paper Scissors UI cont.
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-02-10 04:59:35

A short post today. I started updating the arrangement of my HTML elements. I mainly added more classes, nesting them, and then using flexbox to place the elements in the desired spots.

![Output Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lj7pt2nj76sh0qu1jggq.png)

I'm still working on centering the player and computer choices. After, I will try and find some images for the buttons to use. 

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
[Revisiting Rock Paper Scissors](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/revisiting-rock-paper-scissors)
How to Remove Background Process On Startup Linux
Tags: linux
Published: 2022-02-10 04:45:15

If you want to remove evolution-data-server, it will remove these at least (tested in 16.04)
```
The following packages will be REMOVED:
  evolution-data-server gdm3 gnome-contacts gnome-shell libfolks-eds25
0 upgraded, 0 newly installed, 5 to remove and 378 not upgraded.
After this operation, 15.8 MB disk space will be freed.
```

So, the better treatment is a bit nasty, but it works!

Nasty Hack!
Rename Evolution binary folder, so that it won't be found! What works for me is these

```
sudo mv /usr/lib/evolution-data-server /usr/lib/evolution-data-server-disabled
sudo mv /usr/lib/evolution /usr/lib/evolution-disabled
```
That's it! Now, I can at least use the system.

Notes: If you disable evolution this way, you won't be able to use calender syncs or other fancy (useless for me) stuff.

Less dirty hack
Looks like more and more people are unsatisfied with evolution lately. But in my current setup, I don't rename the folder. Instead I just remove the executable bit and it works.

For disabling calendar process, I used
```
sudo chmod -x /usr/lib/evolution/evolution-calendar-factory
```
The good thing with this method is other evolution service can still work (they start and runs)

Repeat the same process for evolution-source-registry and evolution-addressbook-factory if you want to shut them up too!
How to Integrate Jenkins with Git?
Tags: aws, devops, awscloud
Published: 2022-02-10 04:29:44

In this project, we will configure a Jenkins build pipeline to build, compile, and package a small java project. The Jenkins pipeline is designed in such a way that whenever a change is pushed from the local repository to the Git repository, Jenkins will detect the change and will automatically start to build the project.

**1. Create a sample java program and push it to your Git repository**
- Firstly, as prerequisites setup git in your local machine and create a GitHub repository.
- Now, you can create any sample program. I have created a sample java program that prints "Jenkins integration with Git".
- Now, push your code to the remote Git repository.

**2. Start your Jenkins Server and install Git**

- Install and setup Jenkins server on Amazon Ec2 instance or your local machine. 
[Refer my previous video – Installation of Jenkins]

- Next, connect through SSH to your previously created Jenkins instance and **start your Jenkins server**

```
sudo service jenkins start
```

- Run the following commands to **install git.**

```
sudo yum install git -y
git version
```

- Access the Jenkins server using the public DNS of the EC2 instance or public IP of the instance on port **8080**.
http://{ec2-public-dns}:8080 or http://{public IP}:8080/

- Login to Jenkins console using your credentials.

**3. Add Git plugins in Jenkins**

Now, we will install the required **plugins** for our project.

1. In your Jenkins console, go via the **Jenkins GUI -> Manage Jenkins -> Manage Plugins.** 
2. Select the tab “**Available**” and select all the **Git plugins** and then click on **Install without Restart**. Mine are already installed.
3. This step is the most important one as it will allow us to access the code from our git repository. Installation of plugins might take a few minutes.

**4. Create a Jenkins Job**
Let’s now create our pipeline for this project. After the installation of plugins, return to the Dashboard. 

1. **Via Jenkins -> New Item** you’ll get to a page that will let you specify which kind of job you want to create. 
2. For now, start by creating a **Freestyle Project**, give a project name, and hit OK.

**5. Configure Jenkins job to trigger the pipeline, after each change/commit is pushed to your Git repository**

1. To configure the pipeline, select the **GitHub Project** option and add your GitHub repository URL. 
2. In **Source Code Management** select Git and add your Git repository URL.
3. This will allow Jenkins to access the source code from the git repository.

For more reference

{% youtube -hq1CW0P5OY %}
Chrome Extension: Taking Notes On The Web
Tags: vue, typescript, javascript, opensource
Published: 2022-02-10 04:06:36

## [context-note](https://github.com/betterRunner/context-note)
<span><strong><i class="fa fa-star">Star 424</i> <i class="fa fa-eye">Watch 8</i> <i class="fa fa-code-fork">Fork 36</i></strong></span>

<p align="center">
  <a href="https://chrome.google.com/webstore/detail/context-note/enmeffcefbiehghanidhebgiccljmncl?hl=zh-CN" target="_blank">
    <img width="300" src="https://user-images.githubusercontent.com/7123136/132152458-37a8ec1d-dfb2-4957-8451-44cf01312820.png">
  </a>
  <br>
</p>

<p align="center">A 📝<b>note-taking chrome extension</b>: taking notes on the web with their context.
</p>
<p align="center">Built by <a href="https://v3.vuejs.org/" target="_blank">Vue3</a>.</p>

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

## Features

- 📝 Notebook, reviewing notes on a book, while jumping back to the context for details.
- 🏷️ Tagbook, manage the notes neatly with a handy tag system.
- ⌨️ Rich text editor: embed [quill](https://quilljs.com/) as the rich text editor.

You can read more from [here](https://medium.com/@neochan_66076/take-your-notes-on-the-web-with-their-context-77e8b9aaf1be).

## Develop

```bash
# 1. install dependencies
yarn

# 2.1 build extension in dev mode
yarn dev

# 2.2 build extension in prod mode
yarn build

# 3. load the built dist folder in `chrome extension management` following https://support.google.com/chrome_webstore/answer/2664769?hl=en
```

## Licence

Context is open source software licensed as MIT.
Consistency
Tags: productivity, discuss
Published: 2022-02-10 04:05:44

Do you ever get that thought that pops in your head like, **"I should really start doing / should do [action]..."?**

That's definitely normal so don't worry. Well I like to believe it since *I definitely* get that thought!

The point of this article for me: simply to post. 

I haven't done that in a long time after I was fairly consistent to start. When I *started* I was really focused on landing my first dev job while attending college and a code bootcamp (long story for another time) right about a year and a half ago.

So here I am. Posting something. I promise it'll be better next time but to at least put a lil something out there.

### What tool, system, approach, reward, punishment or combination do you use to maintain consistency?

As a note that consistency is very subjective and could pertain to whatever you want - as long as you do it habitually.
Handle multiple environments in ReactJs [dev, stag, prod]
Tags: react, tutorial, codenewbie, javascript
Published: 2022-02-10 03:50:11

> Create React App provides out of the box support for the `environment` variables. Just create a `.env` file and you are ready to go.

### Why we need multiple environments.
 
> When you are doing development in multiple stages you are definitely going to have different different domain names.

For ex. *In your local you are using `localhost:100/api/getuser` and when you deploy it to prod or stag you may need it to be something `domain.com/api/getuser`.*

So handle this scenarios you can create separate environment file for each environment. 

⚠ *This is one of the usage cases, you may have more reasons to do so.*

#### Scenario:
I was facing the same problem as above that we have different different endpoints and credentials(`"not really"`) for staging and production.

To handle this scenario we used separate `.env` file for the particular environment.

### How to Handle it:
#### 🟢 While using [create React App]().
If you Don't know how to add environment file to React please read below post.
>[How to use `.env` file in react js](https://dev.to/rajeshroyal/adding-a-env-file-to-reactjs-project-2h31)

1. Install [`env-cmd`](https://www.npmjs.com/package/env-cmd) package from NPM .
2. Create 3 `.env` files in your root directory. *[dev.env, stag.env, .env]*
3. Add you environment variables to your files.
4. Update your package.json scripts as below.

`package.json`
```json
"scripts": {
    "start": "react-scripts start", // will use .env default
    "build": "react-scripts build",
    "postinstall": "husky install",
    "start:dev": "env-cmd -f dev.env npm start", // use dev.env file
    "build:beta": "env-cmd -f stag.env npm run build", // use stag.env
  },
```

Now we have three environments for our React app. 
- To run app in dev environment use `start:dev` cmd.
- To build and run app in beta use `build:stag` cmd.
- To build in production and run use `build` cmd.

To use these variables write - `process.env.REACT_APP_MYVARNAME` and It will return the value of current environment variable. 

You can add custom variables to your `env` files to find out in which environment your app is running.

##### Usage example: 
```javascript
/**
   * @REMOVE_CONSOLES
   * // remove the working of console logs
   * // remove any accidental use of console logs
   */
  useEffect(() => {
    if (process.env.NODE_ENV === "production" || 
process.env.REACT_APP_ENV === "STAGING") {
      GlobalDebug(false, false);
    }
    // I know this is a useless comparison 🤣
    if (process.env.REACT_APP_ENV === "DEVELOPMENT" && 
process.env.REACT_APP_ENV !== "STAGING" && 
process.env.REACT_APP_ENV !== "PRODUCTION") {
      doSomethingNesty();
    }

    getDeviceId().then((uDeviceId) => {
      dispatch(setUserDeviceId(uDeviceId));
    });
  }, [dispatch]);
``` 

References - 
- React [env-cmd](https://www.npmjs.com/package/env-cmd)
- create React APP [CRA](https://create-react-app.dev/)

> *comments and improvements are welcome 😀*

see you in next post TADA 👋
Watch naagin 6 Today Live Full Episode,
Tags: naaginlive, naagin6onlin
Published: 2022-02-10 03:40:04

naagin 6 Today Episode

Watch naagin 6 Today Live Full Episode, naagin 6 Latest Full Episode Streaming on Mx Player,<a href="https://naaginlive.com/">naagin 6 Today Episode</a>
Programmatically Add Labels to Your Issues
Tags: github, devops, tutorial, automation
Published: 2022-02-10 03:24:11

For the past week, I’ve been working on building a Probot app that automates inviting users to my GitHub organization. If you read my past blog post, you will learn that I decided to implement a form of triaging by opening an issue for potential members if they star the repository. That was successful, but I realized that other people may open issues in my repository for various reasons – not just to join my organization. I don’t want to weed through multiple issues to figure out if they are requests or not. I prefer to filter for the ones that are requests. An easy way to do that is by adding a label to the issues that include requests to join my organization.

To programmatically add a label to my issues, I added a `labels` property. The `labels` property accepts an array of strings representing label names. I used the label ‘pending-invitation’.


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


Now, I can filter the issues by the pending-invitation label. 


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


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

_Tomorrow, I plan to approve pending issues and them to the organization. Stay tuned, and follow [GitHub](dev.to/github) and [me](dev.to/blackgirlbytes) on DEV for more content._