teleren/devto huggingface dataset:
Condicionais
Published: 2021-03-05 16:11:48

# Veja no Youtube:
[![VIDEO](http://img.youtube.com/vi/8MdJEwlQsss/0.jpg)](https://youtu.be/8MdJEwlQsss)

# Bora lá...

As condicionais é basicamente o seu funil de escolhas se vai tratar o dado de uma forma ou outra levando você para o escopo de informação que o resultado for `true`, vamos ver uns exemplo de condicionais com if statement que sempre onde estiver um if presente ele aguarda um resultado verdadeiro para entrar no escopo que é dentro das chaves `{ }`

### if

```jsx
const a = 10
const b = 5

if (a > b) {
	console.log('É verdadeiro')
}
```

### if...else if

```jsx
const a = 10
const b = 5

if (a < b) {
	console.log('if: >> É verdadeiro')
} else if (a > b) {
	console.log('else if: >> É verdadeiro')
}

// Output: else if: >> É verdadeiro
```

### else

```jsx
const a = 10
const b = 5

if (a < b) {
	console.log('if: >> É verdadeiro')
} else if (a === b) {
	console.log('else if: >> É verdadeiro')
} else {
	console.log('else: >> É o falso')
}

//Output: else: >> É o falso
```

## Operador ternário

Temos uma opção bem pratica para validar se temos uma informação ou não que é usando o if ternário dessa forma:

```jsx
const a = 10
const b = 5

console.log(a > 8 ? "Verdadeiro" : "Falso")
```

O ternário verifica somente duas condições diferente do `if` que podemos ter alternativas com o `else if` e podemos usar qualquer operador lógico para validar a informação antes do ponto de interrogação.

### Conclusão

O `if` é utilizado para retornar o valor que é verdadeiro

O `else if` é utilizado para uma segunda possibilidade de vir verdadeiro, podendo ser mais de uma possibilidade isso resulta em mais `else if`.

O `else` é a nossa saída de false, após passar por cada validador teremos ele esperando para falar que não deu match.

O if ternário economiza código e traz uma informação mais precisa como resultado
Loops / Laços de repetição
Published: 2021-03-05 16:11:18

# Objetivos

1. Entender o uso do laço de repetição
2. Aprender laços de repetição em variáveis, arrays e objetos

# Bora lá...

Aqui vamos abordar o uso do `for()`, `for...in` e `for...of`

Laços de repetição são usados para manter uma iteração enquanto aquele valor que estiver sendo ouvido for verdadeiro 

## for()

O for é o mais usado pelos devs pela praticidade na iteração, vamos analisar cada elemento desse metódo:

```jsx
for ([inicialização]; [condição]; [expressão final])
   declaração
```

**`inicialização`**

Geralmente usada para iniciar o contador de variáveis. podemos criar ela no próprio for usando `let`

 ou até mesmo já ter ela declarada e utilizarmos como inicializador.

**`condição`**

Uma expressão para ser avaliada antes de cada iteração do loop. Se esta expressão for `true`, a `declaração` será executado. Este teste da condição é opcional. Se omitido, a condição sempre será avaliada como verdadeira. 

**`expressão final`**

Geralmente usado para atualizar ou incrementar a variável do contador.

**`declaração`**

Uma declaração que é executada enquanto a condição for verdadeira. Para executar múltiplas condições dentro do loop, use uma instrução de bloco `({...})` para agrupar essas condições. Para não executar declarações dentro do loop, use uma instrução vazia `(;)`.

```jsx
for (let i = 0; i < 4; i++) {
   console.log(i);
}

/* Output:
			0
			1
			2
			3
*/
```

## for...in

O laço `for...in` interage nas propriedades (**chaves**) de um objeto, na ordem original de inserção. 

```
for (variavel in objeto) {...
}
```

**`variavel`**

Uma propriedade diferente do objeto é atribuída em cada iteração. Pode ser declarada com qualquer nome.

**`objeto`**

Objeto com as propriedades enumeradas.

```jsx
let obj = { a: 1, b: 2, c: 3 };

for (let prop in obj) {
	console.log("obj.", prop, " = ", obj[prop]);
}

/* Output:
		obj. a  =  1
		obj. b  =  2
		obj. c  =  3
*/
```

## for...of

O loop `for...of` percorre objetos iterativos dentro de um array para trazer cada um dos objetos para erem tratados de forma individual.

```jsx
for (variavel of iteravel) {
  declaração
}
```

**`variável`**

A cada iteração, um objeto do array é atribuido à *variavel*.

**`iteravel`**

Array cujos atributos serão iterados.

```jsx
let iterable = [
	{ name: "Larissa", admin: false },
	{ name: "Diego", admin: false },
	{ name: "Walace", admin: false },
];

for (const value of iterable) {
  console.log(value.name);
}

/* Output:
			Larissa
			Diego
			Walace
*/
```

### Podemos usar em `string` também

```jsx
let iterable = "Telles";

for (let value of iterable) {
	console.log(value);
}
/* Output:
		T
		e
		l
		l
		e
		s
*/
```

### Conclusão

Podemos usar o escopo para realizar validações e tomar ações necessárias para cada um dos dados que precisamos usar, seja para valores ou até mesmo para chaves.
Bonus: i18n-manager zero dependencies!
Tags: webcomponents, i18n, vanillajs
Published: 2021-03-05 15:54:43

## UPDATE with video, now VanillaJS!

{% youtube rFy410-yZRw %}

While making these posts and the video, I realized that I really don't need to use LitElement in order to make i18n-manager work. So, after a little work today, it's not dependency free! The major changes in the code to remove LitElement invovled the following:
- Convert `static get properties()` calls to `get lang` and `set lang` (so getters and setters to mirror attributes to properties)
- Convert `update` life cycle to be `observedAttributes` and `attributeChangedCallback` centric
- Replaced `firstUpdated` callback with `connectedCallback`

The `update` replacement looks like this:
```js
/**
   * Life cycle
   */
  static get observedAttributes() {
    return ["lang", "dir"];
  }
  /**
   * Life cycle
   */
  attributeChangedCallback(attr, oldValue, newValue) {
    // notify of attr change
    if (attr == "lang" || attr == "dir") {
      this.dispatchEvent(
        new CustomEvent(`${attr}-changed`, {
          detail: {
            value: this[attr],
          },
        })
      );
    }
    // we are NOT moving to the default from something
    if (attr == "lang" && this[attr] && this.__ready) {
      this.updateLanguage(this[attr]);
    }
  }
```
This is a good example of when to NOT use LitElement / dependencies in building web components. My general rules for when to use LitElement:
- Does it have data reactive properties / attributes, and a lot of them?
- Does it have a `shadowRoot` and will it manage a lot of value changes within it?
- Is it doing any conditional template updating?

While LitElement is great, if you don't need to do a lot of data reactivity and NOTHING with template (i18n-manager is a non-visual singleton) then it can best serve those adopting your code to NOT have additional dependencies.

The Zero dependency method now has zero additional dependencies in the manager! So now you can work like this:
- Make your elements, don't use the I18NMixin; just leverage the event
- Make your localizations local to each element
- Make your app, and reference `i18n-manager` early in the bootstrap
- Everything is translatable yet all of your visual assets ship without a requirement on anything!
Switch...case
Published: 2021-03-05 15:56:58

# Objetivo

1. Aprender a usar um switch...case
2. Entender o que faz cada parte do código

# Bora lá...

Uma outra forma de trabalhar com condicionais é usando switch...case e aqui vamos ver o esqueleto dele e suas características básicas:

```jsx
const local = "cinema";
switch (local) {
	case "cinema":
		console.log('Entrou no cinema!');
		break;
	case "quarto":
	case "sala":
		console.log('Entrou em casa!'); 
		break;
	default:
		console.log('qualquer valor diferente dos cases acima');
		break;
}

// Output: Entrou no cinema!
```

Temos o:

- `switch` responsável por ouvir a variável que vamos trabalhar
- `case` **sempre irá verificar a igualdade** do valor passado no `switch` com o que está no `case`
- `break`sempre será usado para parar a execução do `case`, caso não exista um `break`seu `switch` vai mandar para o próximo `case` e executará os dois causando um erro
- `default` qualquer valor diferente dos cases acima

Onde temos nosso console log podemos passar uma função ou qualquer outro validador que você precise

> *Note que temos dois cases juntos e isso significa que se cair em qualquer um deles a resposta será a mesma.*

## Conclusão

Temos uma alternativa ao if...else para trabalhar com condicionais de maneira simples também.
Lógica de programação com JavaScript - Iniciante
Published: 2021-03-05 15:55:12


# Objetivos

1. Escopo
2. Comando que vamos ver bastante no demais artigos

# Escopo

Algo que devemos nos atentar bastante é nos escopos, mas afinal o que é isso?

Bom escopo é basicamente até onde sua váriavel pode ser acessada, a grosso modo.

O escopo normalmente é identificado com o uso das chaves `{ }` nas funções.

Mas podemos ter tipos diferentes de escopos:

### Escopo global

Uma variável global é definida quando declaramos uma variável fora de qualquer função, assim ela torna acessível a qualquer parte da nossa aplicação, podendo ser lida e alterada.

### Escopo local

Uma variável local é definida quando declaramos uma variável dentro de uma função, assim ela torna acessível somente dentro da função onde ela foi declarada.

Exemplos:

```jsx
const varGlobal = "Eu sou uma variavel global"

function showMeTheCode() {

	let varLocal = "Eu sou uma variavel local"

	console.log(varGlobal)
	console.log(varLocal)
}

console.log(varLocal)

// Output: ReferenceError: varLocal is not defined
```

No exemplo acima não conseguimos acessar a variavel local pois ela só pode ter acesso dentro do escopo que ela está, no caso a função `showMeTheCode()`, vamos ver o que acontece se chamarmos a função apenas:

```jsx
const varGlobal = "Eu sou uma variavel global"

function showMeTheCode() {

	let varLocal = "Eu sou uma variavel local"

	console.log(varGlobal)
	console.log(varLocal)
}

showMeTheCode()

/* Output: 
		Eu sou uma variavel global
		Eu sou uma variavel local
*/
```

Nesse caso conseguimos acessar as duas variáveis, porque a global está fora do escopo, mas pode ser usada e lida dentro de qualquer escopo.

# Como ver o retorno dos valores

Podemos usar algumas ferramentas para isso, mas recomendo usar o dev tools do navegador, basta apertar `Ctrl + Shift + J` e abrira na aba de console, caso não abra funciona apertando `F12` no seu teclado, mas ai você irá navegar para a aba console. 

Para testarmos nossas saídas de código que são nossos resultados, vamos usar o comando `console.log(variável)`
Equality does not exist. For this very reason: all the more!
Tags: wecoded, choosetochallenge, iwd2021, sinnerschrader
Published: 2021-03-05 15:53:57

**Equality does not exist. For this very reason: all the more!**

Bias and prejudice.
Lack of equality of opportunity.
Nature versus nurture.
Behind every insight, behind every thought, there is something deeper.
We have a complex problem.
The problem is fundamental.
The problem is global.
I am unsettled.
I am overwhelmed.

I don't even know how to make sense of it all, to define the scope of it, to describe it.
There is no equality.
And I do not believe that humanity will ever achieve absolute equality.
Life is unfair - to individuals and to groups of people who bear certain characteristics. Damn unfair!

**But!**

Capitulation due to complexity and size is not a valid option.
Even an unattainable goal, one can still define as a goal.
One's own actions can be evaluated with respect to the goal and consider whether they pay into it, don't pay into it, or even counteract the goal.

For me, equal opportunity is a goal worth striving for!

**So what?**

I know that I carry many characteristics that give me privileges.
I certainly would not have gotten to where I am now with other characteristics.
Professionally, I have been given the chance to influence topics and decide things.

I am Christoph, man, white, cis, child of academics, born in Germany, Studio Lead & Executive Director Product Engineering at SinnerSchrader.
I would like to use this to get closer to the desirable goal.

In a very pragmatic and practical way:
* I will pay attention in everyday life to where prejudices and unequal treatment take place - and actively counteract them by addressing them.
* I will have an open ear for people who approach me about unequal treatment - and help them with my opportunities and privileges.

\#SheCodedAlly
\#ChooseToChallenge
\#IWD2021
Twilio call conferencing over VoIP
Tags: twilio, reactnative, twiliohackathon
Published: 2021-03-05 15:42:27

Hi all,

Is it possible to create a twilio conference instance over VoIP?

Our app uses react-native-twilio-voice-module, and we are wondering if its possible to create audio conferences over VoIP, or if this has to be completed through a dedicated back end i.e. written in java/python?

Thanks
Sam
KISS alternatives to RN & Electron
Tags: reactnative, electron, react, ultralight
Published: 2021-03-05 15:39:21

I want to develop a small GUI app that I want to package to mobile devices (iOS & Android) and desktops Microsoft [Appx][1] / macOS App Store / [Flatpak][2] directory.

I have in my team junior web developers knowing to [ReactJS][3] in the first place, so I’m thinking about playing with [React Native][4] and [Electron][5].

But since my app does not care about accessing native capacities of devices I’m looking for something more minimalist that would not require a big learning effort for my coworkers, I’m thinking after searching the web about using [preact][6] and [ultralight][7] but I’m not sure it makes my point and I’m open to any suggestions :)


  [1]: https://en.wikipedia.org/wiki/Universal_Windows_Platform_apps
  [2]: https://flathub.org
  [3]: https://reactjs.org
  [4]: https://reactnative.dev
  [5]: https://www.electronjs.org
  [6]: https://preactjs.com
  [7]: https://ultralig.ht
Prisma Online Meetup
Tags: database, aws, react, meetup
Published: 2021-03-05 15:37:41

Prisma Online Meetup #3 is coming up! 🤓
Join us on the 9th of March, 6 PM CET.

🌍 Join the engineers from all around the globe to learn about database best practices, the Prisma inside scoop, and examples of Prisma in production.

◭ [Alex DeBrie](https://twitter.com/alexbdebrie) - Picking a database for your serverless application in 2021

◭ [Tim Suchanek](https://twitter.com/TimSuchanek) - Prisma in React Server Components

◭ [Matija Šošić](https://twitter.com/MatijaSosic) - Wasp - DSL for building web apps with Prisma, React & Node.js

[You can find out more about the event here](https://www.meetup.com/Berlin-Prisma-Meetup/events/276603523/) or [set up a YouTube reminder](https://www.youtube.com/watch?v=-l37ONdsEog).

Hope to see you there! 👋

![Prisma Online Meetup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ee1jb6rh7ux0p2gcbtgw.png)
Day 67 Of 100DaysOfCode: Extracting Data From HDF5 File
Tags: womenintech, 100daysofcode, codenewbie, beginners
Published: 2021-03-05 15:32:12

Today is my 67th day of #100daysofcode and #python learning. Today I learned introduction to importing data in python. Gain knowledge of importing different data file like flat file, csv file, file from other software, relational database, excel spreadsheets, MATLAB files, SAS file, stata file, HDF5 file, pickled file. Here is one code to extracting data from hdf5 file.

#Code
I got concept of HDF5 are
* Hierarchical Data format version 5
* Standard for sorting large quantities of numerical data
* Datasets can be hundred of gigabytes of terabytes
* HDF5 can scale to exabytes

```python
# Get the HDF5 group: group
group = data['strain']

# Check out keys of group
for key in group.keys():
    print(key)

# Set variable equal to time series data: strain
strain = data['strain']['Strain'].value

# Set number of time points to sample: num_samples
num_samples = 10000

# Set time vector
time = np.arange(0, 1, 1/num_samples)

# Plot data
plt.plot(time, strain[:num_samples])
plt.xlabel('GPS Time (s)')
plt.ylabel('strain')
plt.show()
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 67 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/python?src=hash&amp;ref_src=twsrc%5Etfw">#python</a><br>Extracting data from HDF5 file From [Datacamp](<a href="https://t.co/Y3LozYIWOk">https://t.co/Y3LozYIWOk</a>)<a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/CodeNewbies?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbies</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://t.co/w7M0Y8AZNV">pic.twitter.com/w7M0Y8AZNV</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1367857490239451140?ref_src=twsrc%5Etfw">March 5, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Programming is challenging, fulfilling, creative, meaningful and simply fun. No one should be denied that!
Tags: wecoded, genderequality, womenrights, choosetochallenge
Published: 2021-03-05 15:32:09

We urgently need every idea, every creativity, every enthusiasm, every commitment and every talent for the enormous tasks that lie ahead of us in order to shape and manage the challenging future of humanity. Prejudices are wrong in so many ways … and what are they good for at all? It would be great if it did not take such insights to realize that everyone must be given equal chances and be treated with respect. There is no alternative now and none in the future.

Privileged people, and I am doubtless one of them, have to help and share … always - then there are only winners. I will do my best and not stop talking & discussing these issues, thinking about them, reflecting myself and my actions and paying attention to my language and its effect on others.
Simple Ruby class to print ActiveRecord results as a table
Tags: ruby, rails, productivity
Published: 2021-03-05 15:31:03

You ever wanted to print a result of records in a fancier way?

 With this simple class  you can print tables like this:

```ruby
records = Post.includes(:user).where(user_id: [1,2])
attributes = [:created_at, :title, {user: :name}]

TablePrinter.new(records, attributes).print_table
```
```text
+-------------------------+-------------------+-----------------+
|  Created at             |  Title            |  User Name      |
+-------------------------+-------------------+-----------------+
| 2020-12-14 02:02:02 UTC | Un titulo 3       | Magdalena Silva |
| 2020-12-14 02:18:25 UTC | ¿Qué es escribir? | Benjamín Silva  |
| 2020-12-20 18:41:46 UTC | Primero para leo  | Magdalena Silva |
| 2021-02-06 14:18:54 UTC | A File            | Benjamín Silva  |
| 2020-12-20 04:09:37 UTC | aasdasd           | Benjamín Silva  |
| 2021-02-12 18:14:34 UTC |                   | Benjamín Silva  |
| 2020-12-14 01:50:20 UTC | Test super title  | Benjamín Silva  |
| 2021-02-06 03:32:02 UTC | lala5             | Benjamín Silva  |
+-------------------------+-------------------+-----------------+
``` 

This is an adaptation of this response, https://stackoverflow.com/a/28685559/1275069 to make it work with ActiveRecord right away. 

It supports deeply nested attributes (example: `post.user.some_model.some_other.the_attribute`), but remember to include them in the query to avoid n+1.

```ruby
# frozen_string_literal: true

class TablePrinter
  def initialize(records, attrs)
    @records = records
    @attrs = attrs
  end

  # rubocop:disable Rails/Output
  def print_table
    buffer = [divider, header, divider, content, divider].join("\n")
    puts buffer
  end
  # rubocop:enable Rails/Output

  private

  attr_reader :records, :attrs

  def content
    records.map { |row| line(row) }
  end

  def header
    "| #{columns.map { |_, g| g[:label].ljust(g[:width]) }.join(' | ')} |"
  end

  def divider
    "+-#{columns.map { |_, g| '-' * g[:width] }.join('-+-')}-+"
  end

  def line(row)
    str = attrs.map { |attr| row_value(row, attr).ljust(columns[attr][:width]) }.join(' | ')
    "| #{str} |"
  end

  def row_value(row, attr)
    if attr.is_a?(Hash)
      row_value(row.send(attr.keys.first), attr.values.first)
    else
      row ? row.send(attr).to_s : ''
    end
  end

  def columns
    @columns ||= col_labels.each_with_object({}) do |(attr, label), h|
      h[attr] = {
        label: label,
        width: [records.map { |row| row_value(row, attr).to_s.size }.max, label.size].max
      }
    end
  end

  def col_labels
    @col_labels ||= attrs.index_with { |attr| nested_name(attr) }
  end

  def nested_name(attr, memo = '')
    if attr.is_a?(Hash)
      nested_name(attr.values.first, "#{memo} #{attr.keys.first.to_s.humanize}")
    else
      "#{memo} #{attr.to_s.humanize}"
    end
  end
end
```

Feel free to use it in your projects!
Happy Coding.
Truncate any string(first argument) at a given num integer (second argument)
Tags: javascript, algorithms
Published: 2021-03-05 15:19:32

#The problem:

we have a string (first argument) and we want to truncate it if the length is above the `num` integer (second argument).

**input**:

- truncateString("A-tisket a-tasket A green and yellow basket", 8)

**output**:

the first 8 elements of the string plus append "..." at the end of the string

- A-tisket...

#Solution 1:

Step 1

under the function declare a conditional `if` statement:

`if (str.length > num)`

Step 2

always under the function's curly brackets insert the return statement that stops the function and gives the value of the function:

`return str.slice(0,num) + "..."`

the above line of code uses the slice() method that takes two integer as argument for the start and stops index positioning. and append the string `"..."` using the `+` operator.

The whole function below

```
function truncateString(str, num) {
if (str.length > num){
   return str.slice(0,num) + "...";
    
}
   else {
     return str;
   } 
   
}

(truncateString("A-tisket a-tasket A green and yellow basket", 8);
```

#Solution2(Using conditional ternary operator):

Basically the same but without the if statement.

With this solution, we reduce of 50% the lines of codes to only one line!

remember ternary operator is one line which must include:

`condition? expression if true: expression if false;`

The syntax must always include the `?` and `:`

so -> `str.length > num ? return str.slice(0,num) + "..." : str;`

The code block using ternary operator:

```
function truncateString(str, num) {
return str.length > num ? str.slice(0,num) + "...": str 
}


console.log(truncateString("A-tisket a-tasket A green and yellow basket", 8));
```