teleren/devto huggingface dataset:
Get Rid of Firebase Development Mode Warning in Vue.js
Tags: firebase, vuejs, beginners, programming
Published: 2022-03-07 16:05:21

---
canonical_url: https://softauthor.com/get-rid-of-firebase-development-mode-warning-in-vue-js-app/
---

When you’re using Firebase in the Vue JS app, you’ll probably get a warning similar to the screenshot below.

![alt text](https://softauthor.com/wp-content/uploads/2020/08/it-looks-like-youre-using-the-development-build-of-the-firebase-js-sdk.png)

This will happen when you import Firebase anywhere in the project using the following code:

```JavaScript
import firebase from "firebase";
```

When you use the above code, it actually imports all of the firebase products such as Authentication, Storage, etc, available to use right off the bat, even the ones that you do not intend to use.

This can be inefficient as it will add extra Javascript code to the project that is not needed.

Let see how to get rid of this warning.

Instead, you can import only the Firebase service that you intend to use as you need them.

So, in your main.js file replace the following code:

From:

```JavaScript
import firebase from "firebase";
```

To:

```JavaScript
import firebase from "firebase/app";
```

Then, you can add the two lines mentioned in the warning message to your Vue component.

Lets say you’ve a component name Signup.vue and intend to use Firebase Authentication in it.

Your import statement should look like this:

```JavaScript
import firebase from "firebase/app";
import "firebase/auth";
```

This will get rid of the warning.
APIs that you should use once in your lifetime 😯
Tags: api, beginners, javascript, webdev
Published: 2022-03-07 16:05:14

1. Auth0
2. OpenAI
3. Foxit
4. Hugging Face
5. Coil
6. Twilio
7. Radar
8. Mapbox
9. Stripe
10. Deepgram

Pls Add more and/or follow @keshav44483499
Web3 Technologies {Name List}
Tags: webdev, productivity, web3, beginners
Published: 2022-03-07 16:01:51

1. Bitcoin
2. Cosmos
3. Polkadot
4. Matic(Polygon)
5. DeSo
6. Solana
7. Ethereum
8. IPFS/Filecoin
9. Cardano
10. DFINITY Internet Computer
11. Stacks
12. NEAR
13. Hedera Hashgraph

Feel free to add more and follow @keshav44483499 🐱‍🏍
Appendix: Reliability (Workload Architecture) - AWS Well-Architected Framework Study Guide
Published: 2022-03-07 15:59:06

[Return to Well-Architected Framework Guide](https://dev.to/aidutcher/aws-well-architected-framework-study-guide-introduction-fjg)

[Appendix: Reliability](https://docs.aws.amazon.com/wellarchitected/latest/framework/a-reliability.html)

**How do you design your workload service architecture?**

- Choose how to segment your workload
- Build services focused on specific business domains and functionality
- Provide service contracts per API

**How do you design interactions in a distributed system to prevent failures?**

- Identify which kind of distributed system is required
- Implement loosely coupled dependencies
- Make all responses idempotent
- Do constant work

**How do you design interactions in a distributed system to mitigate or withstand failures?**

- Implement graceful degradation to transform applicable hard dependencies into soft dependencies
- Throttle requests
- Control and limit retry calls
- Fail fast and limit queues
- Set client timeouts
- Make services stateless where possible
- Implement emergency levers

[Return to Well-Architected Framework Guide](https://dev.to/aidutcher/aws-well-architected-framework-study-guide-introduction-fjg)
Empleos en Data y Analytics LATAM — Mar 2022 - I
Published: 2022-03-07 15:57:18

Te compartimos las ofertas laborales del mes para áreas de Data, Analytics y Cloud 👨‍💻👩‍💻.

✅[Data Analyst- Willis Towers Watson (Perú, Lima)]
(https://pe.indeed.com/viewjob?jk=52af83294920626a&tk=1ftih62ubu4ds800&from=serp&vjs=3)
✅[Data Engineer- Optum Global Advantage (Colombia, Bogotá)]
(https://co.indeed.com/viewjob?jk=9720a004bf8e57d0&tk=1ftih73bdu4ik800&from=serp&vjs=3)
✅[Data Scientist - Cargill (Ecuador, Provincia del Guayas)]
(https://ec.indeed.com/viewjob?jk=2ec55c2fda45be8e&tk=1ftih8ds3u1np800&from=serp&vjs=3)
✅[Machine Learning Analyst - McKinsey & Company (Chile, Santiago de Chile)]
(https://cl.indeed.com/viewjob?jk=1b045ff2cb481a41&tk=1ftihbrbun55f801&from=serp&vjs=3)
✅[Data Analyst - BorgWarner (Mexico, Irapuato)]
(https://mx.indeed.com/ver-empleo?jk=60b205ddf142076a&tk=1fsjrk3uqt493800&from=serp&vjs=3)
✅[Data Engineer- Applaudo Studios (Bolivia, La Paz)]
(https://www.linkedin.com/jobs/view/2930486892/?eBP=NotAvailableFromMidTier&recommendedFlavor=ACTIVELY_HIRING_COMPANY&refId=XibX5tFnKW%2FHcIINt8Qubg%3D%3D&trackingId=W1EYOww4%2F77KLYApR1uVAw%3D%3D&trk=flagship3_search_srp_jobs)
✅[Data Scientist - Equifax (Argentina, Buenos Aires)]
(https://ar.indeed.com/viewjob?jk=0818b46d96a31592&tk=1ftihg36su46a800&from=serp&vjs=3)
✅[Machine Learning Analyst - FullStack Labs (Venezuela, Caracas)]
(https://ve.indeed.com/viewjob?jk=565116ddcf9bb974&tk=1ftihh74uu2fm800&from=serp&vjs=3)


Aprende, aplica y crece en proyectos de Data y Analytics en Cloud.

Visita nuestra página:
👉🌐 datahack.la
Simple Diary/Note App in Django with User Login
Published: 2022-03-07 15:53:59


This is a simple note/diary app which allow you to create user account and write notes. 

## Sample Pictures


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



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

[Find this on Github](https://github.com/rahul-kumar-bly/Simple-Note-WebApp-In-Django)
Reat Context Api Project
Tags: javascript, react, webdev, beginners
Published: 2022-03-07 15:53:01

[React Context Simplest explanation with project](https://youtu.be/B4OFMoiRKUw)
Hey guys if u are learning React do checkout my video and React playlist as well share with all ur friends :).
[github repo Link](https://github.com/47karimasif/bills-app)
[Hosted Project Link](https://bills-app.vercel.app/)
Where to find Developers!? 👇
Tags: beginners, javascript
Published: 2022-03-07 15:52:53

1. Dev.to
2. Twitter
3. Github
4. Reddit
5. Devfolio
6. Zhihu
7. Instagram
8. HackerEarth
9. Tiktok
10. Devpost
11. Baidu Tieba
12. Facebook
13. GitLab
14. Quora
15. Stack Overflow
16. LinkedIn
17. Bitbucket


Will Appreciate if you add some more :))
Appendix: Reliability (Foundations) - AWS Well-Architected Framework Study Guide
Published: 2022-03-07 15:52:46

[Return to Well-Architected Framework Guide](https://dev.to/aidutcher/aws-well-architected-framework-study-guide-introduction-fjg)

[Appendix: Reliability](https://docs.aws.amazon.com/wellarchitected/latest/framework/a-reliability.html)

**How do you manage service quotas and constraints?**

- Be aware of service quotas and constraints
- Manage service quotas across accounts and regions
- Accommodate fixed service quotas and constraints through architecture
- Monitor and manage quotas
- Automate quota management
- Ensure that a sufficient gap exists between the current quotas and the maximum usage to accommodate failover

**How do you plan your network topology?**

- Use highly available network connectivity for your workload public endpoints
- Provision redundant connectivity between private networks in the cloud and on-premises environments
- Ensure IP subnet allocation accounts for expansion and availability
- Prefer hub-and-spoke topologies over many-to-many mesh
- Enforce non-overlapping private IP address ranges in all private address spaces where they are connected

[Return to Well-Architected Framework Guide](https://dev.to/aidutcher/aws-well-architected-framework-study-guide-introduction-fjg)
Avoid multiple API call on Tab switching in short time span
Tags: react, webdev, javascript, developers
Published: 2022-03-07 15:47:34

I have pure component Tabs and rendering 3 child Tab component as a children and every child tab have individual API call integrated to  load data into the Grid, So there is server timeout if someone switch tab multiple time in short time span. So can you please suggest best way to reduce API calls.
Plain text to discord emojis!
Published: 2022-03-07 15:45:16

This simple Python code will transfer any text to discord emojis.

**Type your link**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etdf8owgpdl5a0ncixyf.png)
 
**Paste in a discord chat**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9paxvyt3mmb38lnsjt5b.png)

and you are ready to go!


## **_Source code:_** 
```
def Convert_Link_To_Discord_Letters():
    letters = {

    #Small letters:

     'a' : ':regional_indicator_a:' , 'b' : ':regional_indicator_b:' , 'c' : ':regional_indicator_c:', 
     'd' : ':regional_indicator_d:' , 'e' : ':regional_indicator_e:' , 'f' : ':regional_indicator_f:', 
     'g' : ':regional_indicator_g:' , 'h' : ':regional_indicator_h:' , 'i' : ':regional_indicator_i:',
     'j' : ':regional_indicator_j:' , 'k' : ':regional_indicator_k:' , 'l' : ':regional_indicator_l:',
     'm' : ':regional_indicator_m:' , 'n' : ':regional_indicator_n:' , 'o' : ':regional_indicator_o:',
     'p' : ':regional_indicator_p:' , 'q' : ':regional_indicator_q:' , 'r' : ':regional_indicator_r:',
     's' : ':regional_indicator_s:' , 't' : ':regional_indicator_t:' , 'u' : ':regional_indicator_u:',
     'v' : ':regional_indicator_v:' , 'w' : ':regional_indicator_w:' , 'x' : ':regional_indicator_x:',
     'y' : ':regional_indicator_y:' , 'z' : ':regional_indicator_z:' , 

    #Numbers: 

     '1' : ':one:' , '2' : ':two:' , '3' : ':three:' , '4' : ':four:' , '5' : ':five:' ,
     '6' : ':six:' , '7' : ':seven:' , '8' : ':eight:' , '9' : ':nine:' , '10' : ':keycap_ten:' , '0' : ':zero:' , 

    #Symbols:

     '/' : '/' , '.' : '.' , "'" : "'" , '"' : '"' , ' ' : '  ' , "#" : '#' , '@' : '@' , '*' : '*' ,
     '-' : '-' , '_' : '_' , '(' : '(' , ')' : ')' , '=' : '=' , '+' : '+', '!' : '!' , '?' : '?',
     '<' : '<' , '>' : '>' , '{' : '{' , '[' : '[' , '}' : '}' , ']' : ']' , ';' : ';' , ':' : ':'}
    

    link = input('Whats your link: ')
    return " ".join(letters[x] for x in link.lower() if x in letters)
```


Thank you very much for you attention.
you can follow me on GitHub for software engineering & web development content.
Or follow me here for simple codes & algorithms in C#, JS, and python.
CSSBattle | #12 Wiggly Moustache
Tags: css, cssbattle, challenge, wigglymoustache
Published: 2022-03-07 15:44:41

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #12 Wiggly Moustache](https://cssbattle.dev/play/12) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Wiggly Moustache Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd8vry7u93p7jpbm8p83.png)

---

> #### Solution:

```html
<div class="container">
  <div class="wiggle left">
    <div class="circular-dot"></div>
  </div>
  <div class="wiggle middle">
  </div>
  <div class="wiggle right">
  	<div class="circular-dot"></div>
  </div>
</div>

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    background: #F5D6B4;
    position: relative;
  }
  .wiggle {
    width: 100px;
    height: 50px;
    border: 20px solid #D86F45;
    position: absolute;
    top: 50%;
    left: 50%;    
  }
  .left, .right {
    border-bottom-left-radius: 100px;    
    border-bottom-right-radius: 100px;
    border-top: 0;
  }
  .left {
   transform: translate(calc(-50% + -80px), calc(-50% + 25px));
  }
  .middle {
    border-top-left-radius: 100px;    
    border-top-right-radius: 100px;
    border-bottom: 0;
    transform: translate(-50%, calc(-50% + -25px));
  }
  .right {
   transform: translate(calc(-50% + 80px), calc(-50% + 25px));
  }
  .circular-dot {
    background: #D86F45;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
  }
  .left .circular-dot {
    left: 0;
    transform: translate(calc(-50% + -10px), -50%);
  }
  .right .circular-dot {
    right: 0;
    transform: translate(calc(-50% + 30px), -50%);
  }
</style>
```

---

> #### Key Takeaway(s):
- focus on creating the wiggle first using border-radius properties
- replicate the same wiggle 2 more times and change their positions using transform properties

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Adding PostgreSQL to Laragon
Tags: php, webdev, postgres, windows
Published: 2022-03-07 15:36:16

## Downloading The PostgreSQL Binary

You can find any version you want to install at [enterprisedb.com/download-postgresql-binaries](https://www.enterprisedb.com/download-postgresql-binaries) and make sure it support your windows machine.

## Extract and Move The Binary to Laragon Directory

Let's say I have downloaded the `postgresql-12.10-1-windows-x64-binaries.zip`. Extract it and it contains a single folder named `pgsql`. Move this `pgsql` folder into `C:\laragon\bin\postgresql` (You may have to create the `postgresql` folder first) and then rename it into the corresponding version you have downloaded or simply just name it after the downloaded zip name.

![postgresql laragon directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yglbfkwjk60ur5t1a5av.png)

## Starting The PostgreSQL Server

Restart the Laragon and now the PostgreSQL menu should be available and you could start it right away.

![postgresql laragon menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yeeprba5nr1dpwjgimh.png)

## PHP and Laravel Setup

If you are using PHP or Laravel, then make sure to enable the `pdo_pgsql` extension.

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

and the laravel environment for postgres database as default:

```
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=postgres
DB_USERNAME=postgres
DB_PASSWORD=root
``` 

## Managing using PgAdmin

PgAdmin is also available for you to manage a PostgreSQL database, just like you use PhpMyAdmin for MySQL. Make sure postgresql run first and click on "PgAdmin" menu to start.

Enter "root" for the admin password when prompted to login.

You need to create a connection to the postgresql in the laragon, so here is the setup as example:

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqnxyrqxo477gzkf4uvj.png)
 
After you save it, it should connect the pgadmin to the postgresql server and you can start to create a database.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gkliueogedcjkdgyazu.png)
 
## Managing using Adminer

If you're using Laragon full installation, `adminer` could also works for you. Adminer could manage different types of rdbms like `MySQL`, `SQLite`, and `PostgreSQL`, and some other type of databases as well like `Oracle`, `MS SQL`, `Mongodb`, `Elasticsearch` but they still in development phase.

Make sure your laragon apache is started and just go to [http://localhost/adminer/](http://localhost/adminer/).
"Oh My ZSH!"
Tags: tutorial, zsh, productivity, bash
Published: 2022-03-07 15:35:22

# zsh
Zsh é um shell projetado para uso interativo, embora também seja uma poderosa linguagem de script.

# "Oh My ZSH!"
Agora vamos utilizar o Oh my Zsh para gerenciar as configurações do Zsh, neste caso utilizaremos as seguintes:

o spaceship-prompt: Spaceship é um prompt Zsh minimalista, poderoso e extremamente personalizável.

zsh-autosuggestions: Ele sugere comandos conforme você digita com base no histórico e nas conclusões.


zsh-syntax-highlighting: Este pacote fornece realce de sintaxe para o shell zsh. Ele permite o destaque de comandos enquanto eles são digitados em um prompt zsh em um terminal interativo. Isso ajuda na revisão de comandos antes de executá-los, principalmente na captura de erros de sintaxe.



# Clone os repositórios:
Spaceship

```git clone https://github.com/spaceship-prompt/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt" --depth=1```

Movendo para o diretório de temas personalizados oh-my-zsh:

```ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"```

Zsh-autosuggestions

```git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions```

Zsh-sintax-highlighting

```git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting```

# Ajustando as configurações
Acesse o arquivo de configuração do zsh para aplicar as nossas alterações:
```nano ~/.zshrc```

Altere as configurações para ZSH_THEME="spaceship", role até encontrar a sessão de plugins, a principio apenas o Git está configurado, então modifique para plugins=(git zsh-autosuggestions zsh-syntax-highlighting) e Crtl+o para salvar.

![image](https://user-images.githubusercontent.com/91998391/156454551-0180d670-7e9a-47b6-97c1-ace8738d2402.png)
Como deixar os testes Jest mais rápidos?
Tags: jest, performance, portuguese
Published: 2022-03-07 15:32:16

Este é um post rápido só pq não encontrei nenhum conteúdo sobre isso em ptbr. Referências em inglês no final do artigo. Dúvidas (que eu espero que vc tenha, pq artigo curto e escrito em 10 minutos, né?) manda no comentário.

## O problem resumido:

1. O Jest usa CommonJS em vez de ECMAScript Modules. Isso significa _[várias coisas e também que]_ que ele carrega toda a árvore de dependências (as importações) antes de rodar os testes.
2. É bem provável que o seu projeto use "barrel files" ou "arquivos barril(?)". Esses arquivos exportam vários outros arquivos. Ou seja, pode ser que a sua aplicação esteja sendo importada por completo nos seus testes unitários. Ê, beleza.

## A solução resumida:
1. Evite _barrel files_;
2. Caso prefira manter os tais _barrel files_, faça o mock usando _mock factories_. _Automock_ não funciona, _spy_ não funciona, precisa ser _mock factory_.
3. Centralizar todas as suas importações em alguma injeção de dependências (recomendo o próprio React Context) é outra possibilidade que também faz muito sentido: no contexto da aplicação você injeta as implementações concretas reais e no context só coloca uns fakes. Essa é a minha opção primária, mas é um custo que só compensa em aplicações (bem) grandes.

Referências em inglês:
- https://github.com/facebook/jest/issues/11234
- https://stackoverflow.com/questions/58490472/barrel-files-webpack-and-jest
- https://blog.codecentric.de/en/2021/11/javascript-test-performance-getting-the-best-out-of-jest/
I want to be a/an 🤔 => (options)
Tags: beginners, codenewbie, webdev, productivity
Published: 2022-03-07 15:29:48

1. Data Scientist/ Data Engineer
2. Mobile Developer
3. Security Engineer
4. Back-End Developer
5. Web3 Developer
6. Information Technology (IT)
7. QA/Test Developer
8. Marketing or sales professional
9. Teacher/Trainer
10. DevOps/Site Reliability Engineer
11. Full-Stack Developer
12. Developer Advocate/Evangelist
13. Engineering Manager
14. Front-End Developer
15. Product Manager
16. UX/UI Designer
17. Game Developer
18. Graphic Designer
19. Senior Executive(C-Suite, VP, etc)

Feel free to add more and let's be friends @[keshav44483499](https://twitter.com/keshav44483499) 🤗
How to solve "secretOrPrivateKey must have a value" in Node.js
Tags: javascript, node, express, nest
Published: 2022-03-07 15:21:22


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

I was writing an awesome stuff with Express today and I ran into an error, after solving it (thanks to some wonderful geeks on Stackoverflow) I thought it best to write about it just incase anyone runs into this same error in future this article will kind them on how to solve it.

### what is the error and why did it occur?

I installed the dotenv dependency with the aim of storing my json web token secret inside it so as to avoid pushing a secret pass to a Github public repo. 

Initially, I had put the connection pass of my MongoDB database in it with the name _DB_DETAILS_ and I wanted to add my token secret in the next line. Well, I did just that and boooom! the terminal threw me an error warning at run time.

> UnhandledPromiseRejectionWarning: Error: secretOrPrivateKey must have a value
    at Object.module.exports [as sign] (C:\Users\USER\Desktop\coding project\database-connect\node_modules\jsonwebtoken\sign.js:107:20)


### How did I solve this?

You'd be amazed! I only had to replace `process.env.TOKEN_SECRET` to `${process.env.TOKEN_SECRET}` using ES6 String Literals.

Yes, that worked for me. Go ahead and try it out.


### explicitly configure **dotenv** in NestJS to solve error

Ooooh, oh! Since NestJS uses **dotenv** under the hood, you could easily use **ConfigService** or configure dotenv by changing some files.

`jwt.strategy.ts`

```
import * as dotenv from 'dotenv';
dotenv.config();

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      secretOrKey: process.env.TOKEN_SECRET,
    });
  }
}
```

`auth.module.ts`


```

import * as dotenv from 'dotenv';
dotenv.config();

@Module({
  imports: [
    JwtModule.register({
      secret: process.env.JWT_SECRET,
    }),
  ],
})
```

Let me know in the comments if it works for you!
AI Tweets Analytics 🤖 & Wikipedia 📖 with Azure 🐱‍💻
Tags: azuretrialhack, azure, ai, react
Published: 2022-03-07 15:19:13

### Instructions : 
Ai tweets analytics 🧐

### Overview of My Submission:😃

It brings together the last 1 - 10 tweets of a Twitter user and analyzes the emotion of these tweets.

Wikipedia also provides links to us.
I have said briefly about this.

Check out the website to find out more, the website link is just below 😁

### Submission Category:🎊

**AI Aces :** tweets analytics 🧐, with azure ai services  


### Technologies Used:🛠

**Frontend :**

- React JS
- MUI
- Chart JS
- Swiper JS

**Backend :**

- Node JS
- Express JS
- Twitter API with Elevated access
- Azure Cognitive Service for Language ( AI )


### Link to Code:✨

**GitHub**

{% github https://github.com/jacksonkasi0/ai-tweets-analytics %}


### Website  Link:🔥

[Ai tweets analytics](https://aitweets.azurewebsites.net)

### Additional Resources / Info

{% youtube https://www.youtube.com/watch?v=yZ38id-3FIE&feature=youtu.be %}

### NOTE:👀

Since I have used the free system, the public may not use the 'Azure ai service' a few times when you use the website.
Nothing to worry about.
After a couple of minutes the action film will start again.

---

Please post your comments about this.
Your comments will point out the flaws in me and make me happy 😊😊😊