teleren/devto huggingface dataset:
How to prevent exceptions when using google_sign_in in flutter
Tags: flutter, googlecloud, android, firebase
Published: 2021-04-18 05:58:57

I was building an app which requires me to link user's google drive in my application to store data. But doing that requires fetching the access token from google_sign_in.

Now, although it is not a very difficult task, many people like me struggle with the exception

> PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10: , null, null)

Well, this is something I banged my head for. Now, lets get to the point. How to avoid this ? The answer is really simple, by using firebase. But wait, not the google login provided by firebase, but only a firebase project with your android application added in it (Don't forget to add the SHA1 certificate though).

Google cloud console and firebase console share projects, so a project created in firebase can be accessed in the cloud console as well. Now, let's see this through screenshots.

+ 1. First we go to the firebase console and click on create a new project.

![Create a new Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki9zfmtjsd9936a183uy.png)

+ 2. Then we fill in the name and all other pages and create the project.

![Give name to project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3zyoqbmck5iau91b67g.png)

+ 3. Wait for the project to get created.

![Creating Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd3win60u815m5afe7fd.png)

+ 4. Click on add android application button.

![Select Android app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnprr8ytzn42xamnbrsv.png)

+ 5. Fill in the package name, nickname and SHA1 certificate. The SHA1 can be fetched by running the following command in the android folder `./gradlew signingReport` or `gradlew signingReport`.

![Add Application details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl5z6tjppr1xsraqgksh.png)

+ 6. Download the **google-services.json** file and place it inside your android/app directory and complete the process.

![Download google-services.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yw9xz8y4wf155hya0u9.png)

+ 7. Don't forget to add the following to the respective files.

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

+ 8. Now, lets go the google cloud console, and we can find our newly created firebase project there with all necessary things already added.

![Cloud Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5d8zseh9jmxertrx78oh.png)

Now, here we can configure the OAuth consent screen, and add scopes. This can be used now and login will work smoothly. We can edit this project and add web applications as well.

> **Note**
> Don't reveal your SHA1 and secrets to anyone or ever push them to a public remote repository. They can be used maliciously.
I made a 'new tab' browser extension/theme
Tags: webdev, html, javascript, css
Published: 2021-04-18 05:46:38

## [Luminous New Tab](https://github.com/virejdasani/LuminousNewTab/blob/master/README.md)![Downloads](https://vsmarketplacebadge.apphb.com/downloads/VirejDasani.hydroxy.svg)![Rating](https://vsmarketplacebadge.apphb.com/rating-star/VirejDasani.hydroxy.svg)![Version](https://vsmarketplacebadge.apphb.com/version/VirejDasani.hydroxy.svg)
is a beautiful and open-source new tab browser extension that has an animated gradient background. New tabs will show the time, weather and let you do Google searches too! 

{% youtube BWXQjgYy9-w %}

Luminous New Tab is available for [Google Chrome](https://chrome.google.com/webstore/detail/luminous-new-tab/gakanaedbiohimbhbddcilejbpdmobdo) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/luminous-tab/)

I made Luminous New Tab because of the lack of minimal, ad-free New Tab extensions. I feel it gives a nice vibe to the browser and is quite useful. 
Let me know what you think about Luminous New Tab
You can request features and report bug [here](https://github.com/virejdasani/LuminousNewTab/issues/new)
And if you decide to get it for your browser, a [review](https://chrome.google.com/webstore/detail/luminous-new-tab/gakanaedbiohimbhbddcilejbpdmobdo/reviews), and a star to [the repo](https://github.com/virejdasani/LuminousNewTab) on GitHub thanks!


>### Links
#### Download for [Chrome](https://chrome.google.com/webstore/detail/luminous-new-tab/gakanaedbiohimbhbddcilejbpdmobdo) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/luminous-tab/)
#### [Luminous New Tab on GitHub](https://github.com/virejdasani/LuminousNewTab/)
### Follow me on [Dev](https://dev.to/virejdasani/)
### Check out some of my other projects and follow me on my socials from my website [here](http://www.virej.ml/)
7 dev songs you should listen
Tags: watercooler
Published: 2021-04-18 05:46:30

I have found some interesting songs related to programming. Here, I'd like to share 7 of my favorite songs.

[MVC Song](https://www.youtube.com/watch?v=YYvOGPMLVDo)

{% youtube YYvOGPMLVDo %}

[The Longest Path](https://www.youtube.com/watch?v=H6_TYSWTPzg)

{% youtube H6_TYSWTPzg %}

[MongoDB Database Skills](https://www.youtube.com/watch?v=0vPt7GI-2kc)

{% youtube 0vPt7GI-2kc %}

[Uptime Funk](https://www.youtube.com/watch?v=SYRlTISvjww)

{% youtube SYRlTISvjww %}

[Java Life](https://www.youtube.com/watch?v=b-Cr0EWwaTk)

{% youtube b-Cr0EWwaTk %}

[Imagine DevOps](https://www.youtube.com/watch?v=iYLxw6OsZug)

{% youtube iYLxw6OsZug %}

[We're Gonna Build a Framework](https://www.youtube.com/watch?v=Wm2h0cbvsw8)

{% youtube Wm2h0cbvsw8 %}

Happy Coding.
AR App Advice Please
Tags: idea, newbie, ios, ar
Published: 2021-04-18 05:31:32

Hey everyone! Thank you for interacting with this :)

I'm a complete newbie to develop, programming and such, but i've been doing quite a lot of research and i m motivated to get into it. I have an idea and i'm stuck on the logistics side of it because i'm new to this.

The idea: I want to create an educational AR mobile app (ios and android).

The idea is that a user would buy a QR-like code from a website that is able to be scanned by the app to generate a 3D AR animation. 1 QR-like code is valid for the first 2 devices that scan it and is rendered unable to be scanned by a 3rd device and so forth. Once the code has been scanned, a 3D AR animation would pop up and a specific sound must be heard by the app in order to start the animation, ie a hand clap would trigger the animation to start. 

I want the data for the animation to be on a cloud database rather than be stored locally and once the QR-like code is scanned, the user will have the option to download the data for the 3D AR animation so that it can be played without wifi. 

Things i'm not sure about:
Is it possible for the animation to be triggered by a specific sound?

Can i make my own QR-code-like system where the scanner on the app generates a 3D animation that corresponds to the 2D code image bought on the website (that looks similar to a QR code)?
Do you have any recommendations as to how to make your own Qr-like code? For this, I was thinking of using the spades icon instead of squares which are found on Qr codes.

How do I get the data for the 3D animations on a Cloud database and be able to have various 2D code images for the same 3d animation?

Is it possible to limit the number of uses 1 Code can have? For this, I was thinking of having users make an account for the app and when they scan a code, their account details are sent to some database and their details are assigned to the Code. The code would have 2 available spots for member accounts and once they have been occupied, the code cannot be scanned by another device.
I don t have a mac so i can t use Xcode to develop the app. What are some Great app developing softwares that can be used instead? Preferably an app that is compatible with both Ios and Android.

How difficult would the coding be for this project considering that i m relatively new to this?

Thank you So So much for spending time on this and i m Very Sorry if my explanations were bad.

Your comments and help are appreciated greatly :)
How to move Microsoft OneNote 2016 (& later?) notes from one PC to another
Tags: onenote, windows, office, office365
Published: 2021-04-18 05:30:56

**Note: this guide applies only to OneNote 20XX notes stored locally on the PC and not synced anywhere. It cannot be guaranteed to work for synced notes and will not work for OneNote for Windows 10 notes (which are synced to OneDrive using the OneDrive client)**

The whole thing is easier than you think. It should also work for OneNote versions later than 2016.

1. Open your `\Documents` folder
2. Open the `OneNote Notebooks` folder. Every subfolder in that folder is a OneNote notebook
3. Copy the desired notebook subfolder to the target PC, preferably to the default `\Documents\OneNote Notebooks` folder
4. On the target PC, open OneNote 2016 -> `File` -> `Open` -> `Browse`
5. Browse to the location of the notebook subfolder 
6. Inside the notebook subfolder, select the `Open Notebook.onetoc2` file
7. Click `Open`

This will open the copied notebook in OneNote 2016. You'll have to click on each tab to populate and color them, but everything should be there.
Best Zowie Mouse
Tags: digibharata, mouse, zowie
Published: 2021-04-18 05:17:41

Do you love to play games? If yes, then you know Mouse is the most essential part while playing games. That's why in this article we share a list of the [best zowie mouse](https://digibharata.com/best-zowie-mouse/) for you. Take a look check the price, availability, and customer reviews then buy according to your budget.
Kubernetes Config Map
Tags: kubernetes, containers, configmap
Published: 2021-04-18 05:14:20

Kubernetes ConfigMap resource is a piece of simple key-value pair information that can be passed to any application running on K8S.

Sample file to create config map on a running cluster:

```
apiVersion: v1
kind: ConfigMap
metadata:
  name: my-config-map #name of the config map
data:
  myKey1: myValue1
  myKey2: myValue2
```
Save this file as my-config-map.yaml and create config map on a cluster:
```
kubectl create -f my-config-map.yaml
 
```
Now, ref the values from config map inside a pod. 
Lets create a sample busybox pod. 
```
apiVersion: v1
kind: Pod
metadata:
  name: my-pod
spec:
  containers:
  - name: my-pod
    image: busybox
    command: ["sh", "-c", "echo $MY_VAR"]
    env:
    - name: MY_VAR
      valueFrom:
        configMapKeyRef:
          name: my-config-map 
          key: myKey1
```
Save this as my-pod.yaml and create a pod.
```
kubectl create -f my-pod.yaml
```
check the logs to see what is printed.
```
kubectl logs my-pod.   #myValue1
```
Hello people
Published: 2021-04-18 04:51:37

New member just saying hello....

I am a Medical doctor, which means i am hobbbyst in this matters. 

Few experiencie with small web apps and high level languages. 

I dont have a project to motivate myself with atm... but this need to code, itching my mind...

Low level language is what gives joy to me, so this time i am giving Rust a chance, as a modern option in this category
Setting up Tailwind CSS in Angular v11
Tags: angular, tailwindcss
Published: 2021-04-18 04:09:41

---
title: Setting up Tailwind CSS in Angular v11
published: true
description: 
tags: #angular #tailwindcss
//cover_image: https://direct_url_to_image.jpg
---

*Note: In the v12 release, Angular added support for Tailwind CSS. See tailwind official documentation on [how to install Tailwind CSS](https://tailwindcss.com/docs/installation) in Angular v12*

>Rapidly build modern websites without ever leaving your HTML. - Tailwind CSS

# Install Tailwind CSS

Open terminal and go to the Angular project directory and run 

```
npm install tailwindcss
```

Optionally, install Tailwind CSS plugins

```
npm install @tailwindcss/typography
npm install @tailwindcss/forms
```

# Configure Tailwind CSS

1. In the Angular project directory, create a Tailwind CSS configuration file name `tailwind.config.js`

2. Add the following configurations

```
module.exports = {
    prefix: '',
    purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
    darkMode: 'class',
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],
};
```

Add configuration for forms and typography plugins if the following Tailwind CSS plugins are installed

```
plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],
```

3. Open `styles.scss` file to import the 3 Tailwind CSS layers

```
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

# Try it out

Add the following to any components

```
<h1 class="text-4xl font-bold text-center text-blue-500">Hello World</h1>
```

Run `ng serve` and open browser on http://localhost:4200/

Using a utiliy-first frameworks like TailwindCSS can make your HTML files bloated to deal with this duplication and to keep your project maintainable, visit [Extracting Components](https://tailwindcss.com/docs/extracting-components) at [Tailwind CSS](https://tailwindcss.com/)

To see how I created a Authentication form using TailwindCSS visit link below

{% github queency-koh/content-projection no-readme %}
关于我的博客
Tags: blog
Published: 2021-04-18 03:45:13

听说大佬都应该有个自己的博客 [狗头]，那我也整一个来玩玩吧。本篇文章我就说下本博客的主要目的和一些主要内容。 本网站为个人性质的不以盈利为目的（当然如果你想给钱的话没问题）的主要是以记录和分享学习过程遇到的问题、经验总结、奇怪见闻、阅读笔记、有趣资源、小小科普和用于吹水的个人博客。博主是谁？博主的名为张文涛，在这鱼龙混杂充满未知的互联网里各种机缘巧合取得，这又是说来话长了，到底叫什么其实也不妨碍交流。

搭建博客有六个原因。

其一，前言也提到了，貌似大佬都应该有个自己的博客，这当然也不是说我就是大佬，对于真正的技术大佬来说我只是菜的不行的萌新的萌新，说我是萌新都有点抬高我了。通过搭建博客只是表明下我有个成为大佬的心而已，也使我能更好的朝着这个目标前进，同时使这个博客成为大家监督我的一个平台，以此来给我一定的外部压力，防止很快就咕咕咕了。

第二，就是我博客首页的那句话“信息唯有分享才有价值”，例如有一个作家，写了一本非常完美的书，但不出版，也不允许他人阅读，那这本书的价值何在，跟没写有什么区别。信息被创造的本质目的就是分享，不管是动物间的信息交流还是计算机间的数据交互，其目的都是如此，信息只有被尽可能多的人所获得了才能更好体现出他的价值，我这个博客也是这个目的，把我所得到的信息分享出来尽可能的体现它的价值。这一理念也是被21世纪的新“宗教”数据主义所推崇的。

可能到这里又会有人问，不是有微博、知乎、简书、CSDN之类的平台可以分享信息吗，为什么还要多此一举搭建一个博客？

是的，这些都是很好的信息分享平台，但却少了一种东西，那就是掌控感。

这就引出了其三，自己的东西更有掌控感。这就好比如‘房子明明可以租为什么还要买房子，我住租的房子不也是舒舒服服的吗？’ 可租的房子毕竟是别人家的，我并不能随心所欲的去改造它，还要遭受各种限制。我搭建博客也是以这样的想法的，博客是我自己的，我想怎么装饰我的网站就怎么装饰，我想用什么主题装就对了，有那里不满意了我就改它代码，不想搞了我就直接删库跑路。

第四，在搭建和维护博客的过程中，我可以学到许多新的知识，在交换友链和互相借鉴的过程中也能认识到更多的大佬，使自己的认识提升到一个新的水平。

第五，还是因为我的记性太烂了，学到的东西忘的块，get到的新操作几天后就不知道丢去哪了，也忘了我是在哪里get到这个新操作的。而写博客呢在自己忘了的时候还可以倒回来看看之前写的，重新找回记忆。

第六，就是我的文笔实在太烂了，看到这里也许你也发现一些表述都是比较僵硬且病句一连片逻辑都是狗屁不通的句子，也请你的谅解和指出我的错误，能力都是一个慢慢提升的过程的嘛。

当我在博客发布了什么教程类或资源分享类的文章后，我可能会将文章同步到知乎、简书之类的平台，因为在21世纪前期除了能源外最重要的财付就是流量了（自己的理解），我也想尝试一下能否打造自己的IP，当然也不指望能出名毕竟我还是这么菜。如果你想关注的话可以点击首页头像下面对应的平台。 好了，关于我的博客的介绍就到处为止了，非常感谢你能认真看到这里。在以后的文章中可能会因我现有认知水平的缺陷导致我说了一些幼稚或错误的话，所以也请大家多多指教。
49 Days of Ruby: Day 22 - Duck Typing
Tags: ruby
Published: 2021-04-18 03:00:15

---
title: 49 Days of Ruby: Day 22 - Duck Typing
published: true
description: Join us on a 49 day learning journey through Ruby!
series: 49 Days of Ruby
tags: #ruby
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9m73qaetuse3nm3y3it8.png
---

**Welcome to day 22 of the 49 Days of Ruby! 🎉**

If you have been reading about Ruby, you might have come across a term called *duck typing*. Today we are going to spend some time discussing this idea and how it pertains to your code.

## What is Duck Typing?

> If it walks like a duck, then it is a duck.

Have you heard that expression before? If so, that's pretty much duck typing!

Ruby is less concerned about the *type* of a thing, and more about what it does. *(We are going to cover types tomorrow!)*

Take a look at the following example:

```ruby
class Duck
  def walk
    puts "I'm walking"
  end
end

class Turkey
  def walk
    puts "I'm walking"
  end
end
```

Did you notice that both `Duck` and `Turkey` have a `#walk` method? Does that make a `Turkey` a `Duck`? Well, if we're following duck typing, then it really doesn't matter. As long as an Object responds to a method then that's all that really matters.

How do we check if it knows that method (or message, is another way of stating it)?

We can try the `#respond_to?` Ruby method, which does what it sounds like. It checks if an Object recognizes the message you are sending it. Continuing our example of a `Duck` and a `Turkey`:

```ruby
> Duck.respond_to?(:walk)

# => true

> Turkey.respond_to?(:walk)

# => true
```

They both know `#walk` so for all intents and purposes you can treat both the `Duck` and the `Turkey` as a `Duck`!

That's it for today! See you tomorrow as we discuss typing in Ruby.

**Come back tomorrow for the next installment of 49 Days of Ruby! You can join the conversation on Twitter with the hashtag [#49daysofruby](https://twitter.com/hashtag/49daysofruby).**
🤔 What really makes you a software developer?
Tags: discuss, watercooler, career, programming
Published: 2021-04-18 02:54:13

## Why this question? 😃

Lastly, I'm trying to enhance my personal brand, and as a result of that, I've also had to describe myself.

I had the temptation of present myself as a software developer, but some doubts seized me.

## What is in fact a software developer?

What makes you one?

How much time or experience do you need to be considered a software developer? 🤔

I'd like the incredible community of DEV to answer these questions and share knowledge, and opinions in the comments below 😌.
My stats 28 days after starting a Modified Version of 100 days of Code
Tags: 100daysofcode, programming, python, codenewbie
Published: 2021-04-18 02:46:11

As of today, April 17th, I am on day 28 and although it's been challenging, I am looking forward to the next 72 days.

### My Challenge for the 100 days
- Code at least for an hour a day

- Post content every day related to Python, SQL, or programming in general 

### Why am I doing this?
- I started writing articles somewhat consistently on Medium in October 2020. I want to be more consistent and build a productive habit

- Writing an article/ blog post helps me understand concepts better and drives me to learn new things. 

- Increasing online presence 

### My Stats when I started the challenge
- [Twitter](https://twitter.com/rahulbanerjee99)  - 48

-  [Hashnode](https://realpythonproject.hashnode.dev/series/daily-programming-content/)  - 9

-  [Dev.to](https://dev.to/rahulbanerjee99)  - 10

-  [Medium](https://medium.com/daily-programming-tips)  - 0 people following Publication, 330 people following me

-  [Wordpress Blog Email Subscribers](https://www.realpythonproject.com/newsletter/)  - 5


### My Current Stats (Day0 -> Day14 -> Day28)
- [Twitter](https://twitter.com/rahulbanerjee99)  - 48 -> 72 -> 146

-  [Hashnode](https://realpythonproject.hashnode.dev/series/daily-programming-content/)  - 9 -> 31 -> 31

-  [Dev.to](https://dev.to/rahulbanerjee99)  - 10 -> 89 -> 171

-  [Medium](https://medium.com/daily-programming-tips)  - 0 -> 10 -> 23 people following Publication, 330 -> 344 -> 362 people following me

-  [Wordpress Blog Email Subscribers](https://www.realpythonproject.com/newsletter/)  - 5 -> 9 -> 13

I plan to provide an update every 14 days so my next update will be on day 42 :) 

-----
-----
Connect with me

https://linktr.ee/rahul2699
Why Recursion?
Tags: programming, software, computerscience, recursion
Published: 2021-04-18 02:40:55

My girlfriend is studying computer science, and the latest topic she was learning was recursion. That's not the easiest thing to wrap a head around, so she asked me how I understood it. As I was trying to explain the concept, the following example emerged. Please enjoy.

The standard problem to introduce recursion is to calculate a factorial. Let me give a refresher before diving further - a factorial of a number is a product of all numbers before that number and the number itself. For example, a factorial of 4 is 1 * 2 * 3 * 4 = 24.

So, how do you solve it with a code?

For a specific case of 4, we can create a bunch of functions like this.

```javascript
const getFactorialOne = () => {
  return 1
}

const getFactorialTwo = () => {
  return 2 * getFactorialOne()
}

const getFactorialThree = () => {
  return 3 * getFactorialTwo()
}

const getFactorialFour = () => {
  return 4 * getFactorialThree()
}

const factorialFour = getFactorialFour()
```

We can see the pattern and can implement the same logic for other numbers. But, maybe, there is a better way?

It is clear that all functions besides the first one do the same operation - multiply a current number by the factorial of the current number minus 1. Therefore, we can replace all functions with a single one that will accept a number, and it will call itself with the passed number minus 1 like this.

```javascript
const getFactorialOne = () => {
  return 1
}

const getFactorialAllOthers = (num) => {
  return num * getFactorialAllOthers(num - 1)
}
```
That would be calling itself infinitely. Let's fix that by stopping the function from calling itself when the num reaches 1. This condition is called "base-case".

```javascript
const getFactorialOne = () => {
  return 1
}

const getFactorialAllOthers = (num) => {
  if (num === 1) {
    return getFactorialOne()
  }
  return num * getFactorialAllOthers(num - 1)
}
```
And simplify it a bit more by returning 1 when num is 1.

```javascript
const getFactorial = (num) => {
  if (num === 1) {
    return 1
  }
  return num * getFactorial(num - 1)
}
```
As a result, we can write only one function to rule them all. Ain't it just beautiful?!

> image borrowed from [GeekForGeeks](https://www.geeksforgeeks.org/program-for-factorial-of-a-number/)
Your first Angular app
Tags: angular
Published: 2021-04-18 02:23:02

---
title: Your first Angular app
published: true
description: 
tags: #angular
//cover_image: https://direct_url_to_image.jpg
---

# Install the Angular CLI

Angular CLI is use to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

To install the Angular CLI, open a terminal window and run the following command:

```
npm install -g @angular/cli
```

# Create an initial starter application

Run the CLI command `ng new` and provide the name of the project and `--routing` attribute to create application routing module, called AppRoutingModule for common routing tasks.

```
ng new budgetarian-app --routing
```

# Run the application

Go to the folder and run `ng serve`

```
cd budgetarian-app
ng serve
```

`ng serve` command will build the app and starts the development server

Open browser on `http://localhost:4200/`

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvrpvoasegwg80ybd511.png)
I ❤️ Kanban Boards!
Tags: sideprojects, javascript, react, webdev
Published: 2021-04-18 02:02:27

As the title suggests, I love Kanban Boards. For my first side project to test my front-end web development skills, I decided that I want to build a tool I could use to be my task manager. I already use tools like [Notion](https://notion.so) for my task management and it's incredible. But this isn't anywhere near that, although it's **heavily** inspired by it 😃. 

I'll use this blog post (might make it a series) to update logs of my progress on the project. 

## devLog[0]
**The Stack**
Since this will start as a front-end project only, I will only list front-end frameworks:
- *ReactJS* (Create React App) as the front-end framework. Why not any other front-end framework? Because shut up and use what you like 😃!
- *Styled Components* (to generate/build some kind of a design system that I hope to extend in the future)  

*This is all for now. The list will grow when I can think of even more tools to use for this task*.  

If you'd like to follow my progress on this project: follow me on [Twitter](https://twitter.com/rknsama) or on [Github](https://github.com/kasonde/kanban_board).  

Be kind ❤️