teleren/devto huggingface dataset:
Omniauth Authentication with Google
Tags: omniauth, googleconsole, beginners, rails
Published: 2021-05-05 07:00:03

I have downloaded so many apps that give me the option to login using facebook. I never really gave it much thought, all I knew is that it made my life a little simpler. 

After working on my rails project, I now understand how developers were able to do that. With a little bit of rails magic, a little bit of code, and a little bit of patience. 

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

(hehe)

I started with OmniAuth by adding the appropriate gems needed to my Gemfile. 

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

Once these are in your Gemfile, run:

           bundle install 

[OmniAuth can be set up with other websites, so these gems
might look a little different, some examples:
   1. https://github.com/simi/omniauth-facebook
   2. https://github.com/omniauth/omniauth-github
]

From here, I went to my config/routes.rb file and added the line of code below 

      get '/auth/:provider/callback', to: 'sessions#omniauth'

The best way I can explain this is by letting someone else explain it. 😅

   "Now let’s return to the Callback URL. This is the URL 
   where a user will be redirected to inside the app after 
   successful authentication and approved authorization 
   (the request will also contain user’s data and token). 
   All OmniAuth strategies expect the callback URL to equal 
   to “/auth/:provider/callback”. :provider takes the name 
   of the strategy (“twitter”, “facebook”, “linkedin”, 
   etc.) as listed in the initializer."

In case anyone is interested in reading more: 
https://www.sitepoint.com/rails-authentication-oauth-2-0-omniauth/

Next.
In my config/initializers/omniauth.rb
I registered a new provider, google, by providing a key pair that will identify the app to the provider.

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


The two keys "GOOGLE_CLIENT_ID" and "GOOGLE_CLIENT_SECRET" are then saved in an .env file which I stored in a .gitignore file to keep them from being pushed to my GitHub. 

   **The website I added right above also explains how to get 
   these keys from different apps**

Lastly, in my views/sessions/login.html.erb 
I add the button necessary to let my user sign in using their Google account. Show below:

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

And **TADAHHHH✨**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xitzqky2bkqscqcfyi76.png)

######_I have a working login from another provider_
75 FREE Data Science Courses on Udemy You Need to Know in 2021
Tags: datascience, machinelearning, python, analytics
Published: 2021-05-05 06:58:56

Udemy is one of the most popular **MOOC-based e-learning platforms** in the world. Udemy has a wide variety of Data Science courses. That’s why in this article, I have listed **75 FREE Data Science Courses on Udemy**.

For these courses, **You don’t need to pay a single buck**. So give your few minutes to this article and check out the **FREE Data Science Courses on Udemy**.

For your convenience, I have created a table from where you can filter out the course according to **Rating, Time to Complete, and Prerequisites**.

Now without any further ado, let’s get started-
**[Click to continue reading...](https://www.mltut.com/free-data-science-courses-on-udemy/)**
How to start with streamlit web framework.
Tags: streamlit, machinelearning, webframework, computervision
Published: 2021-05-05 06:37:05

Sometimes you make a *data science* , *machine learning* or *computer vision* projects but suddenly you stuck with a thought that how to show it to the world, what type of clear technology I can use, so that everyone can see and understand your model.
Then here comes the **Streamlit** web framework. 

**What is streamlit?**
*Streamlit* is an open-source app framework for creating and deploying data science applications. *Streamlit* helps data scientists and machine learning engineers to develop applications in a few hours.

**Best resources to learn streamlit.**
Often confused about resources, don't worry *streamlit forum* has made it very easy for you.

You can check their blogs, where they have arranged and covered everything you need to know about it.
[Getting started](https://docs.streamlit.io/en/stable/getting_started.html) with streamlit. 

**Create your first streamlit app.**
1) Create new python file with **first_app.py**
2) Import libraries.
```
import streamlit as st
# To make things easier later, we're also importing numpy and pandas for
# working with sample data.
import numpy as np
import pandas as pd
```
3)Run your app
```
streamlit run first_app.py
```
For more information visit their documentation [Doc](https://docs.streamlit.io/en/stable/getting_started.html)

**What streamlit can do?**
1)Streamlit supports several popular data charting libraries like Matplotlib, Altair, deck.gl, and more.

2)With **st.map()** you can display data points on a map, which is really useful.

