teleren/devto huggingface dataset:
Rails Coding to Allow Log In Via Either Google or Facebook – A Step By Step Guide.
Published: 2021-04-16 21:08:30

The setting up of coding to allow a user to log in via Google or Facebook is a little more complicated due to differences in their structure. 

The first step is to set up an account with the two sites. The following blog gives guidance regarding signing up with Google: 

https://medium.com/@amoschoo/google-oauth-for-ruby-on-rails-129ce7196f35

The blog giving guidance for signing up with Facebook is:

https://dev.to/nkemjiks/implementing-facebook-authentication-with-devise-for-your-rails-6-app-1p3b

These two blogs give full instructions regarding the setting up of Google and Facebook developer accounts respectively. These should be followed. The ID and secret are the two pieces of information that you will need to use in your code. The blogs also explain how to set up the rails code for the use of either one but there are some minor changes necessary in order for there to be the option of using either Google or Facebook. That code is what will be discussed here.

Be sure to have ‘uid’, ‘image’, and ‘provider’ columns in your users table. If not, use a migration to add them.

When a screenshot is shown, the code regarding Omniauth is the only code that needs to be utilized.

The next step is to add the omniauth related gems in the gemfile and use bundle install.

![Gemfile - pharmacy-medications-tracker [WSL_ Ubuntu] - Visual Studio Code 4_18_2021 8_34_08 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7is2ncb8cd5qrpaiwe0c.png)
 
Next Add the middleware to the project in config/initializers/omniauth.rb.
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2ur00fcggsgx1q7oe7i.png)
  
 
The next step is to add the following routes in config/routes.rb

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rjy5z7sbosp6s7uk4de.png)
 
 
Set up a controllers/omniauth_controller.rb file as follows:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5ujqasebkxhmdk8feqd.png)
 
 
The view allowing for usage of Google and Facebook would be set up as follows:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xf739bui5kgvwlxzn8wd.png)
 
 

In config/routes.rb the following route would be used. In place of ‘social_media’, put in whichever view contains the link to Google and Facebook:

post '/sessions/social_media' => 'sessions#social_media'

Create a .env file. It is VERY IMPORTANT that you add this file to your .gitignore file so that the codes are not pushed to your github repository and viewed publicly, and set it up as follows, utilizing the ID and secret that you received from the Google and Facebook sites in place of the words ENTER YOUR CODE HERE.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2h541ljbo6r8kkgc2x6.png)
 
 
Now you should be ready to allow users to log in with either Facebook or Google.
React Router  - Route ( WTF Moment )
Tags: react, javascript, lesson, devjournal
Published: 2021-04-16 21:02:54

Recently I was working on a project which consisted of books, and I realized that my whole web app was mounting and unmounting instead of the components re-rendering. 

**More details:**

The project consisted of 2 pages.

Here's a quick wireframe I whipped up:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxgbeeegbjcqi0gwe0l4.png)

1. Home
2. Search

I used react-router to create the navigation between pages.

What I didn't know, until I further read their documentation, is that if you use the prop component in `<Route>` it uses React.createElement to create a new React element from the given component.

That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. 

This caused undesired behavior which was when I was on the search page and updated the App state it would refresh everything and I would lose the state I had in the Search page. 

Instead, to just make sure the component updates and doesn't mount and unmount when there is an update, **use render**.

```
<Route
  path='/'
  exact
  render={() => ( 
   <Home 
    currentlyReading={this.state.currentlyReading} 
    read={this.state.read}
    wantToRead={this.state.wantToRead}
    updateBookShelf={(book, shelf) => 
    this.updateBookShelf(book, shelf)} />
  )}
></Route>				
```

```
<Route
  path='/'
  exact
  render={() => ( 
   <Search 
    allBooks={this.state.books}
    updateBookShelf={(book, shelf) => 
    this.updateBookShelf(book, shelf)} />
  )}
></Route>
```
**Summary**

