teleren/devto huggingface dataset:
TwilioHackathon - Video Chat app using Gatsby and twilio-2
Tags: twiliohackathon, gatsby, react, webdev
Published: 2020-04-15 15:32:43

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2qm3vrpxoampamt9b4jp.jpeg)

Welcome to part-2 of the series. We will continue our journey to build a simple video chat app with twilio api, for the dev.to hackathon.

We had logged into the twilio dashboard in part-1. Now, click on the three dots on the left menu as in the screenshot below.

![Three dots](https://cdn-images-1.medium.com/max/2880/1*alOjM3drOFzNKT9mtsEetw.png)*Three dots*

Next, click on **Programmable Video** in the menu.

![Programmable Video](https://cdn-images-1.medium.com/max/2880/1*pNFHHNKVfK1KgRIEP0WXdw.png)*Programmable Video*

In the next screen we have to click on **Show API Credentials** link.

![Show API Credentials](https://cdn-images-1.medium.com/max/2880/1*g6QE7GGJSTTP-giyFQBuKQ.png)*Show API Credentials*

From the next page note down your **ACCOUNT SID** and **AUTH TOKEN**.

![Credentials](https://cdn-images-1.medium.com/max/2880/1*BEkeM0iVLCIpXefR9EGdQg.png)*Credentials*

Now, time to put both the secrets in a .env file. Create a .env file in the root directory and put **ACCOUNT SID** and **AUTH TOKEN** into, **TWILIO_ACC_SID** and **TWILIO_AUTH_TOKEN** variables.

![.env](https://cdn-images-1.medium.com/max/2880/1*c1NmRmLF9WeNURxVgfLXtw.png)*.env*

Then click on **Tools** in the left menu.

![Tools](https://cdn-images-1.medium.com/max/2880/1*-d26Z1Pwwr2boFjWRLxUWw.png)*Tools*

After that click on the **API Keys** sub-menu link. Next, we have to click on **Create new API Key** button.

![API Keys](https://cdn-images-1.medium.com/max/2880/1*XC8zdoeZkq1ID-utHkhigw.png)*API Keys*

In the next screen, we have to give the API key a name and then click on **Create API Key** button.

![Name](https://cdn-images-1.medium.com/max/2880/1*UdfAboLSHU0dqrkqOeWdoQ.png)*Name*

After that in the next screen, we will be shown the SID and SECRET. We need to note them both.

![Secret](https://cdn-images-1.medium.com/max/2880/1*sIUJwoIAcMKQy_iQyy5nQQ.png)*Secret*

Then click on the **checkbox** and the **Done** button.

![Checkbox](https://cdn-images-1.medium.com/max/2880/1*rTzq0zSMAbVO7dj6Mu23jw.png)*Checkbox*

After that in the next screen our secret won’t be shown. And this means our API Keys are saved.

![Saved](https://cdn-images-1.medium.com/max/2880/1*jz_pOpaN7vKz8uf_c94gww.png)*Saved*

Next, again go to the .env file and save these two variables.

![.env](https://cdn-images-1.medium.com/max/2880/1*Sa8YMcm0rt18wNSXzscdxw.png)*.env*

The settings of API keys took a lot of time, so we will start with twilio functions in the next part. 

You can also find the code for this project in [this](https://github.com/nabendu82/SimpleVideoApp) github link.
Boosted Apps: Glitch Apps with more power!
Tags: showdev
Published: 2020-04-15 15:11:42

For years users have asked how they can support [Glitch](https://glitch.com/?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev) and how they can get more power for their apps. We've heard you loud and clear! Today we're excited to introduce [Boosted Apps](https://glitch.com/pricing?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev), which have all the goodness of Glitch but with more power. I’m going to share what Boosted Apps are and which of my apps I chose to boost. 

![Boosted details](https://dev-to-uploads.s3.amazonaws.com/i/vcyg02hin9828ppvu0a3.png)

## What are Boosted Apps?
[Boosted Apps](https://glitch.com/pricing?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev) are a paid subscription feature that allow you to grant up to 5 apps extra power in memory, space, rate limits, and uptime. 
- Keep your apps awake 24/7 (usually Glitch apps go to sleep after 5 minutes)
- No rate limits, so if your app becomes super popular it can handle the traffic
- Extra memory, so memory hungry apps (I’m looking at you Webpack) work faster and better
- More disk space, which makes it easier to run non-Node apps on Glitch such as Python and Go. Or working with huge data sets. 

## What I Boosted
I was super excited to test Boosted Apps because there are a couple of apps I’ve built on Glitch to test that don’t work properly without 24/7 uptime.

The first app I boosted was my [portfolio](https://dev.to/glitch/migrating-my-gatsby-site-to-glitch-5gca). I wanted visitors to see it right away rather than hitting a “waking up” screen. It also uses Webpack when I’m developing it and it’s much faster when boosted. 

The second was my Twitter Bot, [accessible-ascii](https://glitch.com/~accessible-ascii?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev), which generates an image with a caption for ascii memes. Before boosting it didn’t work most of the time. The reason why is that Twitter bots like this need to watch Twitter for replies. It couldn’t do that when asleep. Now it's watching Twitter 24/7 so it can always reply. 

The third was my [Discord Bot starter](https://glitch.com/~starter-discord?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev), which works in a similar way as the Twitter bot. It's now awake and ready to talk all the time. 

The fourth was an App where I'm currently playing around with [Vale](https://errata-ai.github.io/vale/config/), a prose linter written in Go. I needed to unpack some larger files and so it was very useful to have the extra space.

What will my fifth one be? I'm not sure yet but I'm excited to build it. 

## What Will You Boost?
We've seen our earliest subscribers boost everything from weather bots to crop monitoring applications. If you're interested in building and boosting apps on Glitch, go [here](https://glitch.com/pricing?utm_medium=weblink&utm_source=dev.to&utm_campaign=blog&utm_content=dev). We'd love to see what you make so share in the comments or tweet us @[glitchdevs](https://twitter.com/glitchdevs).
Integrando Jenkins e Gitlab
Tags: devops, jenkins, gitlab
Published: 2020-04-15 15:10:30

Automatizar certas tarefas fará sua vida ser muito mais prática e produtiva. Um exemplo bom de tarefas que DEVEM ser automatizadas é o deploy.

Talvez você ainda não tenha os `stages` ideais para fazer a build e publicar em produção de forma automática, mas isso não pode te impedir de automatizar os ambientes de desenvolvimento e homologação, por exemplo.

Se você já tem tarefas no Jenkins e usa o GitLab, isso pode ser feito de uma forma bem simples e rápida:

## Configuração Jenkins

Vamos precisar de um token para a autenticação acontecer, acesse a configuração de um usuário que tenha permissão no seus jobs. Algo como:  `http://LINK_JENKINS/user/admin/configure`

Nesta página você poderá administrar os tokens.

![Administração de Usuário no Jenkins - Input de criação de Token](https://dev-to-uploads.s3.amazonaws.com/i/8ghaee1xyhsalqtusl4i.png)

Agora que temos o token e usuário em mãos, só precisamos configurar o projeto lá no GitLab.

## Configuração gitlab

No gitlab, acesse seu projeto e vá no Menu `Configurações > Integrações`.

Nesta tela você poderá definir integrações de plugins que estão configuradas no seu Jenkins e também cadastrar Hooks manuais, como faremos.

No meu caso, quero que quando houver Merge Requests com uma branch específica, o script de deploy seja executado. Veja a imagem abaixo:

![Configuração de Webhook de um projeto no GitLab](https://dev-to-uploads.s3.amazonaws.com/i/7t404qhxtb7cdqxvybto.png)

Seu link deverá ser a combinação de um usuário, token e o Job do Jenkins: `http://USER:TOKEN@LINK_JENKINS/view/Fronted/job/Frontend/build`

Nesse caso, `view/Fronted/job/Frontend/build` é um atalho para meu Job. Também pode ser o link direto do Job: `/job/NOME/build`.

Isso é o suficiente para as rotinas acontecerem automaticamente. Claro que é uma configuração básica mas poderá simplificar um pouco sua vida.

Até a próxima.

Créditos da capa: https://letztest.blogspot.com/2017/09/how-to-integrate-jenkins-and-gitlab.html
Configurar YARN en tus proyectos de Angular - VIDEO
Tags: angular, development, video
Published: 2020-04-15 15:09:50

---
published: true
title: "Configurar YARN en tus proyectos de Angular - VIDEO"
cover_image: "https://raw.githubusercontent.com/ruslanguns/my-dev-articles/master/blog-posts/configurar-yarn-en-tus-proyectos-de-angular/assets/cover_image.png"
description: "Aprenderás cómo configurar Yarn en tus proyectos de Angular"
tags: angular, angular, development, video
series:
canonical_url:
---

Voy a enseñarte a configurar Yarn en tus proyectos de Angular y qué mejor que a través de un vídeo de Youtube.

[Angular](https://angular.io) es un framework para desarrollo de aplicaciones basado en Typescript y mantenido por la comunidad de Google y utilizado por muchas empresas en el sector tecnológico sobre todo para soluciones empresariales robustas, confiables y con gran performance.

[Yarn](https://https://classic.yarnpkg.com/) es un gestor de paquetes de NodeJS, super rápido, que te permitirá usar proyectos como de JavaScript o TypeScript con otros programadores de una manera eficiente y segura.

{% youtube WmwNuQ7boAI %}

## Conclusión

Espero que te haya gustado el vídeo, si tienes alguna pregunta por favor no dudes de escribírmela en los comentarios, estaré animado de conocer tus opiniones al respecto.

Ya lo sabes, no olvides suscribirte, darle me gusta y compartir este artículo o mi vídeo en tus redes sociales para contribuir conmigo.

## ¿Has encontrado un error en mi artículo?

Si has encontrado un error tipográfico, expresión, referencia o cualquier cosa que debería mejorar y que debe ser actualizado en este post, puedes hacer un fork de [mi repositorio][repositorio] y enviarme un Pull Request con la corrección, o bien, en lugar de hacer un comentario, ruego me lo reportes en [la sección de issues en el repositorio][issues] de mis artículos.

## Más artículos de Ruslán González

{% link https://dev.to/ruslangonzalez/argumentos-y-variables-de-entorno-en-docker-j9o %}{% link https://dev.to/ruslangonzalez/crear-capturas-del-codigo-desde-visual-studio-code-con-codesnap-13hb %}

<!-- TAGGED LINKS -->
[alpine_images]: https://hub.docker.com/_/alpine
[docker-compose-variables]: https://docs.docker.com/compose/environment-variables/
[docker-docs-arg]: https://docs.docker.com/engine/reference/builder/#arg
[docker-hub-mysql]: https://hub.docker.com/_/mysql
[wiki-env]: https://en.wikipedia.org/wiki/Environment_variable
[wiki-arg]: https://es.wikipedia.org/wiki/Argumento_(inform%C3%A1tica)
<!-- images -->
[docker2]: https://raw.githubusercontent.com/ruslanguns/my-dev-articles/master/blog-posts/docker-arg-y-variables-de-entorno/assets/docker2.jpg "Imagen de consola de docker"
<!-- Repositorio -->
[issues]: https://github.com/ruslanguns/my-dev-articles/issues
[repositorio]: https://github.com/ruslanguns/my-dev-articles
[code-repo]: https://github.com/ruslanguns/online-resources/tree/master/articles/docker-arg-y-variables-de-entorno
Creating a user with limited privileges in Postgres
Tags: postgres
Published: 2020-04-15 15:03:52

---
title: Creating a user with limited privileges in Postgres
published: true
description: This post showing how to create a user with limited privileges in PostgreSQL.
tags: PostgreSQL
cover_image: https://images.pexels.com/photos/4033708/pexels-photo-4033708.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=420&w=1000
---

## Situation
I created a web app. It reads data from a PostgreSQL database. I want to create a user with read-only privilege and connect to the database.

### Code 
Let say the user you want to create is `webapp_user`:

``` sql
CREATE USER webapp_user WITH ENCRYPTED PASSWORD 'secure_passw0rd';
```

Grant the right to all public tables:

``` sql
GRANT SELECT ON ALL TABLES IN SCHEMA public TO webapp_user;
```

Connect the database using `webapp_user` in the web app.

## I want more power...
Now my web app is not read-only anymore. Users can create/delete some entries in the tables too.

### Code

``` sql
GRANT SELECT, INSERT, UPDATE, DELETE ON ALL TABLES IN SCHEMA public TO webapp_user;
```

Looks simple and cool! But why I got the **`permission denied for sequence XXX_id_seq to YYY`** error while inserting new records to the tables?

If your table has an *auto-increment* field then you need some extra privileges: the privileges to use the sequence-related functions (e.g. `currval` and `nextval`)

``` sql
GRANT USAGE, SELECT ON ALL SEQUENCES IN SCHEMA public to webapp_user;
```

Example of an *auto-increment* field: the id of the table

### Extra
What if I just want to apply the privilege(s) to a special table?

```sql
GRANT SELECT, INSERT, UPDATE, DELETE ON special_table TO webapp_user;
```

---
Reference:
- [Grant Privileges on Table](https://www.techonthenet.com/postgresql/grant_revoke.php)
- [ERROR: permission denied for sequence cities_id_seq using Postgres](https://stackoverflow.com/q/9325017)
Empty App - The simple HTML sandbox in your Developer tools
Tags: showdev, html, browser, webdev
Published: 2020-04-15 15:00:36

**Hello developers!** :hand:

Today I present my recently created simple project which I called Empty App. It’s practically nothing but an empty `<body />` tag in your browser :flushed:

**The reason ?** :thinking:

I created the empty "website" because I needed the simplest HTML sandbox in a real browser without any `<iframe />` which are usually used by CodePen or other sandbox apps. It helps me to fastly developer or test the simplest HTML and CSS structures directly in the browser using the default Developer Tools.

**App ?** :thinking::thinking:

Yeah. I called the empty `<body />` tag - **App**. It is not a full-featured app like CodePen, but it has a very simple and very useful feature: DOM state save. 
When you change the DOM, everything in the `<body />` tag will be kept on page refresh. So you can close the browser and continue your work later :cherries:

Check it out there: https://emptyapp.now.sh :sunglasses:

**The simple example** :hammer:

Let's open the Empty App by the link above.

Firstly we see the default message. It's a simple usage guide.

![](https://dev-to-uploads.s3.amazonaws.com/i/g959d5y5njki6pe4bxii.png)

Now open the *Developer Tools* by clicking the *F12* key and go to *Console* tab.

To clear the screen, enter the command `app.clear()`

![](https://dev-to-uploads.s3.amazonaws.com/i/rv2buahdzo84chag6m3z.png)

Go to the *Inspector* tab. There we see the empty `<body />` tag

![](https://dev-to-uploads.s3.amazonaws.com/i/ubvc8v5e6glqskmkimtw.png)

Let's do something cool! :heart_eyes:

Add the Roboto font:

![](https://dev-to-uploads.s3.amazonaws.com/i/qq28yfbqff3v8k1sdy5u.png)

Add the simple image and title

![](https://dev-to-uploads.s3.amazonaws.com/i/4qlgioitklembak5ng4q.png)

Style it!

![](https://dev-to-uploads.s3.amazonaws.com/i/3c9igpr7hi3o5nt0jj4b.png)

And got the result!

![](https://dev-to-uploads.s3.amazonaws.com/i/rl4mj0k11oclcsgmip50.png)

Try to refresh the page. Your work will be kept.
To reset the page (show default message), use the following command in the console: `app.reset()`

Thanks for your time. Happy coding! I hope you will find it useful as well :+1:

You can check the full source code in my GitHub repository [epranka/empty-app](https://github.com/epranka/empty-app)

If you have ideas on how to improve it (new features, bugs and etc...) feel free to share it on the [GitHub Issues](https://github.com/epranka/empty-app/issues).

Follow on [Twitter](https://twitter.com/epranka), [GitHub](https://github.com/epranka), and let’s connect on [LinkedIn](https://linkedin.com/in/epranka)

Feedback and questions are very appreciated.
Welcome Thread - v69
Tags: welcome
Published: 2020-04-15 14:50:00

---
title: Welcome Thread - v69
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![Jenny Slate says welcome](https://media.giphy.com/media/3o72EWpXXrrFvEsZPO/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Understanding use of fetch, created, mounted in context of Nuxt
Tags: generate, fetch, nuxt, vue
Published: 2020-04-15 14:42:58

---
title: Understanding use of fetch, created, mounted in context of Nuxt
published: true
description: making use of nuxt hooks properly
tags: generate, fetch, nuxt, vue
---
Context: `nuxt generate`

1. On initial page load, fetch() will be called once. created() will be called twice(once on server, once on page load)

2. `fetch()` is used only to get static data
Before using fetch(), identify which piece of data is static(changes rarely) & which is dynamic(will change frequently). 
For example, in the case of a blog, title, blog content are static & comments are dynamic.

3. fetch has access to both store & data()
Quote CRUD App build with React.js 
Tags: react, sass, firebase, redux
Published: 2020-04-15 14:40:07

We frontend developers are not limited to only one framework for building Single Page Applications (SPA). Recently I have been working mostly with Vue.js framework for building those applications but I wanted to extend my knowledge further and learn how React.js works under the hood. So, I created this simple Quote CRUD app with the purpose of applying React.js concepts and shared it with you. 😊

The purpose of this app is as a user to be able to create, read, edit and delete a quote. Technologies and React concepts I applied in this app:

+ Quickly get started with create-react-app CLI ✅
+ Created class components for showing and creating quotes. ✅
+ Instead of writing pure vanilla JS for creating HTML elements and appending to DOM I learned to use JSX and understood that everything in React is JavaScript. ✅
+ In order to navigate between pages, I installed a react-router. ✅
+ Local state in React class components and setState method for mutating the state values. ✅
+ As my app began to grow I noticed that it could be better to separate it in multiple function components and reuse those components. ✅
+ Controlled components for handling user form inputs and events. ✅
+ Props for passing data between components and conditional rendering to render part of the code/component. ✅
+ React-bootstrap is used for UI components. ✅
+ Sass as CSS pre-processor for component styling. ✅
+ React masonry CSS for masonry layout. ✅
+ Firebase real database for saving, fetching and updating the data. ✅
+ For this tiny app I would probably not need an extra library for managing the state of this application however I wanted to integrate Redux and hold the application state into a store, using reducers to specify how the application's state changes, using actions to send data from my application to the store by dispatching, etc. ✅

[Link: Quote app](https://quotes-app-react.firebaseapp.com/)

I hope you find it interesting!

Cheers 🍻
Stay healthy!
COVID-19 and WORK FROM HOME?
Tags: productivity, codenewbie
Published: 2020-04-15 14:35:12

WFH is nothing new for IT people and especially for developers, we've been doing this as long as we can recall and to some point it's our dream way of working. As exciting as WFH sounds, it can overwhelm you and in this quarantine it can tire you up.

If you want to make the best of your time, there are some rules to that, I know you are pro of isolation but believe me on this one.. :D

1- Keep your WFH studio designated.
2- Complete your WFH setup, have your system, screens, accessories, test devices and any other thing you may need.
3- Keep some plant near you. (Please do that) It makes sure of fresh oxygen and help your strained eyes from all those dark-modes.
4- Keep a bottle of water near you, it's important to stay hydrated.
5- Now that your setup is complete, take pictures of your setup and don't forget to post it on social media cause I know everyone's gonna laaave it.
6- Take breaks. Short and more.
7- Take your dog out for a walk.
8- Don't apologize if your pet jumps into your video conference, everyone needs that.
9- Keep your working hours limited, I know your gonna get the lead to that error you've been stuck on whole day at time of leaving but you gotta drop it till tomorrow, leave the work at designated time. If you're gonna work long hours in start you're gonna be so sick of this WFH shortly.
10- Give time to your family.
11- On the topic of family, as important as it is to spend time with them it's also important you keep them away during working hours to keep your concentration. 
12- If you want to spice up your daily video calls, add snap camera and apply some cool filters. 

And that's a wrap. If I missed any points that you find helpful in your WFH please comment below.
HTML Tips
Tags: html
Published: 2020-04-15 14:34:16

In this article I will share with you some very useful HTML tips. Enjoy!

<h2>But first, what is HTML?</h2>
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

<h3>Let's start!</h3>

* HTML Native Search

{% codepen https://codepen.io/denic/pen/WNQbvbo default-tab=html,result %}

* Fieldset Element

You can use `<fieldset>` element to group several controls as well as labels (<label>) within a web form.

{% codepen https://codepen.io/denic/pen/BaNXWNj default-tab=html,result %}

* Window.opener

Pages opened with target=”_blank” allow the new page to access the original’s window.opener. This can have security and performance implications. Include rel=”noopener” or rel=”noreferrer” to prevent this.

![Rel No Opener](https://markodenic.com/wp-content/uploads/2020/04/noopener.png)

* Base Element

If you want to open all links in the document in a new tab, you can use <base> element.

{% codepen https://codepen.io/denic/pen/yLYYwJp default-tab=html,result %}

If you liked this post, be sure to ❤️ it.

This article is a repost from my blog. [Find the original post here](https://markodenic.com/html-tips/).

If you liked this article, you might light this one as well: [HTML input types](https://markodenic.com/html-input-types/).
useEffect missing dependency, need advice
Tags: react
Published: 2020-04-10 18:56:06

I am developing a react plugin called [use-models](https://github.com/r3wt/use-models), and i have ran into an issue and i'm having trouble determining what is the proper technique for dealing with the issue.

So, basically my plugin is for `hooks` and it allows you to define some state object with validation, and use input helpers. if you want to hydrate the state, perhaps from a db call or localstorage, you need to call `hydrate()` with an update object.

So, i wrote a simple function in my plugin:

```jsx
function hydrate( _state, _errors=false ) {
    console.log('hydrate()');
    setState({...state,..._state});
    if(_errors){
        setErrors({...errors,..._errors});
    }
}
```

and my intent was for users to use this like so:

```jsx
useEffect(()=>{
    hydrate({
        name:'Garrett',
        email:'test@test.com',
        newsletter: 'yes'
    });
},[]);
```
this works exactly how i intended it, however it leads to the dreaded linter warning: 

> React Hook useEffect has a missing dependency: 'hydrate'

Hmm, so how to solve this:

Should i simply change my example to pass in `hydrate` as a dependency? this feels wrong to me, as hydrate never changes.

So i thought to solve it at library level, by modifying hydrate:

```jsx
function hydrate( _state, _errors=false ) {
    console.log('hydrate()');
    return useEffect(()=>{
        setState({...state,..._state});
        if(_errors){
            setErrors({...errors,..._errors});
        }
    },[_state,_errors]);
}
```

this works to eliminate the warning, but then i realized that users are still going to need to call `hydrate()` from within `useEffect()` on their components. Now i'm at a loss for what to do. can anyone give advice? if i pass `hydrate` as a dependency to `useEffect()` then the effect is executed on every re-render!