3)with **st.sidebar()** you can move your widget into a sidebar.

**Create a model using streamlit.(Uber pickups in NYC)**
[Uber pickup analysis](https://docs.streamlit.io/en/stable/tutorial/create_a_data_explorer_app.html)

#### That's a complete beginner guide for getting started with streamlit. 

Hope you like this post.
**Thank you**
**Rishabh Dwivedi**
Vue-3.x & Element-UI-3.x simple demo
Published: 2021-05-05 06:35:39

```html
<html> 
	<head>	
		<script src="https://unpkg.com/vue@next"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
	</head>
	<body>
		<h1>Today is a good day.</h1>
		<div id="app">
      		<el-button type="primary">{{ message }}</el-button>
    	</div>
    	<script>
      		const App = {
        		data() {
          			return {
            			message: "Hello Element Plus",
          			};
        		},
      		};
      		const app = Vue.createApp(App);
      		app.use(ElementPlus);
      		app.mount("#app");
    	</script>
		  
	</body>
</html>
```
Vue-3.x & Element-UI-3.x simple demo
Published: 2021-05-05 06:34:28

```html
<html>
	<head>	
		<script src="https://unpkg.com/vue@next"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>

	</head>
	<body>
		<h1>Today is a good day.</h1>
		<div id="app">
      		<el-button type="primary">{{ message }}</el-button>
    	</div>
    	<script>
      		const App = {
        		data() {
          			return {
            			message: "Hello Element Plus",
          			};
        		},
      		};
      		const app = Vue.createApp(App);
      		app.use(ElementPlus);
      		app.mount("#app");
    	</script>
		  
	</body>
</html>

```
Day 52 of 100 Days Of SwiftUI
Tags: swift, 100daysofcode
Published: 2021-05-05 05:59:00

I just completed day 52 of 100 days of SwiftUI. Today I worked on the app challenge for the cupcake app. I add validations for blank inputs in the form and also added showing an error dialog when the request for cupcakes fails.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k06bjs98htjx3js4jh0w.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbuabguo0tp0aip8z7zu.png)
What's your startup success rate?
Tags: watercooler, career, startup
Published: 2021-05-05 05:52:40

---
title: What's your startup success rate?
published: true
description: 
tags: watercooler, career, startup
cover_image: https://acquire.io/wp-content/uploads/2017/08/What-is-Important-for-Startups-Product-or-Sales-01-1.png
---
Startups are young companies founded to develop a unique product or service, bring it to market and make it appealing for customers.

How many startups have you launched and how many of them would you say were successful? 

What were the main reasons for success and what were the key takeaways from failures? Would love to hear your stories!
How to Install Free SSL Certificate for Website | Renew cPanel SSL Certificate Free
Tags: webdev, security, html, css
Published: 2021-05-05 05:52:26

**Related Queries:**

How to install let's encrypt SSL in cPanel?
How to install an SSL Certificate for free?
How to get a free SSL certificate f?
How to activate a free SSL certificate?
How much does an SSL certificate cost?
Are there free SSL certificates?

Follow these steps to  install or renew your free SSL certificate for your website:

**Watch Full Video Tutorial**

{% youtube XrwiH8X28vk %}


1. Go to google search and type SSL for free and click on  the following website link:  https://www.sslforfree.com/
2.  To secure your website copy and paste your website domain in the create free SSL certificate field.
3.  In this step create your account by using your email and password and click on register.
4.  Verify and validate your domain name and don't uncheck Auto Generate CSR button now click the next step.

5.  After that your SSL certificate has created and you need to verify your domain name. To do that select the HTTP file upload option. Now download your 'auth file', create a new file directory in your cPanel web hosting. After that verify your domain and click the next step to continue.
6. After your domain verification there will a button to download SSL certificate files for free in the zip file. Download these files and unzip that folder.
7. No, login to your web hosting server and go to cPanel and then click on SSS/TSL option under your security section.
8.  If there are already exist old SSL files in your cPanel first delete all old SSL certificate files and then upload your new downloaded files. Upload private key files and certificate key files in their respective options.
9. Now finally, click on 'Install and Manage SSL for your site (HTTPS)' to install the free SSL certificate files.


------------------------------------------------------------------
- Please have a look at my website for more details!
         https://hmawebdesign.com