* Component unmounts and mounts a new component.
* Render updates components, instead of unmounting and mounting.
Help with Flutter project (newbie)
Published: 2021-04-16 20:59:24

Hi. Basic question: I'm learning Flutter and would like to keep my files on OneDrive or GoogleDrive so I can switch computers if need be at any time and still be able to have the latest files on hand. As I'm going through my Udemy course, I realized OneDrive is messing the files of the same projects with different versions and then I'm not able to run the projects properly in the Android or iOS emulators. Does anyone have any tips so I can keep the files in the cloud? I'm really trying not to go back to my pen drive... Thanks.
How to hash your passwords in Node.js Easily.
Tags: webdev, beginners, codenewbie, javascript
Published: 2021-04-16 20:29:33

Hello, fellow devs!

>It's been a long time since I have written any new article here. So here is a small tutorial that I find very easy, fun, and also productive.

I'll show you a simple way how you can hash your passwords in node.js using `Bcrypt.js`.

The example I'm using today is from an API that I am making right now.

First, we will install a library called `bcrypt.js` using a simple npm command `npm install bcryptjs` and then import it into our project.

![Imported libraries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wniotf4kjk4dc9eakyr2.png)

And now I'll show the difference between an encrypted request and a not encrypted request made using postman. this is the request code without using bcrypt.js

![Post request without bcrypt.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grno1hm0iywpw4vbhjir.png)

This is the post request sent using postman without hashing. 
![Request without hashing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhu7yitjc0zyla6b2ho1.png)

And this is the response I get.

![Response of postman request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oev2swql9a27y7nqt4fs.png)

And now I will use the `hashSync` method provided by `bcrypt.js` to hash the user password field.

These are the changes required in the code. this is a simple function built into the `bcrypt.js` library.

![Changes into code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjguadmxgezwyni8lqlh.png)

And now in the response of the API, the password field will be in hashed form.

![Password is now hashed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6cf9f8lewmdubyoo8ue.png)

This is a simple way to hash your passwords in node.js.

Plus points if you can find the Simpsons reference. :)
Top 5 DEV Comments of the Past Week
Tags: bestofdev
Published: 2021-04-16 20:07:18

---
title: Top 5 DEV Comments of the Past Week
published: true
description: 
tags: #bestofdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvjh80kv1nr41sw6wxke.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.


