teleren/devto huggingface dataset:
Setting Up An Environmental Variable
Tags: rails, todayisearched, tutorial, beginners
Published: 2022-10-04 13:28:14

When I was searching for action mailer setups, everyone talked about environmental variables, but I never saw them showing people how they are set up. They usually mentioned something along the lines of “If you can figure out environmental variables, you are a step ahead of the game”. 

Personally, I think they should have been mentioned because these environmental variables are important in keeping your secrets safe from the public, especially when it comes to the username and password for the email you will be using for the mailer.

---

## To set up the environmental variable

In the initializers folder, create a ruby file named something that you will be able to identify as the place for your variables. In my case, I used `app_env_vars.rb` or application environmental variables for short. In that folder, created the variables to look like this:

![Environmental variables for a Gmail account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28w3ge60hwoslyvynd40.png)

These will replace the actual username and password of your account.  

Now, if you were to create these variables and push these to a public repository, you would be exposing your secrets to everyone who checks out your code. Git Hub will surely send you and email and scold you in GitHub fashion to inform you that you have been exposing your secrets for (x) amount of minutes and the time will continue to increase until you make these changes. When in doubt, you can always utilize [Git Guardian](https://www.gitguardian.com/) to your advantage. It will inform you of all exposed secrets.

To make sure this does not happen, go into the `.gitignore` file and paste the relative location of the environment file you have created. This means no one will be able to see your information. The only thing they will see are the names of the variables you created. Mine looks like this:

![example of a file being pasted into .gitignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtqvkzp2gaipl0xcw24e.png)

---

The environmental variables do not have to apply only to the creation of action mailer as I have shown. For example, if you were to use the `devise gem` it contains a key within the comments that should become an environmental variable instead. Bottom line, if you are working on something that involves using a key or password or any kind of information that could create a security risk, create that environmental variable.
Hacktober 2022 Laptop Giveaway
Tags: podcast, webdev, javascript, beginners
Published: 2022-10-04 14:33:08


That is right you could win a brand new [Samsung Chromebook Pro](https://www.samsung.com/us/computing/chromebooks/12-14/samsung-chromebook-pro-xe510c24-k01us/), just for becoming a [CodingCat.dev](http://CodingCat.dev) member during the Hacktober month of October 2022. Use Coupon code HACKTOBER2022.


## Why the giveaway?

The goal is to have everyone learn to be a developer, without the necessary resources it can be really hard! Not everyone can afford to buy a laptop, so we thought it would be a good idea to give one away. Ideally I would love to give 100 away, but maybe when we grow as big as [Freecodecamp.org](https://freecodecamp.org) we can do that!

## How do I win?

Become a member of [CodingCat.dev](http://CodingCat.dev) by the end of October and the 100th person will win.

![](https://media.codingcat.dev/image/upload/f_auto,c_limit,w_3840,q_auto/main-codingcatdev-photo/Hacktober_2022_Laptop_Giveaway.jpg)

## Are more courses coming?

Yes we are actively working on a new SolidJS course right now! We also hope to update Svelte and JavaScript as a 10 year old.

## How long do I need to be a member?

You must be subscribed after October 1 and still be active November 1. But we would really love to see you around the [Discord](https://discord.com/invite/vM2bagU)!
pg_hint_plan: Get the right plan without surprises
Tags: postgres, yugabytedb, hint, sql
Published: 2022-10-04 14:21:42

If you work with PostgreSQL or any PostgreSQL-compatible database, you can install `pg_hint_plan` to understand better the query planner choices. It is there by default in YugabyteDB to make it easier.

This extension is really good, but your first steps may be hard, and you may even think your hints are not taken into account. In this session, I explain everything you need to get your hints doing what you expect:
{% embed https://www.youtube.com/watch?v=Sc2daTiKTWk&ab_channel=PostgresConference %}

Thanks a lot to https://postgresconf.org for the recording. Next talks: https://postgresconf.org/conferences/PostgresWorld-Webinars-2022/tickets
Building and distributing Vite.js projects with Amplify
Tags: vite, amplify, aws
Published: 2022-10-04 14:20:09

On our last project we decided to use [vite.js](https://vitejs.dev/). We can now claim we **LOVED IT**! We loved vite's speed regarding serving our file and found it extremely intuitive and right for the project.

Yet development with vite implied quite a problem regarding our hosting on the web app. The fact vite is module based and has css code splitting, made the hosting of the project tough. 

When we first started hosting it on amplify, we had the issue that the enviroment was completely blank, and none of the page contents were fetched by the service. 

We fixed the initial problem by using the redirect AWS suggests for SPA's:
`</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>`

> Beware with this redirect link as it's position on teh rewrites and redirects can affect the performance of the page.

So our rewrites and redirects page ended up looking like this:


![Image of our amplify redirects page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlh10gh3pjsme3zfym9p.png)



Then we had to adapt the build settings so that the `dist` folder vite creates can be found by amplify:

Our build file ended up looking like this:

```yaml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build --prod
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
```

After following this steps, we could host the webpage correctly, yet amplify still had arbitrary issues on fetching some webpages. For example redirects were not working and took us to a blank page that claimed Amplify CloudFrontURL couldn't find the page. 

Apparently some fractions of the code weren't being found. This is the problem that held us days, and to which we struggled to find the solution. The thing was, we had to change some things in `vite.config.js` that were making the base of the project untraceable to amplify.

Our `vite.config.js` ended up looking like this. Adding `base: './index.html'` was what managed to fix the mistake of arbitrary 404 we had:

```js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  server: { https: true },
  plugins: [react(), mkcert()],
  base: './index.html',
  build: {
    input: {
      app: './index.html', // default
    },
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    }
  }
})
```

We hope this solution helps someone struggling with the same problem.
Use GitHub actions to publish your package on NPM
Tags: javascript, npm, typescript, github
Published: 2022-10-04 14:06:30

Recently, I created a package with the [ESLint](https://eslint.org) settings I like to use in my React projects, as I was tired of always having to configure it when I start new React projects. Publishing a NPM package is just a matter of running `npm publish` on the directory of your package (considering, of course, that you already have an NPM account and is authenticated on your terminal). But I wanted to automatize this publishing everytime I created a new release.

In order to do that, I used the following GitHub Action:

```yaml
# File: .github/workflows/npm-publish.yml

# This workflow will publish a package to NPM when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Publish Package to npmjs

on:
  release:
    types: [created]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}
```

If you read the YAML file above (that you should put on the `.github/workflows/npm-publish.yml` directory of your git repository), you should have noted that the environment variable `NODE_AUTH_TOKEN` should be defined. Create a new automation access token on the control panel of NPM:


1. Access your NPM account and click in "Access tokens":
![Access tokens on NPM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hddbdiev3xhhrl0s09km.png)

2. Name your new access token and select the "Automation" type for it:


![Creating access token on NPM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4oect8iqd17igcbnrrg1.png)

3. Go to your GitHub repository, click in "Settings > Secrets > Actions > New repository secret", name it as NODE_AUTH_TOKEN and paste the access token you just got from NPM:


![Create a new secret on the GitHub repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv7pw3j8elyjeoaeehif.png)

4. Create a new release for your package. This should trigger our GitHub Action and publish to NPM.


![Creating a new release on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31fsgle783ujl75stld1.png)
Testes de Software
Published: 2022-09-12 23:13:34



> “Teste de Software é o processo de avaliar e verificar se um produto software ou aplicação faz/está fazendo o que deve fazer. Os benefícios incluem prevenir bugs, reduzir custos de desenvolvimento e melhorar a performance.” - IBM

Testes podem evitar problemas arquitetônicos, vulnerabilidades de segurança, entre outros.

## Tipos de Teste

Testes de Caixa Branca: Testam a parte de “dentro”, visto que possui acesso ao código fonte. Estes testes checam a estrutura do software e seu funcionamento interno.

Testes de Caixa Preta: Ao contrário do item anterior, os testes de caixa preta testam a parte de “fora”. Estes testes não possuem acesso ao código fonte, então o foco fica nas funcionalidades do software: se ele faz o que se pede, focando nos testes de entrada e saída.

## Testes

**Testes Funcionais**: Teste do tipo caixa preta. Focam nas saídas/outputs do software. Verifica se o software realiza e entrega o que foi pedido, ou seja, suas funcionalidades.

**Testes de Unidade**: Testam partes únicas do software, como funções de classes. Muito importante para a qualidade do software. Têm um custo mais baixo de automatização.

**Testes de Integração**: Pode ser de caixa branca ou de caixa preta. Testam as unidades citadas anteriormente juntas. Têm um custo maior de automatização, por ser mais complexo e mais demorado.

**Teste de Regressão**: Pode ser de caixa branca ou de caixa preta. Consiste em testar novamente tudo que já foi testado, evitando que bugs e má-funcionalidades no geral, que já apareceram em versões anteriores voltem a aparecer em novas versões ou até mesmo que novos problemas surjam.

**Teste de Carga e teste de Stress**: Valida a performance do sistema em relação a uma condição extrema.

**Teste de Usabilidade**: Geralmente aplicado entrevistando usuários para verificar as dificuldades dos usuários e possíveis má-funcionalidades.

---

**Fontes**:

[Tipos de testes - Canal QAlizando](https://www.youtube.com/watch?v=7FqlsKBY3OY)

[Software Testing - IBM](https://www.ibm.com/topics/software-testing)

[Types of Software Testing - Atlassian](https://www.atlassian.com/br/continuous-delivery/software-testing/types-of-software-testing)

[Testes - Monitoratec](https://www.monitoratec.com.br/blog/quais-os-tipos-de-testes-de-software-e-por-que-automatiza-los/)
JavaScript: Manipulation des tableaux
Published: 2022-10-04 13:46:53

---
title: JavaScript: Manipulation des tableaux
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

## Le `filter` (ne fait pas le cafè)

```js
let USERS = [
  { id: 1, name: "Paul" },
  { id: 2, name: "Jean-Karim" },
  { id: 3, name: "Jean-Babibel" },
]

// 1. Supprimer "Jean-Karim"
// id: 2
const id_du_user_a_supprimer = 2
USERS = USERS.filter(u => u.id != id_du_user_a_supprimer)
```


## Le `map` (ce n'est pas une carte)

```js
// 2. Modifier "Jean-Karim"
// id: 2
const id_du_user_a_editer = 2
USERS = USERS.map((u) => {
  if (u.id != id_du_user_a_editer) {
    return u
  } else {
    return {
      ...u,
      name: "Jean-Baptiste",
    }
  }
})
```
#Tools – TempMail 📨, the best tool to get a temporary email
Tags: englishpost, email, temporaryemail
Published: 2022-10-14 16:52:32

---
title: #Tools – TempMail 📨, the best tool to get a temporary email
published: true
date: 2022-10-04 13:43:43 UTC
tags: EnglishPost,Email,EnglishPost,TemporaryEmail
canonical_url: 
---

Hi !

I’ll write and share about [TEMPMAIL](https://temp-mail.org/), because IMHO, is the most easy temp mail service.

Just navigate to [Temp Mail – Disposable Temporary Email (temp-mail.org)](https://temp-mail.org/) and we can see a simple page with our temp mail, up and running.

![](https://brunocapuano.files.wordpress.com/2022/10/image.png?w=713)

Let’s send an email and … magic here it is ! You can browse the received emails, open them and even download the eml file !

![](https://brunocapuano.files.wordpress.com/2022/10/image-1.png?w=617)

As I said, it’s a super cool temp email site !

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
Flotiq Updates
Published: 2022-10-04 13:30:04

Over the last few weeks, we have been working on a few updates to the user experience in Flotiq.

So check what we prepared for you :)

## User guide onboarding on the dashboard
You can be guided on the Fltoiq dashboard, and in case of any questions, you can always get back to us with the help button on the bottom right corner.

![user guide Flotiq dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vddcadmayv230d1d5zob.gif)
## Media library
We are trying to improve your experience with Flotiq Media Library, so here are some of the updates:

- Media library - add, edit, remove media tag
- Media library - filter by tag
- Media library - multiple select and delete

![Flotiq Media Library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx4sjbyhg9m27ic29303.png)

An option to buy an extra plan File Quota on the Plan&Usage page

![Additional space to buy in Flotiq dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3mg3p9492u7fyiq75ik.png)
This is only part of the changes we are working on. Stay tuned to see more updates!

And let us know what you think at hello@flotiq.com
We will be happy to get feedback from you.
✨ Let's simplify content reuse together!
Openstack Manual install Part 4 - Placement and Nova
Published: 2022-10-04 13:27:02

---
title: Openstack Manual install Part 4 - Placement and Nova
published: true
description: In this video, we look into installing Placement and Nova services. The Placement service is used to gather statistics about your cluster and figure out where to put instances. Nova is the controller and compute nodes that will do the actual work.
tags:
cover_image: https://i.ytimg.com/vi/ySTNN9gB-Nw/maxresdefault.jpg
---

{% youtube ySTNN9gB-Nw %}

In this video, we look into installing Placement and Nova services. The Placement service is used to gather statistics about your cluster and figure out where to put instances. Nova is the controller and compute nodes that will do the actual work.
Calling overridden functions with Hardhat
Tags: hardhat, blockchain, javascript
Published: 2022-10-04 13:25:55

Often when we write tests for our smart contract functions we will use syntax:

`await name_of_contract.name_of_function(arg1, arg2, arg3) `

Where `name_of_contract` is the return value of smart contract deployment. Where `name_of_function` is an example function from smart contract we are testing.  

Now, if we want to call the `safeTransferFrom` function which is often marked as override & virtual in our smart contract (or any similar function) then we will need to use totally different syntax or error `safeTransferFrom is not a function` will be thrown.

That is why to avoid this problem entarily for any override & virtual we should use syntax:

`await name_of_contract["safeTRansferFrom(address,address,uint256)"](
      owner.address,
      bob.address,
      tokenId
    );`

Now `safeTransferFrom` will be seen by Hardhat and you will get expected return values.
Command Pattern using Generators in Javascript
Tags: generators, javascript
Published: 2022-10-04 13:23:52

I have already mentionned Karismir Tsonev in my posts.
Here is an example illustrating his implementation of the **command pattern**

```js


function *player(maxpong = 10) {
  let i = -1;
  let resp = "pong"
  while (++i < maxpong) {
    resp = yield resp
    document.write(resp + "<br />")
  }
}

function play(gen, tag) {
  let state = gen.next (tag)
  switch (state.value) {
    case "ping" :
     play(gen, "pong")
    break;
    case "pong" :
     play(gen, "ping")
    break; 
    default: 
     console.log("end game")
  } 
}


play(player()) 


```
You can play with in here : [PingPong](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4AOmjABXNNWIR6AAgBUABygYAnjABOACiwYAHqvoBzRQF5FARgAMASkXAJixbGKKIVxQFobANyu7jCeOvCqPmIgpmhm0cEA7oTQMIp6ANQZ3gA8ioYm5k4uaG5u4XCR1poQMFAAJooVqsFu9bTUUjgM+Ik6EIx6zYoZitE5AEY6igD0AHzRDsGsEitoEtKy8krqWnpmTBSKxBhmxcEeinAnjD4HaPhoMEaeeidnwXCJA9SE6dcYRj4ABuGCgUhg51KZWoGDgaWiqggcWiikQrTcu00+0OYxi5kWGKmMAwAGsgtC3LD4XjYvEQGiMYosTi0EdEcj6UtKYpiWSAmMefUYGAMFIoMREIKylT6HBaLB8FBaGY9NEmI0zFxCdDWIK1hIJCysbo9A4nIa0JQQPDYHIFGgEDwAEwAdkQdl8dg9bA4IEwODw+GocAENHojGYPDYAF1WEA)

and the official example from [Krasimir](https://50tips.dev/tip/9/generators)

```js
commander(robot());

function* robot() {
  const catURL = yield ["get-cat"];
  const imgTag = yield ["format", catURL];
  console.log(imgTag);
}
async function commander(gen, passBack) {
  let state = gen.next(passBack);
  switch (state.value ? state.value[0] : null) {
    case "get-cat":
      const res = await fetch("https://api.thecatapi.com/v1/images/search");
      const data = await res.json();
      return commander(gen, data[0].url);
    case "format":
      return commander(gen, `<img src="${state.value[1]}" />`);
  }
  if (!state.done) {
    commander(gen);
  }
}
```
It's 2022 - time to stop using headless WordPress and ACF
Tags: wordpress, javascript, react, cms
Published: 2022-10-04 13:17:43

### In 2016, WordPress + ACF was one of the best ways to build a headless CMS. ACF made it useful. But it was never ideal.

The Payload team has built so many projects with headless WordPress + ACF, and at one time, it was the best tool for the job. ACF features like Conditional Logic and the "Flexible Content" field made it worth the WP headache. 

But it always felt so wrong in so many ways. When we started building Payload, part of our goal was to take what ACF did well—but do it even better. We were set on not making any compromises. If ACF had a core feature that we used, Payload should have it as well. The same experience created in WP should be better in every single way if built in Payload. 

That means in regards to developer experience, editor experience, speed, maintainability—everything.

### Payload is a strong WordPress alternative

Now that Payload 1.0 is released, there's no longer a reason for developers to build on headless WP. We built a repo that shows how you'd typically build something in WP, and how you can replicate the same thing with Payload.

Check out the video below to see what makes headless WP a bad choice for modern devs, and why Payload is so much better suited to the job.

{% youtube t8AU4r9RGPU %}

#### Give us a star on GitHub

> If you haven't already, stop by our GitHub page and [leave us a star](https://github.com/payloadcms/payload) by clicking on the star icon in the top right corner. This helps us grow and gain exposure within the development community.

#### Join our community on Discord

We've recently started a Discord community for the Payload community to interact in realtime. Often, Discord will be the first to hear about announcements like this move to open-source, and it can prove to be a great resource if you need help building with Payload. [Click here](https://discord.com/invite/r6sCXqVk3v) to join!

#### Get up and running with one line

Getting started is easy—and free forever. Just fire up a new terminal window and run the following command:

```
npx create-payload-app
```
Ruby and it's many, many (many) methods.
Published: 2022-10-04 13:12:30

When told that Ruby was an Object Oriented Programming language, my first thought was: and? What is it that ruby can do that JavaScript (and React.js <3) can't?

The answer to that is nothing. There's nothing ruby can do that can't be recreated with JS (well, except deal with [high CPU intensive application development](https://www.educba.com/javascript-vs-ruby/), but that's for another blog post). The main thing is: It can do it in a faster and simpler way than JS would ever think of doing it.

And how is that possible? you may ask. Ruby has a lot of methods, which are a set of expressions that return a value. With it, it's easier to access and modify your code along the needs of your project. We won't be covering all of them here, because there would not be enough space. Instead, let's just go over the basics.


![Eleanor gets it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ywj8hbo1fx06y0ucheo.gif)


### .first

You know how when calling elements out from an array, you have to do the whole index thing? Array[0], or Array.obj[1], and it gets progressively worse? Ruby solved that for you. All you need to do is literally call the first element.

```
array = [1,2,3,4,5]
array.first
=> 1
```

What if I want the second element?

```
array = [1,2,3,4,5]
array.second
=> 2
```

But that can't work for all of the elements. Can it?

```
array = [1,2,3,4,5]
array.third
=> 3
```

**It can!!!!!!!!!!! **


![We must stan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/el8kuc1z0stnqgiuob4q.gif)

### .include?

That one sounds simple enough. We want to check if our element is included in the array we're searching through.

```
array = [1, 2, 3, 4, 5]
=> [1, 2, 3, 4, 5]
array.include?(3)
=> true
```

### .join

This one is my pride and joy(n). You can call an array and transform it into a string, with a separator parameter. 

```
array.join
=> "1234"
array.join("*")
=> "1*2*3*4"
```

###  .uniq

As the name says, this iterates over an array and returns only one of each element that's in it. All the duplicate elements are removed from the array.

```
array = [1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 6, 7, 8]
array.uniq
=> [1, 2, 3, 4, 5, 6, 7, 8]
```

###  .drop_while

It's a simpler way to select elements in your array. It drops elements up to, but not including, the first element for which the block returns nil or false and returns an array containing the remaining elements.

``` 
a = [1, 2, 3, 4, 5, 0]

a.drop_while { |i| i < 3 }   
=> [3, 4, 5, 0]

```

Now that you've seen how easy and intuitive ruby methods are, are you interested in learning more of them? Try it out and happy coding!


Sources

https://www.freecodecamp.org/news/common-array-methods-in-ruby/

https://apidock.com/ruby