- Place an order for any Web Development work!
         https://www.fiverr.com/haaddison1?up_rollout=true
--------------------------------------------------------------------------------
Laravel Inertia JS Pagination Tutorial
Tags: laravel
Published: 2021-05-05 05:47:21

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2guej0zxu08r5528th21.gif)

Hi Guys,

Today, I will learn you how to use inertia js pagination in laravel. We will show example of laravel inertia js pagination.if you want to see example of laravel inertiajs pagination then you are a right place. i explained simply about pagination in laravel inertia js.

We will give you step by step simple example of how to add pagination using laravel inertia js. I will use laravel breeze with inertia to creating this example.

Here, I will give you full example for inertia js pagination using Laravel as bellow.

Link: https://www.mywebtuts.com/blog/laravel-inertia-js-pagination-tutorial
Which React hooks do you use the most?
Tags: watercooler, react, webdev, hooks
Published: 2021-05-05 05:29:42

---
title: Which React hooks do you use the most?
published: true
description: 
tags: watercooler, react, webdev, hooks
cover_image: https://i.morioh.com/2934a8d84c.png
---
Hooks were first introduced in React v.16.8, so that we could use state and other React features without writing a class.

Some of the built-in ones include `useState`, `useEffect`, `useRef`, `useCallback`, `useMemo`, `useContext` and `useReducer`.

Which ones do you use the most? And how often do you write your own custom hooks?
How to output tomorrow's date in PHP
Tags: php, webdev
Published: 2021-05-05 05:19:48

Simply add a parameter called "+1 day" when instantiating the DataTime class.

```php
<?php
// today
$today = new DateTime();
echo $today->format('Y-m-d') . PHP_EOL;
// tomorrow
$tomorrow = new DateTime('+1 day');
// or
$tomorrow = new DateTime('tomorrow');
echo $tomorrow->format('Y-m-d');
```

Output result
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ralb52nt7r7gropi8muf.png)
Linux sheet music and MIDI authoring with Frescobaldi/Lilypond
Tags: linux, music, watercooler, lilypond
Published: 2021-05-05 05:11:22

