teleren/devto huggingface dataset:
Como aumentar as seguranças das senhas
Published: 2021-11-27 01:54:59

Hoje é muito comum a falta de privacidade, a principal causa da falta de segurança é o mau uso da internet em redes sociais e sites de compras. Em algumas pesquisa notamos que é possível evitar grandes dores de cabeça com alguns passos simples:

**Ter uma senha segura.**

Uma senha segura não significa uma senha complicada uma dica bem valiosa é escolher uma frase e usar só a primeira letra de cada palavra, por exemplo “cada um com seus pães” a senha ficaria cucsp, assim fica facil de lembrar e difícil de adivinhar, essa está bem simples mas poderia muito bem ser incrementada “Cada um com seus pães de R$1,50” ficaria CucspdR$150. 

**Não divulgar informações pessoais em redes sociais**

Postar fotos com cartões de crédito ou documentos são um prato cheio pra que está mal intencionado, devemos lembrar que nem sempre são só nossos amigos que veem nosso perfil no facebook, no instagram e etc.

**Não dar informações a estranhos**

Muitas vezes recebemos mensagens que ganhamos um prêmio e para isso basta fazer um cadastro, isso tem altíssimas chances de ser um golpe, e podemos estar vulneráveis ao fazer cadastro sem verificar as fontes

**Verificar o endereço do site em que está**

Alguns criminosos simulam sites para obter informações, montam o site quase igual ou até mesmo igual o original, mas com o endereço levemente diferente, por exemplo “www.facebok.com “ pode ser um site para simular “www.facebook.com”  ao digitar seu login e sua senha estará dando acesso a outra pessoa.

**Certificar que o site onde está é seguro**

Sempre que formos fazer uma compra ou qualquer tipo de transação bancária é necessário verificar se o endereço do site em que estamos é confiável, a maioria dos navegadores mostram o https em verde na barra de busca.

Obrigado por ler!

Críticas sugestões ou duvidas aqui em baixo ou por e-mail. Teremos sempre prazer em responder.Até o próximo post.
Reproducible Anaconda environments with GitHub Actions
Tags: actionshackathon21
Published: 2021-11-27 01:21:52

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)

Reproducibility is a major principle underpinning the scientific method, and scientific software is not an exception.

Anaconda is a distribution of the Python and R programming languages for scientific computing with more than 25 million users. But, how reproducible is science made with Anaconda? And most important:

**Do you think you will be capable of reproducing the results your research in the next 10 years?**.