@technoglot had some [amazing wins](https://dev.to/devteam/what-was-your-win-this-week-1jd5) this week! Keep the good work coming!

{% devcomment 1d9ce %} 


Take a look at this [brilliant yet sobering calculator](https://dev.to/alvaromontoro/bezos-calculator-4b7h) and you'll see what @crfries means. 

{% devcomment 1dcbk %}


Sometimes, all we need is a little advice from others to get our [portfolios in shape](https://dev.to/crfries/portfolio-advice-4m1o). This is a helpful adjustment, @peterlunch.

{% devcomment 1dblb %}


Choosing your [Linux distribution](https://dev.to/bobbyiliev/what-is-your-linux-distribution-of-choice-and-why-2ijf) can be a tricky decision to make. Thanks for stating your case and making that choice easier, @cmuralisree.

{% devcomment 1d88k %}


In so many ways, [reading can make you a better Software Developer](https://dev.to/jordienr/4-books-that-are-not-about-computers-that-made-me-a-good-software-developer-2hac), and these suggestions are heading to the top of the list, for sure. Thanks for choosing our next reads, @eljayadobe!

{% devcomment 1db4l %}



See you next week for more great comments ✌
Making operations on your deployed PostgresSQL database Dokku VPS
Published: 2021-04-16 19:52:03

If you are like me, you like to deploy on a dokku droplet using DigitalOcean! But how do you query  your database, when it's on some VPS far away from you? Today I will show you how to connect to it, and edit the database after it's been deployed.

My use-case: Add some sample data which would take too long if done through the websites front-end forms!

### Getting information about your database

First you need to get information about your database. This is based on Dokku, but there should be commands to achieve the same on the VPS-service you used.

In the terminal after ssh-ing into your server, run:

```bash
dokku postgres:expose database
```

to expose your database. Where database is your PSQL-service name you chose when setting up the Dokku container.

Output:

```bash
Service database exposed on port(s) [container->host]: 1234->????
```

I have hidden my port, but in my case I needed to use the last value, which is hidden for you.

Now you have all the required information. Hop into your Database Admin Program, for me it’s DataGrip!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u510lb0zej6z5vrtji47.png)

**Name** is irrelevant

**Host** is my backend url

**Port** is the value I got from the command

My **user** is Postgres and my password is secret🤐

**database** is just the name of your database

**URL** is autogenerated.

Press **connect**, and then you can make operations in your dokku database 🙌

For example, I can select all of the posts in my database:

```sql
select * from post
```

Let me know if you have any problems! This was just supposed to be a short article since I couldn't find a good resources elsewhere😄
When to use Svelte vs SvelteKit vs Sapper?
Tags: svelte, sveltekit, sapper, webdev
Published: 2021-04-16 19:38:40

**UPDATE July 15, 2022:** At this point, despite SvelteKit not yet being at v1.0, I would highly recommend anyone deciding between SvelteKit and Sapper to choose SvelteKit. Sapper is effectively unmaintained and SvelteKit v1.0 is impending.

---

Confused as to when you should use Svelte vs SvelteKit vs Sapper? Hopefully I can help you get a little more clarity with this short guide. Let's go! 👇

---

# Use Svelte if...

- You don't need/want SSR (Server Side Rendering)
- You want to render a component into an existing page
- You want to output things like a vanilla component, a WebComponent or a React component adapter

# Use SvelteKit if...

- You're ok with Beta software and living on the bleeding edge
- You want SSR like Next.js/Nuxt.js
- You want to have a backend API as part of your project
- You want your app to work in a Serverless environment (e.g. Vercel/Netlify)
- You want super fast hot reloading in development (via Vite) 

Note that SvelteKit supports static rendering with [adapter-static](https://www.npmjs.com/package/@sveltejs/adapter-static) which you can use to render a static site with built in routing in case you don't want/need any API/SSR.

# Use Sapper if...

**UPDATE**: at this point, Kit is almost at a v1.0, so there is a 99% chance you want to use Kit instead of Sapper

- You don't want to use Beta software and don't want to deal with the potential roadblocks of Beta software
- You want/need access directly to Express/Polka
- You're ok using a product that will no longer be maintained (SvelteKit will replace Sapper)

In reality, you should almost never choose Sapper and should instead post feedback to the Svelte team if things are missing for your needs. 

---

# Scenarios

Still not sure what to use? Maybe these scenarios will help you decide:

- _"I'm building a brand new web app (with backend/API)"_: **Use SvelteKit**
- _"I want to build an SPA (Single Page App) and I have a pre-existing backend and don't need SSR"_: **Use Svelte**
- _"I want to use Svelte in an existing web app"_: **Use Svelte**
- _"I'm cautious of new things but want SSR/routing"_: **Use Sapper**
- _"I'm building a rocket ship 🚀"_: **Use something else**

---

Note that if you end up using Sapper, you can always [migrate to SvelteKit later](https://kit.svelte.dev/migrating).

See any reasons missing from the above list? Drop them in the comments below 💬

_Follow me on [Dev.to](https://dev.to/danawoodman), [Twitter](https://twitter.com/DanaWoodman) and [Github](https://github.com/danawoodman) for more web dev and startup related content_ 🤓
My first git alias
Tags: github, linux
Published: 2021-04-16 19:04:50

At work I'm often jumping back and forth between various branches and pull requests and I sometimes find myself struggling to remember the name of a recent branch I need to use.

For years I've used `git reflog` as a short-cut to look at my git history and identify my recent work. It works okay, but it's very hard to make sense of:

![git reflog output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/by2umf5k9jqztnpil2ym.png)
 
Other times I try to use `git branch`, but that doesn't give you much context about anything and of course it can be easy to drown in the large number of branches:

```
~/d/n/webapp (typescript ✔) git branch
  add-cognito-auth
  doritos
  eslint-prettier
  main
* typescript
  updated-husky
```

Recently I got frustrated by this and decided to find a solution and stumbled on this stackoverflow question, [How can I get a list of git branches ordered by most recent commit?](https://stackoverflow.com/questions/5188320/how-can-i-get-a-list-of-git-branches-ordered-by-most-recent-commit), which taught me two really useful techniques.

1. **You can sort branches by commit date** using `git branch --sort=-committerdate` which is great in an of itself (watch out for the `-` after `sort=` which puts the most recent branches first)
2. **You can enhance this output a bit** using this wild syntax `git branch --sort=-committerdate --format='%(HEAD)%(color:yellow)%(refname:short) | %(color:bold green)%(committerdate:relative) | %(color:blue)%(subject)%(color:reset)' --color=always` which I'm never going to remember.

Which led me to create my first git alias after over 12 years of using it. Here's how I did it and here's what it looks like:

```
git config --global alias.branches "branch --sort=-committerdate --format='%(HEAD)%(color:yellow)%(refname:short) | %(color:bold green)%(committerdate:relative) | %(color:blue)%(subject)%(color:reset)' --color=always"
```

That command added this to the boottom of my `~/.gitconfig` file:

```
[alias]
        branches = branch --sort=-committerdate --format='%(HEAD)%(color:yellow)
%(refname:short) | %(color:bold green)%(committerdate:relative) | %(color:blue)%(subject)%(color:reset)' --color=always
```

Now when I type `git branches` I see this lovely output:
![nicely formatted git branch list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ua9191j2s8wlcq8rc61k.png)

Git isn't always the easiest to use, but this alias has made it just a little bit better, for me anyway. What kind of aliases do you use?
Trabajar en equipo 
Tags: webdev, programming, kanban
Published: 2021-04-16 19:13:07

# Bienvenida

¡Hi devs! Hoy les traigo un post, el cuál es sobre mi experiencia en el campo laboral en equipo. Llevé mis regaños,  sentí frustración muchas veces, y durante un buen tiempo pensé que no podía hacerlo... Así que, ¡ Vamos allá!

## todo tiene un comienzo

 Cuando entré en el grupo de desarrolladores web, sentí que era el que sabía menos. La verdad cuando entré pensé que iba a echarlo todo a perder  (nunca tuve un autoestima muy alta que digamos). Cuando el líder del proyecto me dijo para entrar, fue de una manera bastante graciosa,  yo le dije que me gustaría participar en algún proyecto,  y casualmente tenía uno, pero yo lo decía a la larga, así como cuando aprendiera a hackear con css (recalco que es imposible), y nunca me pasó por la cabeza que él tuviera un proyecto. Acepté sin titubeos, aunque  por dentro no quería,  me dije que bueno, ya metiste la pata por así decirlo.

## dentro del equipo

Yo nunca había hecho un trabajo como desarrollador web en equipo, mucho menos vía Internet, ni sabía que era kanban  (la metodología que usamos), sonaba como una cosa super extraña y lejana. Para trabajos en equipo se necesita un control de versiones,y ellos optaron por git y github; así que aprendí git y github, luego a repasar html y css, cuando me uní al grupo, me dijeron que necesitaba aprender Figma, sonaba como aprender a volar en ese entonces, luego que no se usaría frameworks  ( pensaba que unos cuantos kybites de bootstrap me salvarían del desastre, mala jugada), me quedé como, *creo que no oportunidad de triunfar* y luego vi el diseño, parecían los planos de Zuckerberg para Facebook, una pasada.

## empezando a codear

Cuando empecé a echar código, unas semanas después por contra tiempos, me dí cuenta que no era tan difícil el diseño, pero de pronto un problema.  A mí me tocaba hacer un formulario en html  y estilizarlo, hasta ese entonces no había hecho un form porque no me era necesario, pero lo encontré algo difícil al principio. Luego lo terminé y lo mandé con PR, el líder lo rechazó porque era más avanzado que yo y sabía una mejor solución. Luego lo arreglé un poco y quedó bien.

## lo que aprendí

Fue una experiencia bastante grata, aprendí un montó y conseguí amigos que me han ayudado desde entonces, me di cuenta que realmente no era tan malo en el diseño web, la verdad, cuando empecé no creí que podría ir más allá de html, pensaba que sólo Albert Einstein y Elon Musk podrían entender y hacer cosas útiles y sorprendentes, aprendí lo hermoso de trabajar en equipo, y sobre todo, aprendí que **enseñar es la mejor manera de aprender**

## palabras finales

Así que, si crees que *no tienes madera para la programación* seguramente estás equivocado, puede ser que sí, no sea lo tuyo, pero también puede ser que llegues a ser un gran dev, mi recomendación, **para estar parado, primero tienes que estar en el suelo, no te rindas**

Eso es todo devs, espero que les haya gustado, ¡goodbye devs!
Aplikaso baca berita terupdate 
Published: 2021-04-16 19:00:22

Untuk membaca berita silahkan konjungi kai di 
https://www.emirortech.com/5-applikasi-baca-berita-gratis-dan-terupdate-di-android-dan-ios/
Dan ada berbagai imformasi yang mungkin berguna bagi anda
How to reference Key Vault secrets from other subscriptions in Terraform
Tags: terraform, azure, cloudarchitect, cloudengineer
Published: 2021-05-23 17:58:07

---
title: How to reference Key Vault secrets from other subscriptions in Terraform
published: true
date: 2021-04-16 18:44:18 UTC
tags: Terraform,Azure,CloudArchitect,CloudEngineer
canonical_url: https://www.robstr.dev/how-to-reference-key-vault-secrets-from-other-subscriptions-in-terraform/
---

 ![How to reference Key Vault secrets from other subscriptions in Terraform](https://images.unsplash.com/photo-1483706600674-e0c87d3fe85b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDF8fHNlY3JldHxlbnwwfHx8fDE2MTg1OTY5NDM&ixlib=rb-1.2.1&q=80&w=2000)

One of the great things about working with Terraform is the ability to use data sources as a way to reference existing resources, like secrets from Azure Key Vault. However, working with Azure means that one might have to work with resources in more than one subscription at the time. The way to solve this is to set up two _azurerm_ provider blocks, one for the context that you are working in and one for the other subscription, separating them by using the alias argument.

Here is an example of how it works in practice.

```
terraform {
  required_providers {
    azurerm = {
      source = "hashicorp/azurerm"
      version = "2.56.0"
    }
  }
}

# Default provider block, note that there is no alias set here
provider "azurerm" {
  features {}

  subscription_id = "00000000-0000-0000-0000-000000000000"
}

# Provider for the "management" subscription where we have our key vault
provider "azurerm" {
  features {}

  alias = "management"
  subscription_id = "00000000-0000-0000-0000-000000000000"
}

# Data source, using the aliased provider to get the right context
data "azurerm_key_vault_secret" "example" {
  provider = azurerm.management
  
  name = "administrator"
  key_vault_id = data.azurerm_key_vault.existing.id
}

# How to output the secret
output "secret_value" {
  value = data.azurerm_key_vault_secret.example.value
}
```

Obviously, this isn't limited to just key vault secrets but applies to everything you might want to do within the context of a different subscription.

Any questions about Terraform, feel free to ask me through [Twitter](https://twitter.com/roberthtweets) and I'll create a blog post about it.