teleren/devto huggingface dataset:
My First Open Source Contributions
Tags: opensource, codenewbie, beginners
Published: 2023-08-23 03:37:24

Hey Folks! 👋

So... For the last past month i've been reading other people post about their contribution to the open source project. And i've been asking myself "Why am i never contribute to any open source project?" i mean... you can't lose anything by helping other people right? Instead, you will gain new knowledge. you might learn something from other people (and you will). 

By inspired from other people journey about contributing to open source, i want to do it to, so.. i'm searching what kind of project i could possibly to contribute. and then i found a website from a post at freecodecamp called [firsttimeronly](https://www.firsttimersonly.com/). and in that website, there's a bunch of resources you could contribute for an "open source newbie" like me! And then i found a github repo called [firstcontributions](https://github.com/firstcontributions/first-contributions). That repo is meant to help the beginners to make their first contribution.


![firstcontributions github repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx5lksx5775l8n4kecti.png)

To contribute to that "project" is very easy. you just need to fork the project -> clone it -> create new branch -> add your name to the Contributors.md file -> create a pull request


![My first PR got accepted!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71bqr5l0d56yg3qg9fc0.jpeg)

That's it! 😎 very simple right?

and some of you might think "Just adding my name to the one of the file? that's very unneccessary". Yeah, That's true. But, if you not start with something small, how do you think you could start with something big? everything will start with small things, and it'll get bigger as the time flies.

OK, let's get back after creating my pull request. a few minutes later, i got the notification that my PR is accepted! and oh my god... i got so excited! you know the feeling you get after you achieving something you never done it before? yes, that feels good right? i know my first contribution is useless / unnecessary. but i really hope this is the beginning of my journey to be more active contributing to open source projects

That's it from me folks! Thank you for reading my little journey
How to Deploy a React app to Heroku
Tags: heroku, react, deploy
Published: 2023-08-23 03:22:36

---
title: How to Deploy a React app to Heroku
published: true
description: 
tags: heroku, react, reactjs, deploy
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-23 03:22 +0000
---

Deploying a React app to Heroku is a straightforward process. Below is a step-by-step guide:

### Prerequisites:
1. Ensure you have Git installed.
2. Ensure you have a Heroku account. If not, sign up [here](https://signup.heroku.com/).
3. Install the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli).

### Steps to Deploy:

**Initialize a Git Repository** (If it's not already a Git repository)
   ```
   git init
   ```

**Commit Your Code**:
   If you haven't committed your React app to git yet, you can do so with the following commands:
   ```
   git add .
   git commit -m "Initial commit"
   ```

**Create a Heroku App**:
   ```
   heroku login
   heroku create <optional-name-of-your-app>
   ```

**Use a Static Server**:
   Since a React app consists of static files when built, you will need a server to serve these files. One popular option is the `serve` package.

   Install `serve`:
   ```
   npm install serve --save
   ```

   Modify your `scripts` section in `package.json`:
   ```json
   "scripts": {
     "start": "serve -s build",
     "build": "react-scripts build",
     "dev": "react-scripts start",
     ...
   }
   ```

   The above configuration will serve your `build` directory when you run `npm start`.

**Set Up Node.js Server**:
   For Heroku to recognize the app as a Node.js app, you should have both `package.json` and a `Procfile` at the root of your project.

   Create a `Procfile` (no file extension) in the root directory and add the following line:
   ```
   web: npm start
   ```

**Update .gitignore**:
   Ensure you're not excluding the `build` directory in your `.gitignore`. Heroku needs this to serve your app.

**Build Your App**:
   ```
   npm run build
   ```

**Commit the Build**:
   ```
   git add .
   git commit -m "Prepare for Heroku deployment"
   ```

**Push to Heroku**:
   ```
   git push heroku master
   ```

**Open Your App in the Browser**:
   Once the deployment process completes, you can view your app in the browser:
   ```
   heroku open
   ```

That's it! Your React app should now be live on Heroku. Remember that whenever you make changes to your React app, you'll need to rebuild and push to Heroku again.

Check out [Dopebase Tutorials](https://dopebase.com/tutorials) for more tech articles.
Iwin Club - Tải Iwin Chơi Game đánh Bài Trực Tuyến Mới Nhất
Published: 2023-08-23 03:22:21

IwinClub- Trang web chia sẻ tin chính thức từ cổng game bài Iwin. Link tải Iwin Club Ios, Android, Apk đã qua kiểm duyệt!
website: https://iwin8.live/
SĐT 0983311110
Địa chỉ 4 Bông Sao, Phường 5, Quận 8, Thành phố Hồ Chí Minh, Việt Nam
Hastag #iwin8 #IwinClub #TảiIwin #iwin8live.
https://www.youtube.com/@iwin8live
https://twitter.com/iwin8live
https://www.pinterest.com/iwin8live/
https://www.linkedin.com/in/iwin8live/
https://www.twitch.tv/iwin8live/about
https://www.reddit.com/user/iwin8live
https://www.quora.com/profile/Iwin8live
https://soundcloud.com/iwin8live
https://500px.com/p/iwin8live?view=photos
https://flipboard.com/@iwin8live
https://ko-fi.com/iwin8live
https://wakelet.com/@iwin8live
https://folkd.com/user/iwin8live
https://en.gravatar.com/iwin8live
https://issuu.com/iwin8live
https://www.reverbnation.com/page_object/page_object_photos/artist_8574648?photo=35259035
https://hub.docker.com/u/iwin8live
https://fliphtml5.com/homepage/uvcgr
https://peatix.com/user/18740741/view
https://www.walkscore.com/people/500974533276/iwin-club
https://camp-fire.jp/profile/iwin8live
https://my.archdaily.com/us/@iwin-club-32
https://community.windy.com/user/iwin8live
https://community.opengroup.org/iwin8live
https://qiita.com/iwin8live
https://anyflip.com/homepage/bkvkt
https://about.me/iwin8live/edit
https://www.flickr.com/people/198996851@N03/
https://gab.com/iwin8live
https://www.vingle.net/posts/6668550
https://dribbble.com/iwin8live/about
https://research.openhumans.org/member/iwin8live/
https://glose.com/u/iwin8live
https://www.kickstarter.com/profile/1242854288/about
https://knowyourmeme.com/users/iwin-club--21
https://connect.gt/user/iwin8live
https://onlyfans.com/iwin8live
examor: For students, scholars, interviewees and lifelong learners
Published: 2023-08-23 03:13:14


### 🏁 Description
examor is a website application that allows you to take exams based on your knowledge notes. Let you really remember what you have learned and written.


![usecase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zapl4n679t99il9uoqh.png)

### 💡 Inspiration
When I’m learning a new technology, I have the habit of taking notes and jotting down important information. It’s a good habit, but I also have a bad habit of not enjoying reading the notes I’ve written (I’m not sure if this is the case for most people 🫣). This results in my notes becoming mere mementos without substantial use. That’s why I choose to create an application that continuously prompts you with questions to review your note contents.

### ✨ Features
This project primarily focuses on question generation and answer detection based on user documentation. In the initial version, I’ve implemented a simplified version of the Ebbinghaus memory curve, which allows periodic reviews based on the accuracy of your answers.

- **Generate Issues from Documentation**

When users create notes, they can upload associated documents. The application generates a set of questions from these documents, based on their content. These questions will be presented to the users in the future.

- **Answer Detection**

After users receive daily questions, they can provide answers. GPT will score, validate, and provide the correct answers. The score is determined by evaluating the correctness of the answers and the linked document (0 ~ 10 points). This score influences the subsequent Ebbinghaus review process.

- **Ebbinghaus Memory**

Regarding the actual function, once GPT generates a test, the score is recorded and affects the future review date. Higher scores result in longer intervals until the next review.

- **Role Selection**

![Role](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7tq0njfq1dfir518m8w.png)

Roles can provide more possibilities for question generation and assessment. You can set roles in the configuration page. For more information about various roles, it’s recommended to refer to the [Role Manual](https://github.com/codeacme17/examor/blob/main/docs/role.md).

Finally thank you for reading ! You can enter to [examor repo](https://github.com/codeacme17/examor) see more. If you are interested in this project, you can point it to a star.
The world of Passkeys
Tags: ruby, writing, passkeys, softwaredevelopment
Published: 2023-08-23 03:05:46

It took me a few days to clear up the deck of priority tasks, but here I am: [The world of Passkeys (permanent link)](https://hac-rods.me/posts/2023/the-world-of-passkeys/)

It was surprisingly easy to write this up... But I certainly feel like I have more about this topic to write!
But this will go as is!

If you like it... If you have comments or questions... ;-)

./Helio
Encadeamento com RxJS
Tags: rxjs, functionalreactiveprogramming, webdev
Published: 2023-08-23 02:48:48

Ao trabalhar com aplicações modernas e reativas, uma das bibliotecas mais populares para lidar com fluxos de dados assíncronos é o RxJS. Neste post, vamos explorar o encadeamento de operadores usando o RxJS.

## O que é RxJS?

RxJS é uma biblioteca para programação reativa usando Observables, para facilitar a composição de código assíncrono ou baseado em callback. Simplificando, ela permite que você crie e manipule sequências de eventos ou dados de forma declarativa.

## Encadeamento com Operadores

Uma das características mais poderosas do RxJS é a capacidade de encadear operadores. Os operadores são funções puras que permitem a composição e transformação de observables.

Vamos dar uma olhada em um exemplo básico:

```typescript
import { from } from 'rxjs';
import { filter, map } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5]);

const evenSquares = numbers.pipe(
  filter(num => num % 2 === 0),
  map(num => num * num)
);

evenSquares.subscribe(value => console.log(value));
```

No exemplo acima, começamos com um Observable que emite números de 1 a 5. Primeiro, filtramos os números ímpares e depois mapeamos os números restantes para seus quadrados. O resultado seria:

```
4
16
```

## Principais operadores e seu encadeamento

Aqui estão alguns dos operadores mais comuns e como você pode encadeá-los:

1. **`map`**: Transforma os valores emitidos pelo observable.
2. **`filter`**: Filtra os valores com base em uma condição específica.
3. **`mergeMap/flatMap`**: Mapeia cada valor para um observable e os "achata" em um único observable.
4. **`switchMap`**: Como o mergeMap, mas cancela qualquer emissão anterior se um novo valor é emitido.
5. **`catchError`**: Captura erros no observable e permite tratá-los ou substituí-los.

### Exemplo com encadeamento de múltiplos operadores

Vamos imaginar que queremos obter dados de uma API, transformá-los e filtrar alguns resultados.

```typescript
import { of } from 'rxjs';
import { catchError, filter, map, switchMap } from 'rxjs/operators';

const apiCall = (url: string) => {
  // Aqui você poderia fazer um fetch ou algo similar
  return of([{ id: 1, name: 'Example' }]); // Dummy data
};

const data$ = of('api/my-endpoint').pipe(
  switchMap(url => apiCall(url)),
  map(data => data.name),
  filter(name => name !== 'ExcludeMe'),
  catchError(error => {
    console.error('Error:', error);
    return of([]);
  })
);

data$.subscribe(data => console.log(data));
```

## Conclusão

O encadeamento com RxJS proporciona uma maneira elegante e declarativa de manipular streams de dados. Com uma compreensão sólida dos operadores disponíveis e como encadeá-los, você pode escrever código assíncrono mais limpo e compreensível. Experimente em seus projetos e veja por si mesmo o poder da programação reativa!
Operadores RxJS: Manipulando Observáveis com Elegância
Tags: rxjs, functionalreactiveprogramming, webdev
Published: 2023-08-23 02:45:19

No mundo do RxJS, os Observáveis podem parecer estrelas no começo. No entanto, assim que começamos a lidar com sequências mais complexas e variadas, os operadores entram em cena como verdadeiros heróis. Neste post, mergulharemos no universo dos operadores RxJS e descobriremos como eles podem elevar nossa programação reativa a um novo patamar.

## 1. O que são Operadores?

No contexto do RxJS, **operadores** são funções puras que permitem você manipular, transformar, filtrar e combinar Observáveis. Eles são essenciais para a programação reativa, permitindo-nos trabalhar com sequências assíncronas de forma elegante e declarativa.

## 2. Tipos de Operadores

Os operadores podem ser categorizados em dois tipos principais:

### a) Operadores de Criação

Eles permitem criar Observáveis a partir de várias fontes.

- **of**: Cria um Observável a partir de valores específicos.
  ```javascript
  import { of } from 'rxjs';

  const observavel = of(1, 2, 3);
  ```

- **from**: Transforma outras estruturas, como arrays ou promises, em Observáveis.
  ```javascript
  import { from } from 'rxjs';

  const observavel = from([4, 5, 6]);
  ```

### b) Operadores de Pipeable

Estes operadores são usados para transformar ou manipular valores emitidos por Observáveis.

- **map**: Aplica uma função a cada valor emitido.
  ```javascript
  import { of } from 'rxjs';
  import { map } from 'rxjs/operators';

  const observavel = of(1, 2, 3).pipe(map(x => x * 2));
  ```

- **filter**: Filtra os valores com base em uma condição específica.
  ```javascript
  import { of } from 'rxjs';
  import { filter } from 'rxjs/operators';

  const observavel = of(1, 2, 3, 4, 5).pipe(filter(x => x % 2 === 0));
  ```

## 3. Combinando Operadores

Uma das maiores vantagens do RxJS é a capacidade de encadear operadores para criar pipelines de transformação.

```javascript
import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const observavel = of(1, 2, 3, 4, 5)
  .pipe(
    filter(x => x % 2 === 0),
    map(x => x * 10)
  );
```

Neste exemplo, filtramos números pares e depois multiplicamos o resultado por 10.

## 4. Conclusão

Os operadores RxJS são ferramentas indispensáveis na caixa de ferramentas do desenvolvedor reativo. Eles fornecem a flexibilidade e o poder para manipular Observáveis de formas quase infinitas. Ao compreender e dominar os operadores, você estará bem preparado para lidar com as complexidades da programação assíncrona e reativa em suas aplicações.

Lembre-se de que o RxJS possui uma vasta gama de operadores, cada um com sua própria utilidade e característica. Portanto, é altamente recomendável explorar a [documentação oficial](https://rxjs.dev/guide/operators) para se aprofundar ainda mais nesse universo!

---
Observáveis e Inscritores: Entendendo a Magia do RxJS
Tags: rxjs, functionalreactiveprogramming, webdev
Published: 2023-08-23 02:43:14

A programação reativa tem ganhado notoriedade no mundo do desenvolvimento JavaScript e, no centro dessa revolução, encontramos os Observáveis do RxJS. Mas, o que são Observáveis? E o que significa se inscrever neles? Vamos decifrar esses conceitos juntos!

## 1. O que é um Observável?

**Observável** é uma representação de uma fonte de valores ou eventos que são emitidos ao longo do tempo. Pense neles como funções que podem retornar múltiplos valores ao longo do tempo, em vez de apenas um único valor, como as funções tradicionais.

```javascript
import { Observable } from 'rxjs';

const meuObservavel = new Observable(inscritor => {
  inscritor.next('Primeiro valor!');
  inscritor.next('Segundo valor!');
  inscritor.complete();
});
```

Neste exemplo, nosso Observável emitirá dois valores e, em seguida, indicará que completou a emissão.

## 2. O que é um Inscritor?

Quando falamos de Observáveis, o termo **inscritor** (ou *subscriber*, em inglês) é frequentemente mencionado. Ele é a ligação entre o Observável e os observadores. O inscritor é responsável por enviar notificações para o observador.

No exemplo acima, a função passada ao criar o Observável recebe um inscritor como argumento. Você pode pensar no inscritor como um canal de comunicação entre a fonte de dados (Observável) e o consumidor (Observador).

## 3. Subscrevendo-se a um Observável

Para receber os valores emitidos por um Observável, é necessário **se inscrever** nele. Isso é feito usando o método `.subscribe()`.

```javascript
meuObservavel.subscribe(valor => {
  console.log(valor);
});
```

Quando você se inscreve em um Observável, na verdade, está fornecendo um observador para ele. Este observador é um conjunto de callbacks para receber os valores emitidos, erros e notificação de conclusão.

## 4. Cancelando a Subscrição

Uma das características poderosas dos Observáveis é a capacidade de **cancelar a subscrição**. Isso permite que você encerre a recepção de valores e libere recursos conforme necessário.

```javascript
const subscrição = meuObservavel.subscribe(valor => {
  console.log(valor);
});

// Depois de algum tempo...
subscrição.unsubscribe();
```

## 5. Conclusão

Observáveis são uma abordagem poderosa e flexível para lidar com sequências assíncronas de valores ou eventos. Combinado com a capacidade de se inscrever e cancelar a subscrição, o RxJS oferece uma plataforma rica para desenvolver código reativo eficiente e elegante.

Seja você um novato em programação reativa ou alguém que deseja aprofundar seu conhecimento, compreender Observáveis e Inscritores é fundamental para dominar o RxJS e a programação reativa em JavaScript.

---
Conceitos Básicos de RxJS
Tags: rxjs, webdev, functionalreactiveprogramming
Published: 2023-08-23 02:41:00

Ao explorar o universo JavaScript moderno, é provável que você encontre referências ao RxJS. Esta biblioteca tem ganhado destaque no ecossistema front-end, especialmente com o crescimento do Angular. Então, quais são os conceitos básicos do RxJS? Vamos mergulhar juntos!

## 1. O que é RxJS?

**RxJS (Reactive Extensions for JavaScript)** é uma biblioteca para programação reativa usando observáveis. Ela fornece uma maneira poderosa de manipular sequências de eventos ou valores ao longo do tempo.

## 2. Principais Conceitos

### a) Observáveis

São sequências de valores ou eventos que podem ser emitidos ao longo do tempo. Eles podem emitir múltiplos valores, ao contrário das Promises que resolvem apenas uma vez.

```javascript
const observable = new Rx.Observable(observer => {
  observer.next('Hello');
  observer.next('World');
});
```

### b) Observadores

São objetos que definem callbacks para notificações entregues pelos observáveis.

```javascript
const observer = {
  next: value => console.log(value),
  error: err => console.error(err),
  complete: () => console.log('Completed!')
};
```

### c) Subscrição

Para começar a receber os valores emitidos por um observável, um observador precisa se inscrever nele.

```javascript
const subscription = observable.subscribe(observer);
```

### d) Operadores

São funções puras que permitem uma ampla gama de operações, como mapeamento, filtragem e redução. Os operadores podem ser encadeados para criar novos observáveis.

```javascript
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5]);
const evenNumbers = numbers.pipe(filter(n => n % 2 === 0));
evenNumbers.subscribe(value => console.log(value));
```

### e) Subjects

São observáveis especiais que também podem agir como observadores. Isso significa que você pode chamar `next()` neles para emitir novos valores.

```javascript
import { Subject } from 'rxjs';

const subject = new Subject();

subject.subscribe(value => console.log(`Observer A: ${value}`));
subject.subscribe(value => console.log(`Observer B: ${value}`));

subject.next(1);
subject.next(2);
```

## 3. Por que usar RxJS?

- **Manipulação Assíncrona**: Simplifica operações complexas e assíncronas.
- **Flexibilidade**: Fornece uma ampla gama de operadores.
- **Elegância**: Torna o código mais legível e compreensível.
- **Gerenciamento**: Facilita o cancelamento de operações e a gestão de recursos.

## 4. Conclusão

RxJS é uma biblioteca robusta que traz conceitos da programação reativa para o JavaScript. Seja para lidar com eventos do usuário, chamadas de API ou qualquer outra sequência de valores, o RxJS oferece ferramentas que podem tornar seu código mais limpo, eficiente e poderoso.

---

Espero que este post forneça uma base sólida para você começar a explorar o mundo do RxJS!
"Estruturas de dados", tem dado importância?
Tags: programming, productivity, coding
Published: 2023-08-23 02:39:08

Algoritmos e estruturas de dados são e devem ser a base de todo programador, independentemente do seu nível, seja júnior, pleno ou sênior. Esses fundamentos farão parte de toda a sua carreira como desenvolvedor.

Estudar estruturas de dados pode ser muito desafiador, pois quanto mais você se aprofunda, mais longe ele te leva. Quando se trabalha com grandes volumes de dados, implementar códigos eficientes, estruturados e bem organizados pode ser bastante difícil se ainda não se tem o domínio das estruturas de dados.

Arrays, listas, pilhas, grafos, árvores - cada uma dessas estruturas tem seus métodos e suas próprias características para realizar as operações corretas e as que mais se encaixam na necessidade.

No entanto, apesar da extrema importância, a maioria dos cursos de programação não dá o devido valor, acabando por abordar assuntos bastante superficiais nesse vasto mar de conteúdos.

Livros e artigos acabam se tornando a solução, e deixo aqui uma indicação de um ótimo livro que aborda com clareza e, o principal, ilustra todo o comportamento por trás das estruturas. O livro se chama "Entendendo Algoritmos: Um Guia Ilustrado Para Programadores e Outros Curiosos". Fica aqui a minha contribuição para o seu maior entendimento sobre esse assunto que o perseguirá eternamente.