Currently, the reproducibility of Anaconda environments [is not guaranteed](https://github.com/conda-forge/conda-forge.github.io/issues/787). `conda list --explicit` provides just some kind of short term reproducibility.

For example, if you use packages from non-standard channels, the owner could delete them at any moment. Also, the resolved URLs could vary due to changes in package labels or storage.

There is an [ongoing debate](https://github.com/conda/conda/issues/7248) about how to unify the different available tools to solve this problem.

In this workflow, I propose a simple but effective way to keep your environments reproducible using GitHub Actions and [`conda-pack`](https://conda.github.io/conda-pack/): 

> Every time you publish a new release of your code (e.g. a paper) on GitHub, the environment is solved, packed and uploaded as an asset.


### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)

DIY Deployments

### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github epassaro/repro-conda-envs %}


### Additional Resources / Info

{% link https://dev.to/epassaro/keep-your-research-reproducible-with-conda-pack-and-github-actions-339n %}

[Note]: # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any)

[Reminder]: # (Submissions are due on December 8th, 2021 (11:59 PM PT or 2 AM ET/6 AM UTC on December 9th)
100 días de código: 24, termine mi portafolio
Tags: spanish, 100daysofcode, webdev
Published: 2021-11-27 00:53:20

¡Hey hey hey!

Sean bienvenidos a este día 24 del reto. Han pasado mas de 3 semanas y ahora es cuando comienzo a sentir que esto se vuelve mas facil debido a que ya es una costumbre escribir en el blog. 
He de decir que al principio sentía mucha falta de ideas, no le asignaba tiempo e incluso olvide escribir algunos días por otras ocupaciones pero he llegado hasta aquí y estas son mis conclusiones:
- No importa si haces cosas grandes o pequeñas, escribirlas es importante porque te hacen sentir que vas creciendo y te llenan de motivación a corto plazo.
- Asignar metas a largo y corto plazo es importante porque te permiten sentir que vas en una dirección y cada vez que das un paso se siente mas cerca el final de la meta.
- Necesitas muy poco o nulo conocimiento, a lo largo del camino iras aprendiendo.
- Comenzar es lo importante, no importa como pero lo importante es intentarlo y esto es algo para cualquier cosa en la vida.

Y bien despues de filosofar con respecto a esto sigamos con la sección regular:

### Ayer:
- Termine con el diseño final de mi portafolio.
- Codifique la maquetacion de mi sitio pero aun no he agregado estilos.
- Practique mi manejo de ramas en git.
- Resolví algunos ejercicios en HackerRank.

### Hoy:
- Termine con mi pagina web personal pero sin mi información. Ahora solo falta crear esta y hacer algo de copyright.
- Modifique pequeñas partes del diseño otra vez...
- Lo anterior lo hice antes de terminar los estilos por lo cual los cambios ya están hechos.
- Practique mi manejo de ramas en git.
- Practique Touch Typing.

Aun no he regresado a avanzar con la guia The Odin Project pero quería terminar la maquetacion de mi sitio y lo he logrado. 

Saludos a todos y animo con sus proyectos!
No olviden sonreír y adiós mundo!

PD: gracias a Google y al autor por la imagen, se me habían acabado las ideas para imagen del cover.
How to send large files online ?
Published: 2021-11-27 00:38:45

Gmail's length limitation for connections is prepared at 25MB in accordance with email. Assuming that your connections surpass this limitation, you might comprise of a Google Drive hyperlink.

Gmail licenses you to deliver connections however much 25MB in accordance with email. 

You can transport more than one connections in an email, insofar as they do now presently don't transfer as much as 25MB. 

In the event that your connection surpasses the 25MB limitation, Google will precisely include the report your Google Drive and comprise of a hyperlink instead of a connection. 

Visit Insider's Tech Reference library for more prominent stories. 

Gmail, in the same way as other email suppliers, licenses you to include connections on your email. They might be hauled quickly out of your pc into the edge of an email or settled on out of your Google Drive. 

Be that as it may, furthermore like most extreme email suppliers, Gmail has a limitation to how gigantic the ones connections might be. It's a way to hinder spammers from flooding your inbox (and Google's servers) with huge, vain archives. 

Here is the entire thing to perceive around Gmail's connection limits — comprehensive of a method for getting past them. 

What is the connection length limitation in Gmail? 

Gmail can best deal with connections as much as 25MB long. 

Keep in considerations any text based substance or photos you have situated into the message matter towards this limitation as well, that implies that joining a report this is 25MB exactly will think of a mistake. 

The most effective method to skirt the connection length limitation 

Gmail's 25MB connection length limitation is perfect to get around. 

In the event that you endeavor to associate reports enormous than 25MB, Google will precisely start bringing in the records on your Google Drive account. Once transferred, it will region a hyperlink to the ones archives withinside the email. This will we your email's beneficiary get right of passage to the records without any problem.

In order to bypass this limitation applied by all the emails, one easy solution is offered for free.
1- Go to www.sendbig.com
2- upload your files
3- enter the recipient email
4- send the files and enjoy the service.
How are you using Styled Components?
Tags: react, webdev, discuss, css
Published: 2021-11-27 00:11:17

Hello!
Have you ever used [style-components](https://styled-components.com/) in a React project before? And, more generally, what are your thoughts of it?

I'm asking because we want to implement `styled-components` support for [Agrippa](https://github.com/NitzanHen/agrippa), [the React CLI for component generation](https://dev.to/nitzanhen/meet-agrippa-the-react-cli-for-component-generation-26pk)! In fact, it's the second issue opened on our GitHub repository!

However, I unfortunately have never personally used `styled-components` in a production project, and while I did propose an implementation on [the GitHub issue](https://github.com/NitzanHen/agrippa/issues/2), it would definitely be better to hear an experienced input.

From what I've seen, different teams have used this tool in many different ways over the years. 
Therefore, I'd love to hear your own experience with it, and how you're using it!
**Even if you've used it in a small project or casually, speak up!** the more experiences, the better - we could all learn something new as a result.

If you prefer, you're also more than welcome to join the discussion on the mentioned GitHub issue at [Add support for styled components](https://github.com/NitzanHen/agrippa/issues/2), and [join the Agrippa community](https://github.com/NitzanHen/agrippa)!

Thank you for your time!

(Cover image is from `styled-components`' docs, at https://styled-components.com/meta.png)
ESLint Global Variables
Tags: javascript, typescript, eslint
Published: 2022-11-13 17:53:13

---
title: ESLint Global Variables
published: true
date: 2021-11-27 00:00:00 UTC
tags:
  - javascript
  - typescript
  - eslint
canonical_url: https://www.emmanuelgautier.com/blog/eslint-global-variables
---

Sometimes, we need to access some globally defined variables, especially the browser side when we use third-party libraries, and can also be the case server side. Because the variables are not referenced in the code, eslint throws an error saying the variable is not defined.

Eslint let us specify the global variable. This configuration allows eslint to know that a variable exists even if it is not referenced in the code. Here is an example:

```json
{
  "globals": {
    "dataLayer": true
  }
}
```

In addition to specifying it, you can declare the variable as writable or not. Here is an example:

```json
{
  "globals": {
    "dataLayer": "writable"
  }
}
```

Or only declare it as read-only:

```json
{
  "globals": {
    "dataLayer": "readonly"
  }
}
```

You can find more documentation on the [Eslint doc page](https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals).
Extend Window type with Typescript
Tags: javascript, typescript, react, vue
Published: 2022-11-13 17:51:20

---
title: Extend Window type with Typescript
published: true
date: 2021-11-27 00:00:00 UTC
tags:
  - javascript
  - typescript
  - react
  - vuejs
canonical_url: https://www.emmanuelgautier.com/blog/typescript-extend-window
---

During typescript app development, sometime you need to access properties or functions of the `Window` object. Some of these properties or functions are not available in the `window` object defined by the browser. Those may be defined by Third-party libraries you can add to your pages like Google Tag Manager for example. Because of this, you need to extend the Window type with the properties or functions you need to access.

## TypeScript Window type

The `Window` type is defined in the `lib.dom` typescript module. You can find the definition of the `Window` type at the following [TSDoc](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.window.html).

When can you have new properties not defined by your code in the `Window` object? An example is when you want to add Google Tag Manager or Google Analytics to your page. Those scripts are not loaded by your code directly but you may communicate with them through some window object properties. For Google Tag Manager, the `datalayer` property is added and some of the functions are also added.

In this case, you will have the following error:

```
Property does not exist on type 'window & typeof globalthis'
```

## Extend Window type with the missing properties

In order to extend the Window type, you need to add the missing properties or functions.

The following code snippet will extend the `Window` type with the missing properties or functions.

```typescript
declare global {
  interface Window {
    gtag: (...args: any[]) => void
    dataLayer: Record<string, any>
  }
}
```

Do not forget to add the file containing this snippet to the list of project files for the Typescript compilation.

For example, in a NextJS project, you can add the snippet in the `globals.d.ts` file like this:

```typescript
interface Window {
  gtag: (...args: any[]) => void
  dataLayer: Record<string, any>
}
```

Hope this article helps you to avoid this Typescript error.
Send Emails In Laravel 8 Using Gmail's SMTP Server
Tags: laravel, php, tutorial
Published: 2021-11-26 23:43:09

Sending email has become an essential part of modern web applications. For example, they are a great way to communicate with users, when they register, when verifying registrations, and when resetting passwords.

So in this tutorial, you will learn how to send emails in Laravel using a Gmail SMTP server.

## Overview
[In certain circumstances](https://www.php.net/manual/en/function.mail.php#refsect1-function.mail-notes), your local server may not send emails when using the default PHP mail() method, or it may make it quite problematic to do so. In such scenarios, using a dedicated email library, such as [Symfony's Mailer component](https://symfony.com/components/Mailer), can be a practical alternative.

You could also use one of the many [email drivers](https://laravel.com/docs/8.x/mail#driver-prerequisites) which Laravel supports, including Mailgun, Amazon SES, and Postmark, and of course, [Twilio's own SendGrid](https://laravel.com/docs/8.x/mail#driver-prerequisites). However, in this tutorial, you'll learn how to configure Laravel to send emails using Gmail's SMTP server instead.

You're going to create an API for newsletter subscriptions. The user will subscribe to the newsletter by submitting their email address. After doing so, their email address will be stored in the database, and they are sent a “Thank you for subscribing” mail.....[Read More](https://www.twilio.com/blog/send-emails-laravel-8-gmail-smtp-server)
Release the TextHTMLPress package to PyPI
Tags: pypi, release, python, package
Published: 2021-11-26 23:18:44

In this blog, we are focusing software releases and getting our code into the hands of users from a GitHub repository. My static html generator, [TextHTMLPress](https://github.com/Qiwen-Yu/TextHTMLPress) was used as the package to be published on [PyPI](https://pypi.org/). 

## Setup the Python Packge structure

Based on references on [setup Python project](https://stackoverflow.com/questions/44977227/how-to-configure-main-py-init-py-and-setup-py-for-a-basic-package/45143896),  [package structure](https://stackoverflow.com/questions/193161/what-is-the-best-project-structure-for-a-python-application), and a production-level [Python package](https://github.com/flyteorg/flytekit), I refactor the package as shown below:

```
TextHTMLPress/
|-- tests/
|   |-- inputs/
|   |-- test.py
|   |
|-- TextHTMLPress/
|   |-- __main__.py
|   |-- __init__.py
|   |-- generator.py
|   
|-- .gitignore
|-- config.yml
|-- requirements.txt
|-- LICENSE
|-- CONTRIBUTING.md
|-- setup.cfg
|-- pyproject.toml
|-- README.md
```

## Write pyproject.toml and setup.cfg

To build a Python Package with `setuptools` and `wheel`, [`pyproject.toml`](https://github.com/Qiwen-Yu/TextHTMLPress/blob/main/pyproject.toml) and [`setup.cfg`](https://github.com/Qiwen-Yu/TextHTMLPress/blob/main/setup.cfg) files are required. Follow the [documentation](https://packaging.python.org/tutorials/packaging-projects/), one thing worth noting is that now, static metadata `setup.cfg` should be preferred over `setup.py`, and now `setup.py` is not required.

## Entry point

Adding a console script entry point in `setup.cfg` allows the package to define a user-friendly name for installers of the package to execute, seeing the [reference](https://setuptools.pypa.io/en/latest/userguide/entry_point.html).

## Build and Upload 

Register at PyPI.

```
python -m build
python -m twine upload dist/*
```

The final package can be found at [here](https://pypi.org/project/TextHTMLPress/1.0.1/).
How to set latin american keyboard - Arch/Linux
Tags: archlinux, linux, beginners
Published: 2021-11-26 23:11:32

<u>TL;DR</u>
Pre-installation `loadkeys la-latin1`
Post-installation (of arch and xorg): `setxkbmap -layout latam,latam`
<center><h2>Introduction</h2></center>
<hr/>
I recently went back to Arch, and had some time figuring out how to set the Latin American keyboard, and it was quite easy, probably some minutes with the man pages and it would've been a cheese, okey so i got some info from [stackoverflow][0] and from the [Official Arch Linux Wiki][1]
<center><h2>Pre-installation</h2></center><hr>
This is quite easy as you may load the keys with the `loadkeys`command _(i.e `loadkeys la-latin1`)_ but when you install [xorg][2] and a desktop environment (Like [XFCE][3] or [KDE][4]) you may find that on a tty session your keymap is saved, but in the xfce session no.
<center><h2>Post-installation</h2></center>
<hr>
_(I am going to use XFCE as an example since it is my prefered desktop enviromnent)._
There is an xfce plugin called [xfce4-xkb-plugin][5] but i wanted to do it all in the terminal so i found my way with coffee and patience. First, i could not set the keyboard layout to Spanish, so i googled how to do that, then i realized something was wrong, there where keys that do not correspond (Since i had a Spanish layout, not a Latin American, there are some tiny differences and no minor changes, but still, it annoyed me).
<center><h2>Solution post-installation</h2></center><hr>
I used setxkbmap command with the `-layout` parameter, like this
<center>
```
setxkbmap -layout latam,latam
# If you want it permament just do
echo "setxkbmap -layout latam,es" >> $HOME/.profile
```</center>
<u>And that's it</u>, i hope you <b>Latin American</b> brothers and sisters have found your solution! (Thanks to [Terdon][6] for [this answer][7])

[0]:https://stackoverflow.com/
[1]:https://wiki.archlinux.org
[2]:https://es.wikipedia.org/wiki/X.Org_Server
[3]:https://www.xfce.org/
[4]:https://kde.org/es/plasma-desktop/
[5]:https://docs.xfce.org/panel-plugins/xfce4-xkb-plugin/start
[6]:https://unix.stackexchange.com/users/22222/terdon
[7]:https://unix.stackexchange.com/questions/99085/save-setxkbmap-settings
2 Ways to Implement Binding Adapters
Tags: android, beginners, kotlin
Published: 2021-11-26 22:32:11

**One way is using function parameter and another way is using extension function.**

There could be more than 2 ways to implement binding adapters, but this is what I know. Let's look at what binding adapters are first.

## What is Binding Adapters?

Binding adapter is used for **implementing custom attribute** in your layout file. For example, instead of using the default`android:text` attribute, you want to customize it by creating a new attribute `app:customText`. 

###  Default Attribute - `android:text`
```xml        
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"/>
```

###  Custom Attribute - `app:customText`
```xml        
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:customText="@{`Hello World!`}"/>
```

To implement custom attribute, we use binding adapters. Binding adapter is part of the data binding library. So you need to [enable data binding](https://vtsen.hashnode.dev/view-binding-vs-data-binding-gotchas#heading-enable-data-binding) in your `build.gradle` module file.
```
android {
    ...
    buildFeatures {
        dataBinding true
    }
}
```

To implement a binding adapter, you need to annotate the function with `@BindingAdapter("attribute name here")` together with `View` class that you want to bind to. It can be done by passing the `View` class (e.g. `TextView`) as a function parameter or using the extension function.

## 1.  Pass `View` as Function Parameter

I am not sure if this is a standard way (or maybe a recommended way?) but this is in the official documentation. What I learned initially is the second method below (i.e. using the extension function)

```kotlin
@BindingAdapter("customText")
fun setCustomText(view:TextView, item: String) {
    view.text = "My Custom String: $item"
}
```


## 2. Use `View` Extension Function

```kotlin
@BindingAdapter("customText")
fun TextView.setCustomText(item: String) {
    text = "My Custom String: $item"
}
```
Because this is an extension function, you can call it in code directly like this. 

```
binding.textView.setCustomText("Hello World!")
```
You can do that with the first method too, but the second method is more readable.

## Personally

I prefer the second method, use the extension function to implement binding adapter. It reflects the actual intention, which is to extend the`TextView` functionality.

---

*Originally published at [https://vtsen.hashnode.dev](https://vtsen.hashnode.dev/2-ways-to-implement-binding-adapters)*.
Auto-fixable import sorting rules for ESLint
Tags: javascript, react, webdev, programming
Published: 2021-11-26 22:29:58

The pretty much standard way of sorting imports in JavaScript:

- 3rd party imports first
- then local default exports
- and then local exports

And here's the snippet that sorts them in this exact order and 
satisfies my needs completely!

```bash
$ npm i --save-dev eslint-plugin-import  
  
# or    
  
$ yarn add -D eslint-plugin-import
```

```js
// .eslintrc.js  
const fs = require('fs')  
  
const ignoredSortingDirectories = ['.git', '.next', '.vscode', 'node_modules']  
  
module.exports = {  
  /// ... some other configurations  
  rules: {  
    // ... your rules  
    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],  
    'import/order': [  
      1,   
      {  
        groups: ['external', 'builtin', 'internal', 'sibling', 'parent', 'index'],  
        pathGroups: [  
          ...getDirectoriesToSort().map((singleDir) => ({ pattern: `${singleDir}/**`, group: 'internal' })),  
          { pattern: 'env', group: 'internal' },  
          { pattern: 'theme', group: 'internal' },  
          { pattern: 'public/**', group: 'internal', position: 'after' },  
        ],  
        pathGroupsExcludedImportTypes: ['internal'],  
        alphabetize: {  
          order: 'asc',  
          caseInsensitive: true,  
        },  
      },  
    ],  
    // ... your rules  
  },  
}  
  
function getDirectoriesToSort() {  
  return getDirectories(process.cwd()).filter((f) => !ignoredSortingDirectories.includes(f))  
}  
  
function getDirectories(path) {  
  return fs.readdirSync(path).filter(function (file) {  
    return fs.statSync(path + '/' + file).isDirectory()  
  })  
}  
```