teleren/devto huggingface dataset:
How To Implement OAuth2 Social Login(Single Sign-On)Using Facebook & Spring Boot — Part 2
Tags: webdev, javascript, programming, opensource
Published: 2021-11-27 16:29:18


## OAuth2 Facebook

Hello, Its **Rohan Kadam**

Hello All, Hope you are doing well. Today we are going to understand how we can implement OAuth2 Social Login Using Facebook and [Spring Boot](https://medium.com/javarevisited/top-10-courses-to-learn-spring-boot-in-2020-best-of-lot-6ffce88a1b6e?source=---------39------------------). Let us start coding.

![**Social Login Using Facebook and Spring Boot**](https://cdn-images-1.medium.com/max/6000/1*f5N7ntA9r7r6BStch93tww.jpeg)

Before going forward implementing Part 2. I request to go into taking a look in Part 1 — **How To Implement OAuth2 Social Login Using Facebook**
[**How To Implement OAuth2 Social Login Using Facebook — Part 1**](https://medium.com/@rohankadam965/how-to-implement-oauth2-social-login-using-facebook-part-1-e7995f30774e)

### **Step 1: **Create a Spring Boot Project using Spring initializer.
[**Spring Initializr**](https://start.spring.io/)

### **Step 2: **Add the following dependencies in your project pom.xml

    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-oauth2-client</artifactId>
    </dependency>

### **Step 3: **Create a Configuration File for implementing [OAuth2.](https://medium.com/javarevisited/top-10-courses-to-learn-spring-security-and-oauth2-with-spring-boot-for-java-developers-8f0222d6066d?source=---------5-----------------------)
{% gist https://gist.github.com/Rohan2596/b4252f70f0c76151ba8c049123a90739.js %}
### **Step 4:-** Create Application Yml which will consist of Facebook Configuration.
{% gist https://gist.github.com/Rohan2596/e597657ce9303cfd912508c26a46f598.js %}
### **Step 5:-** Create a [Rest Controller](https://javarevisited.blogspot.com/2017/08/difference-between-restcontroller-and-controller-annotations-spring-mvc-rest.html#axzz6grO2U4Lp) which consists of two endpoints.
{% gist https://gist.github.com/Rohan2596/8ff9a4a89f3a3fcbcca719c9515c267f.js %}
### **Note:-**

 1. Principal Object contains username, email, and profile image depending on scope.

 2. If an **error** occurs regarding an incorrect **redirect Url** add the following URL [**https://localhost:8080/oauth2/callback/facebook](https://localhost:8080/oauth2/callback/google)**

**Test Endpoints for localhost:-**

### [**http://localhost:8080/oauth2/authorize/facebook?redirect_uri=http://localhost:8080/oauth2/callback/facebook](http://localhost:8080/oauth2/authorize/google?redirect_uri=http://localhost:8080/oauth2/redirect)**

![Thank You, Viewers](https://cdn-images-1.medium.com/max/2800/1*f9TMjifJVReTlh93qJ845Q.png)
Navbar scroll animation based on scroll direction(toggle navbar when user scroll up or down)
Tags: javascript, html, saas, css
Published: 2021-11-27 16:28:35

In this article, I will show you, how you can create navbar which shows when you scroll up.

Live demo link:- https://sumukha210.github.io/Toggle-navbar/
Github Repo link:- https://github.com/Sumukha210/Toggle-navbar

First you need to create 3 pages,

`touch index.html style.scss app.js`

###### index.html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Toggle navbar</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <nav class="nav">
      <div class="nav__container">
        <div class="nav__logo">Navbar</div>
        <ul class="nav__menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Blogs</a></li>
          <li><a href="#">Contact us</a></li>
        </ul>
      </div>
    </nav>

    <section>lorem3000 (and then press enter) </section>

    <script src="./app.js"></script>
  </body>
</html>

```

##### style.scss
```sass
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav {
  background-color: rgb(9, 190, 190);
  box-shadow: 0px 0px 5px silver;
  padding: 10px 0px;
  position: fixed;
  width: 100vw;
  top: -10%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease-in;

  &.active__menu {
    top: 0%;
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
  }

  &__container {
    width: 90%;
    margin: auto;
    @extend .flex;
  }

  &__logo {
    font-size: 2rem;
    font-weight: bold;
  }

  &__menu {
    @extend .flex;
    list-style: none;

    li {
      a {
        color: black;
        text-decoration: none;
        margin-right: 10px;
        font-weight: 600;
      }
    }
  }
}

section {
  width: 90%;
  margin: 8rem auto 2rem auto;
}

```

##### app.js
```javascript
// Grab nav element from the dom
const nav = document.querySelector("nav");

// Creating variales
let scroll_position = 30;
let scroll_direction;

// Show Navbar when dom loads
nav.classList.add("active__menu");

// Create an scroll event listener
window.addEventListener("scroll", () => {
  scroll_direction =
    document.body.getBoundingClientRect().top > scroll_position ? "up" : "down";
  scroll_position = document.body.getBoundingClientRect().top;

  if (scroll_direction === "up") {
    // If you are scrolling up, then add active menu class
    nav.classList.add("active__menu");
  } else {
    // If you Scrolling down, remove the active menu class
    nav.classList.remove("active__menu");
  }
});

//Create Variables outside the scroll event listener
```
Learn how to create a full-stack To-Do app with Flask&Vue.js 📋
Tags: tutorial, beginners, programming, python
Published: 2021-11-27 16:27:49

##I did create a full-stack to-do-app.
###What you will learn from this app.

- How to create your first simple full-stack app.
- How to test your API with a flask package like a unit-test. 
- How to create a database table using SQLAlchem library
- How to handle routs using HTTP methods [Get, Post, Put, Delete].
- How to build a simple form using BootstrapVue.
- How to send requests to the backend server using Axios and store them in the table. 

[Project link](https://bit.ly/3lgMicv)
Starting GUI with a Swing..
Published: 2021-11-27 16:09:09

Java is a powerful programming language that is right at home in standalone desktop applications and complex enterprise-level web applications. It is a popular programming language for computer science students because it incorporates just about every key concept of modern object-oriented programming yet remains relatively easy to learn.

The Swing toolkit offers developers a platform-independent, customizable, configurable, and lightweight solution that can easily be incorporated into practically any Java program. The toolkit offers basic components like buttons and labels as well as advanced features including trees and tables. The entire toolkit is written in Java and is part of the Java Foundation Classes (JFC). The JFC is a collection of packages designed to create fully featured desktop applications. Other components of the JFC include AWT, Accessibility, Java 2-D, and Drag and Drop.
OOP
Tags: oop, javascript
Published: 2021-11-27 16:07:37

Object-oriented programming (OOP) is nothing but that which allows the writing of programs with the help of certain classes and real-time objects. It is a programming paradigm that relies on the concept of classes and objects. It is used to structure a software program into simple, reusable pieces of code blueprints (usually called classes), which are used to create individual instances of objects.
• OOP models complex things as reproducible, simple structures.
• Reusable, OOP objects can be used across programs.
• Allows for class-specific behavior through polymorphism.
• Easier to debug, classes often contain all applicable information to them.
• Secure, protects information through encapsulation.

   There are certain features or mechanisms which makes a JavaScript Object-Oriented like: 
**Classes:** A code template for creating objects.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g432oo3honz58jtho9py.PNG)
**Object:** Objects are variables which can contain many values.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1mx5kxgunlgt4vsshb2.PNG)
**Encapsulation:** The process of wrapping property and function within a single unit.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyqk47a0lqx9kdzd037a.PNG)
**Inheritance:** A concept in which some property and methods of an Object is being used by another Object.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfg35udg56o9kdzcbez0.PNG)
Building full ecommerce stores in Bootstrap Studio 5.8
Tags: webdev, tutorial, html, css
Published: 2021-11-27 15:25:12

[Bootstrap Studio](https://bootstrapstudio.io) 5.8 was released earlier this month, and with it came our brand new set of Ecommerce components which you can use to build fully featured online stores.

{% youtube 8YgF2D7F0Ps %}

You can list products, let users maintain a shopping cart, enter payment details and checkout. The backend is handled automatically and payments are deposited directly to your PayPal and/or Stripe accounts with zero fees.

This is all done with a handful of components that work great together and can be added to any Bootstrap Studio project.

## Product

The Product component renders a product page with a name, media gallery, description and an Add to Cart button. All of these can be disabled individually from the settings and can be customized with CSS.

![Product Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39d5vj0p6ft0mt8g64qe.png)

## Product List

The Product List component displays a collection of products in a list with optional pagination. You can switch it between list and cards, apply category filters and change the ordering.

![Product List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg3bwv5e3a2njir74tu0.png)

## Add to Cart

The Add to Cart component displays a button which lets users add a specific product to their shopping cart. Use it when building custom product pages but wish to leave the add to cart functionality intact.

![Add to Cart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx6nilul6w4nx4oaoj16.png)

## Shopping Cart

The Shopping Cart is where the magic happens. It generates a fully functional shopping cart that lets users edit products and checkout. Payments are transferred to the linked PayPal/Stripe account with zero fees.

![Shopping Cart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wihftfkc01o2fyl1il9.png)

## More is Coming Soon

Here is what we have planned for making Ecommerce even better:

* Coupon codes
* Digital Products
* Webhooks
* Translations

We are looking forward to see what you build!
Should You Specialize?
Tags: career
Published: 2021-11-27 15:00:14

**It's no secret that experts that specialize in a particular niche tend to make more money.** It can be easy to think of how you pick a specialization and your career takes off.

But before you can choose a specialization, you need to decide if you should specialize or how much you should specialize.

The first step is figuring out if you want to specialize.

**Will you like doing the same type of work for the same industry every day?**

Specialists do not have as much variety between the types of clients or projects they take on.

With the limited variety of jobs, there won't be as many job opportunities compared to the prospects for a generalist. However, the generalist also competes against many others for the job, including specialists.

Along with fewer opportunities, sometimes specialists are brought on to solve a specific problem only, leading to shorter projects. Yes, specialists can make more money for these smaller jobs than a generalist working on a long-term project.

But they need to be an expert to demand that higher rate. **Waking up one day and deciding you now specialize in X won't magically make you more money.** First, you have to build your experience and reputation within the specialization.

**The good news about choosing to specialize is you can also decide how niche your specialization is.** The more niche your specialization, the more chances you have to make money and become a top expert for a specific area. The broader you keep your specialization, the closer you are to the benefits and drawbacks of being a generalist.

It is up to you to decide just how far you may want to specialize.
Developer console in phone? Chrome APP tricks
Tags: productivity, codenewbie, mobile, javascript
Published: 2021-11-27 14:52:46

Sometimes while surfing through a site on your smartphone you might have wanted to know how the codes for the site looks like. But you never saw it because you didn't wanted to get up and turn on the Computer.
But what if I told you can view source code of any website right on your smartphone using the Chrome APP.
## In this article we are going to see some useful Chrome  APP tricks that every developers should know.

### 1. View Source Code:
To get the source code of any website from your Chrome browser App all you have to do is add `view-source:` in front of the URL.
![View page source code in android phone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixsw02jaau879tmc2l5t.png)
 
### 2. Run JavaScript through address bar:
In the address bar of your Chrome app you can run JavaScript Also. The syntax is `javascript:your_code`
![Run JavaScript through address bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1g3bsxjgknnvivky857.png)
 

### 3. Developer console on smartphone:
You can use [eruda](https://github.com/liriliri/eruda) to access desktop like developer console from your smartphone.
Just go the website you're developing. Then type `javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();` and hit enter. And you'll be able to acces desktop like developer console from you browser.
> PS. if you just copy past it, chrome will remove **javascript:** from the beginning so you have to type it back manually.

![Developer console on smartphone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0k4ole3mxsoh0qzj8ht7.png)

## Got a trick? Share it in the comments.

## Make sure you checkout my other articles and YouTube channel
{% user 0shuvo0 %}
{% youtube qhOZoJPMg6w%}
## Was it helpful? Support me on Patreon
[![Patreon Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vnw8g7vs5pok3jwgtgv.png)](https://www.patreon.com/0shuvo0)
Thanks For 100 Followers!
Tags: beginners, thanks, offtopic
Published: 2021-11-27 14:38:19

I had recently started posting on dev.to, just at the start of this month, I have posted 5 posts (excluding this one), I did not expect such good response. I don't know if 100 followers are more or less on dev.to but I am truly grateful for that I just want to say one thing:

**Thank You!**
The Uploadcare Image Loader for Next.js Has Been Released
Tags: nextjs, react, javascript
Published: 2021-11-27 14:32:13

![Next.js plus Uploadcare banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0w1fsfx1zlmeeofsorv.png)

First of all, what's Uploadcare? Uploadcare through their API provides file uploading, processing and delivery for web apps, and does it really well.

While working on a series of Next.js tutorials for Uploadcare blog ([first](https://uploadcare.com/blog/next-js-tutorial/), [second](https://uploadcare.com/blog/next-js-image-optimization/)), I thought people would benefit from integrating Uploadcare services into Next.js, so I offered my help with an Open Source integration. 

As it turned out, the Uploadcare guys had already [tried](https://github.com/vercel/next.js/pull/18688) to add their image loader to the Next.js core but for some reason Next.js team stopped accepting new third-party loaders to the core, so the Uploadcare loader remained unused in a pull request on Github.  

I started with the pull request but went much further. Here is what I did:

- Extracted the loader code into a separate package
- Refactored and optimized the code
- Made it possible to configure the loader through environment variables (custom CDN domain, custom proxy domain, image transformation settings, etc.)
- Developed the UploadcareImage component with the loader integrated
- Created automated tests for the loader function and the Next.js component
- Added a Github workflow for testing and linting the project
- Added [documentation](https://github.com/uploadcare/nextjs-loader) for the project

Finally, [Alex Grenishin](https://github.com/nd0ut) from the Uploadcare team added [ShipJs](https://github.com/algolia/shipjs) integration, improved auto-deployments and helped fix some issues.

You can test the project in action [here](https://uploadcare-nextjs-loader.vercel.app) and check out its code on Github [@uploadcare/nextjs-loader](https://github.com/uploadcare/nextjs-loader). Feel free to suggest your improvements in the issue queue on Github.

And if you want to experiment with the Uploadcare file uploading widget for React, check out [@uploadcare/react-widget](https://github.com/uploadcare/react-widget).

Thanks to the Uploadcare team for their support and assistance.
Day 73/100 Project: A Pixel Art Editor
Tags: 100daysofcode, programming, challenge, motivation
Published: 2021-11-27 14:25:29

"I look at the many colors before me. I look at my blank canvas. Then, I try to apply colors like words that shape poems, like notes that shape music."

– Joan Miro

![cheese](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlzlohoyibdsmljfebk8.png)
[NestJS] Access Express request and response in GraphQL resolver.
Tags: node, typescript, javascript, graphql
Published: 2021-11-27 13:39:52

If you are like me and ever wanted to add cookies to your NestJS GraphQL responses, you may not have found a lot of documentation about how to do it. Here is how :

First of all, add a context to your GraphqlModule initialization
```ts
GraphQLModule.forRoot({
    ...
    context: (context) => context,
}
```
Then use the `@Context` decorator from nestjs/graphql to specify what you need to access. `Request` and `Response` are imported from express.

```ts
async login(
        @Args() params: LoginArgs,
        @Context('req') request: Request,
        @Context('res') response: Response,
) {
    console.log('request: ', request.cookies);
    response.cookie('whoami', 'DIO', {
        httpOnly: true,
    });
}
```
The 'req' and 'res' arguments are used to specify that we want to access the request and response from the Context. Not using any argument will give you access to the full context. Personally, I prefer to specify them to make use of typing.

That is all, enjoy coding !!!
Dotnet Outdated - Install and Update
Tags: actionshackathon21, github, opensource
Published: 2021-11-27 13:20:55

---
title: Dotnet Outdated - Install and Update
published: true
description: My submission to the GitHub Actions x DEV Hackathon 2021!
tags: actionshackathon21, github, opensource
---

### My Workflow

{% github https://github.com/stphnwlsh/dotnet-outdated-action %}

### Submission Category: 

Maintainer Must-Haves


### Yaml File or Link to Code

https://github.com/stphnwlsh/CleanGraphQLApi/blob/main/.github/workflows/dependency-updates.yml

{% github https://github.com/stphnwlsh/CleanGraphQLApi %}

### Additional Resources / Info

https://github.com/stphnwlsh/CleanGraphQLApi
https://github.com/stphnwlsh/CleanMinimalApi
https://github.com/stphnwlsh/SimpleDateTimeProvider
Let's confuse you all between arrays and slices in golang😎
Tags: go
Published: 2021-11-27 12:47:37

---
title: Let's confuse you all between arrays and slices in golang😎
published: true
description: 
tags: go
//cover_image: https://direct_url_to_image.jpg
---

Let's see if you can correctly figure out the types of these (array or slice)

1. `a := [4]int{}`
2. `a := []int{}`
3. `a := []int{1,2,3}`
4. `a := [4]int{}`
5. `a := make([]int, 10)`
6. `a := new([]int)`
7. `a := *new([]int)`
8. `a := *new([5]int)`
9. `a := new([5]int)[:]`
How to Get a List of dev.to Posts From the API
Tags: devto, api, javascript, beginners
Published: 2021-11-27 11:43:17

## Overview

> I've decided to download my [dev.to](https://dev.to/) posts so that I can store them in git.  That means that if the site ever goes down, I have a copy of my blog content.  **Step 1**, is to get a list of my posts.

## The dev.to API

The API is documented [here](https://developers.forem.com/api/).

The following endpoint will give a list of the latest articles for a given user: 

https://dev.to/api/articles/latest?username=melvincarvalho

It supports pagination, each page will contain 30 articles by default.  This can be increased with the `per_page` query parameter, which we will set to 1000.  That should be enough for most users.

Replace `melvincarvalho` with your own username

## The Code

So I wrote a JavaScript script that will pull out a list of my articles.

```JavaScript
#!/usr/bin/env node

// requires
const argv = require('minimist')(process.argv.slice(2))
const fs = require('fs')
const path = require('path')
const $ = require('child_process').execSync

// data
globalThis.data = {
  api: 'https://dev.to/api/articles/latest',
  dataDir: path.join(__dirname, '..', 'posts'),
  filename: 'index.json',
  perPage: 1000,
  user: 'melvincarvalho'
}

// init
data.api = argv.api || data.api
data.dataDir = argv.dataDir || data.dataDir
data.filename = argv.filename || data.filename
data.perPage = argv.perPage || data.perPage
data.user = argv._[0] || data.user
console.log('data', data)

// main
let postsUri = `${data.api}`
postsUri += `?per_page=${data.perPage}`
postsUri += `&username=${data.user}`
const cmd = `curl '${postsUri}'`
console.log('cmd', cmd)
const json = JSON.parse($(cmd).toString())

// output
if (!fs.existsSync(data.dataDir)) {
  fs.mkdirSync(data.dataDir, { recursive: true })
}
const output = JSON.stringify(json, null, 2)
const outFile = path.join(data.dataDir, data.filename)
console.log('output', output)
fs.writeFileSync(outFile, output)

```

`Usage: ./getposts.js [username]`

## The Code Explained 

First we initialize the endpoint and username.  Then we run some curl to get the result, and finally we format it and write it to a file.

## The Output

Running this code will get a list of articles and save it to a file called `posts/index.json`

The JSON output can be seen [here](https://melvincarvalho.github.io/dev.to/posts/index.json) and the current script is [here](https://github.com/melvincarvalho/dev.to/blob/gh-pages/bin/getposts.js).

Now that I have a list of articles, it should be possible to download the markdown from individual article, too.  I will hopefully cover that in a future post.

## Useful Links

- [dev.to api](https://developers.forem.com/api/)
- [How to use the dev.to API](https://dev.to/nataliedeweerd/how-to-use-the-dev-to-api-5gl3)
- [Repository for this script](https://github.com/melvincarvalho/dev.to/)