An easy way to author music on Linux, with both sheet music and [MIDI](https://wiki.archlinux.org/title/MIDI), is to use [Lilypond](http://lilypond.org/), a text-based sheet music language. A GUI editor for Lilypond is [Frescobaldi](https://www.frescobaldi.org/index.html), which is available for all three major platforms.

Furthermore, you will need to install a MIDI player. I use [Timidity++](https://wiki.archlinux.org/title/Timidity%2B%2B) for this.

If you want a more complex music studio, you might try [Rosegarden](https://www.rosegardenmusic.com/).

<!-- excerpt -->

This is an example Lilypond file, that covers

- Chords
- Lyrics
- Repeats
- MIDI player
- Transpose

```latex
\version "2.22.1"

\header {
  title = "My Heart Will Go On"
  composer = "Theme from Titanic (1997)"
  tagline = \markup {
    Engraved at
    \simple #(strftime "%Y-%m-%d" (localtime (current-time)))
    with \with-url #"http://lilypond.org/"
    \line { LilyPond \simple #(lilypond-version) (http://lilypond.org/) }
  }
}

vocal = <<
\new ChordNames \with {midiInstrument = "acoustic guitar (nylon)"} {
  \chordmode {
    \repeat volta 2 {
      e1 b a e2 b
      e1 b a
    }
    \alternative {
      { a1 }
      { a2 gis:m }
    }
    
    cis1:m b a b cis:m b a gis2:m fis:m
    cis1:m b a b cis:m b a b2 a e1
  }
}

\new Voice = "one" \relative e' {
  \tempo 4 = 120
  \key e \major
  
  \repeat volta 2 {
    e4. e8 e4 e
    dis e2 e4
    dis e2 fis4
    gis2 fis
    e4. e8 e4 e
    dis e2 e4
    b1(
  }
  \alternative {
    { cis1) }
    { cis2 cis4( dis }
  }
  
  \break
  
  e1) fis2. b,4
  b'2 a4 gis8 fis~
  fis2 gis4 a
  gis2 fis4 e
  
  \break
  
  dis e2 dis4
  cis2.~( cis8 dis16 cis
  b2 a2)
  
  \break
  
  e'1 fis2. b,4
  b'2 a4 gis8 fis~
  fis2 gis4 a
  gis2 fis4 e
  
  \break
  
  dis e2 dis4
  dis e2 fis4
  gis2 fis e1
  
  \bar "|."
}

\new Lyrics \lyricsto "one" {
  <<
  {
    Eve -- ry night in my dreams
    I see you, I feel you.
    That is how I know you, go on.
  }
  
  \new Lyrics {
    \set associatedVoice = "one"
    Far a -- cross the dis -- tance
    And spa -- ces, be -- tween us
    You have come to show you, go on.
    \skip 1
    Near,
  }
  >>

  far, wher -- e -- ver you are
  I be -- lieve that the heart does, go on

  Once more you o -- pen the door,
  and you're here in my heart,
  and my heart will go on, and on.
}
>>

\score {
  \transpose e e {
    \vocal
  }

  \layout {}
}

\score {
  \unfoldRepeats {
    \vocal
  }
  \midi {}
}
```

And, the exported PDF - [my-heart-will-go-on.pdf](https://github.com/patarapolw/music/blob/807974ef35764dbfa0e8b17a11eb1f8f517f1bca/_docs/Titanic/my-heart-will-go-on.pdf).
Babel e Webpack explicado por um n00b.
Tags: beginners, webdev, javascript, braziliandevs
Published: 2021-05-05 04:59:49

Acabei de terminar as aulas do [Diego Schell Fernandes](https://www.linkedin.com/in/diego-schell-fernandes/) sobre [Babel](https://babeljs.io/) e [Webpack](https://webpack.js.org/) no Ignite da [Rocketseat](https://rocketseat.com.br/) 🚀.

E posso dizer que aprender JavaScript é difícil se você é novo na área como eu.
A tecnologia avança de uma forma que as vezes é muito difícil entender o que a ferramenta se propõe a resolver e o porquê dela o fazer, e você pode se perguntar, mas pra que serve Babel? E o Webpack? Quando que eu vou usar isso?

Então esse artigo nada mais é do que ambas tecnologias explicadas por um n00b.

#Babel

O Babel nada mais é do que um tradutor de código. 
Ele pega código sofisticado ES6 e transforma em código menos sofisticado ES5, isto é pega código JS que o navegador não entende e traduz para uma língua que o navegador entenda.

Tá mas não entendi ainda.

Vamos pensar no seguinte caso, imagine que você está escrevendo um código JS e escreve da seguinte maneira: 

```
import date from ‘date’;

export default () => date.format(‘YYYY Do MM’);
```

O navegador por si só não entende isso, e é justamente por isso que precisamos do Babel para transformar o código acima, em um código que o navegador entenda neste caso nisso:

```
const data = require(‘data’);

function getDateString(){
    const moment = date();
    return moment.format(‘YYYY Do MM’);
}

export.default = getDateString;
```

Tá entendi, mas isso funciona só com JavaScript puro?

No caso não, o Babel faz bastante coisa posso colocar em particular dois plugins o @babel/preset-react que faz a tradução de arquivos .jsx para .js e o @babel/preset-typescript que faz a tradução de arquivos .tsx para .js

Ahh agora entendi, mas ele funciona com outros tipos de arquivos? Como .png, .css, .scss etc?

#Webpack

Imagina assim, se o Babel é tradutor de Javascript, o Webpack funciona praticamente com tudo, por que o front-end em si é um ambiente complexo com por exemplo CSS, SASS, imagens, fontes etc., e de alguma forma é preciso que todos esses arquivos sejam utilizáveis no nosso site ou aplicação web de forma rápida.

E é aí que entra o Webpack, pois ele pega tudo isso e faz um pacotinho só, que é usado de forma rápida pelo usuário que acessa o site.
O nome desse arquivo é bundle.js e o nome dessa prática é minify ou uglify.

Dessa forma, o Webpack pega todos aqueles módulos instalados e faz a mágica com todas as dependências e transforma tudo em código de uma só linha, que o navegador entende.

O create-react-app por exemplo utiliza tanto o Babel quanto o Webpack por debaixo dos panos. 

#Concluindo essa parede de texto

O Babel transforma código ES6 atual em código ES5 não tão atual, o que aumenta a gama de navegadores que não terão problemas ao acessar determinado website que o utiliza.

E o Webpack pega todos os arquivos que você tem no seu projeto e faz o minify deles, de forma que o website seja mais rápido, pois o código faz download mais rápido no lado do client, que em retorno acessa de forma mais rápida os conteúdos disponíveis.
[Twitch.tv] Half an hour of Exercism
Tags: twitch, programming
Published: 2021-05-05 04:14:03

So for those interested, I'm experimenting with Twitch.tv. 

For half an hour from 7:00pm UTC+08 I'll be solving Exercism.io tasks in a variety of languages. 

You can get an idea of what level of boring it is by looking at my [last broadcast](https://www.twitch.tv/axtens_b).

Chat will be enabled.
UN + EU + ASEAN = NATO
(NO ACTION, TALK ONLY)
Published: 2021-05-05 04:04:55

UN + EU + ASEAN = NATO
(NO ACTION, TALK ONLY)
For more than 3 months, when hundreds dead, thousands arrested/injured/raped/humiliated/missing/displaced/bullied & millions suffered, they are still talking & talking all the time with no action! Hopeless!!! The heartless and inhumane Min Aung Hlaing has killed more citizens in 3 months than covid has killed people in more than half of the 220 infected countries in 16 months!!! And they are still talking..... 🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️

I am from Myanmar who against the military.
Admin Control Panel Dashboard for my multi-tenant SaaS application runs all my websites.
Tags: svelte, typescript, postgres, saas
Published: 2021-05-05 03:35:43

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zm57drfvg9538rozbc2.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7xtwfx27c5kzxdvxx6u.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdd7i3k11hx5hwizu4ip.png)
ISTRAV - Web solutions and custom software.
Tags: typescript, svelte, saas, github
Published: 2021-05-05 02:01:40

Our First Product Now In Beta:
https://channel.istrav.com/watch/front-and-center

Code is Open Source:
https://github.com/trabur/istrav-marketing

About ISTRAV:
Complete custom & white label web solutions. Includes admin control panel (metaheap.io). Built headless (farmerless.com) with CQRS in mind so you can detach any part of the system and roll your own at any time. Underneath the hood (hacktracks.org) our backend REST API is "event source" driven; the same system used by banks to keep track of records. We are doing some amazing things around here at ISTRAV, so stick around, and feel free to give us feedback along the way.
TIL AssetDatabase Ops
Tags: todayilearned, gamedev, unity3d, assetdabase
Published: 2021-05-05 01:44:39

2021-05-04
*May the fourth be with you*

So I exported a [SGB project](https://dev.to/goldenxp/til-about-sgb-engine-for-unity-3g43) to Unity and needed to change all the shaders on the exported materials. This is a tedious task to do by hand especially when there are many materials --- but fortunately, Unity makes Editor Scripting easy and you can perform batch operations on assets easily.

I learned about the AssetDatabase and how you can use it to find and manipulate assets. I slapped together a scriptable-wizard that takes two shader values and runs through all materials in the project and swaps the first with the second. This lets me target shaders that I know can be replaced properly.

```csharp
using UnityEngine;
using UnityEditor;
using System.Collections;

public class Wizard : ScriptableWizard
{
	public Shader target;
	public Shader replacement;
	
	[MenuItem("Batch Ops/Wizard")]
	public static void SetWizard()
	{
		ScriptableWizard.DisplayWizard("Some Batch Op",typeof(Wizard),"Swap Shaders");
	}

	void OnWizardCreate()
	{
		string[] guids =  AssetDatabase.FindAssets("t:material");
		foreach (string guid in guids)
		{
			string path = AssetDatabase.GUIDToAssetPath(guid);
			Material material = (Material) AssetDatabase.LoadAssetAtPath(path, typeof(Material));
			if (material.shader == target)
			{
				material.shader = replacement;
				Debug.Log("Replaced shader in " + material.name);
			}
		}
		AssetDatabase.SaveAssets();
		AssetDatabase.Refresh();
	}
}
```
The following wizard shows up when I access it from the top menu.
![Wizard and output log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2uxrc53oi53iqhygc87.png)

Fortunately, the script ran with no issues and I was able to avoid tedious shader replacement. I'm sure it's prone to errors but I'll deal with those as they happen.