teleren/devto huggingface dataset:
Project : Coin Flipper & Color Boxes | Day 9
Tags: react, javascript, webdev, beginners
Published: 2022-01-12 18:14:52


# Coin Flipper

**create a coin flipping counter.**

**The user should be able to click on a button to flip a coin. Every time the user clicks, the coin gets flipped again. The app should also keep track of how many times heads and tails have shown up.**

**Before building anything, *think about the structure of your React app.* Don’t build this application with a single component: think about how to break your app up into at least two separate components!**

**Here’s some inspiration:**

![Coin Flipper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njleaiko6hha3l7jfhm8.gif)

**If you’d like, get creative and come up with your own coin faces! If you want to use the same coin as I did, you can find the images here:**

**Heads:”[https://tinyurl.com/react-coin-heads-jpg](https://tinyurl.com/react-coin-heads-jpg)”** 

**Tails: “[https://tinyurl.com/react-coin-tails-jpg](https://tinyurl.com/react-coin-tails-jpg)”**

**Code** 👇

[https://github.com/Developer-io-web/Coin-Flipper](https://github.com/Developer-io-web/Coin-Flipper)





# Color Boxes

**For this part, you should show a series of 16 boxes (a box is just square div with a background color).**

**Initially, each box should have a background color chosen from a random list of colors.**

**When you click any box:**

- **it should change its color to a different random color.**

**Here’s some inspiration:**

![React Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egpyox2jua7bjayk62ly.gif)

**Code** 👇

[https://github.com/Developer-io-web/Color-Boxes](https://github.com/Developer-io-web/Color-Boxes)


Happy Coding 😄!
We created an online version of the social Mafia game for The MongoDB Atlas Hackathon!
Tags: atlashackathon
Published: 2022-01-12 18:13:27

### Overview of My Submission
I have always been a huge fan of the Mafia game, and it's one of my favourite games to play with family and friends.
Usually we play in a 5 or 6 players setting, that means that one player needs to be the game master so they can manage
and coordinate the game for the other players.
One day I got an idea, why not make the whole process automated, without the need for a game master, so the extra player could join in the game?
And so we did!
Let me introduce you to Mafia, the online multiplayer Mafia based game. Built using React, Node.js, Express, socket.io and MongoDB!
One player creates a room and the other players can join the same room, after the agreed on amount of players join the game would start and the rest is automated for you to experience the best Mafia game!
It features a total of 11 roles, with 7 being Town roles, and 4 being Mafia roles. An algorithm assigns teams and roles automatically by detecting the amount of players, while
still making sure the roles and teams assignments are random every game
The game manages the day discussions, voting and night cycles for you, and gives you feedback on the actions you choose.
The minimum players limit is 4 and while there is no max limit, we recommend 16 as to not experience issues with the game's server 🥵.
The game is mobile-first responsive to ensure a solid and error-free experience on portable devices.
What are you waiting for? Get some friends, then start playing immediately by [visiting this link!](projects.b2b-iys.muhammed-aldulaimi.com) 😄


### Submission Category: 
Choose Your Own Adventure

### Link to Code
[Github](https://github.com/that-one-arab/mafia-game)

### Additional Resources / Info


![Main Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwi42viwntlxleopwxx0.png)

![Create Game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onjyg4feqn2me0dmurh2.png)


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


![Mafia Killed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsv5nwbj3c7hbywc9k8p.png)


![Player died](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1ml32wfwyxpi627yk4n.png)


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

## Stack:
-   [ReactJS](https://reactjs.org/) - A frontend library/framework for building UI
-   [NodeJS](https://nodejs.org/en/) - A javascript runtime environment
-   [ExpressJS](https://expressjs.com/) - A back end web application framework for Node.js
-   [SocketIO](https://socket.io/) - a library that enables real-time, bidirectional and event-based communication between the browser and the server
-   [MongoDB](https://www.mongodb.com/) - cross-platform document-oriented database

## Collaborators:
[Aws Nafea](https://dev.to/awsnafea)
[E-Commerce Furniture Portal using MongoDB Atla]
Tags: atlashackathon, mongodb, node
Published: 2022-01-12 17:56:27

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
It is an e-commerce Furniture Portal. Where you can buy all type of furnitures. In this portal we had also intergrated payment gateway for transaction . We also had admin dashboard to add ,delete and update the product details. we had also used mongodb Atlas a cloud based nosql database.

#### Tech Stack:

##### Frontend:

* bootstrap

##### Backend:

* Node.js
* express.js

##### Database:

* MongoDB

### Submission Category: 
E-Commerce Creation


### Link to Code

Github Link : {% github https://github.com/kishoredurai/goldenstar-furniture %}


### Additional Resources / Info<br>


### Demonstration

The application is deployed to Heroku and can be accessed through the following link:

[Golden Furniter](https://goldenfurniture.herokuapp.com/)

### Features

The application displays a Furniture store that contains virtual products and contact information.

#### User:

- Create an account, login or logout
- Browse available products added by the admin
- Add products to the shopping cart
- Delete products from the shopping cart
- Display the shopping cart
- To checkout, a user must be logged in
- Checkout information is processed using stripe and the payment is send to the admin
- The profile contains all the orders a user has made


#### Admin:

- Login or logout to the admin panel
- View all the information stored in the database. They can view/add/edit/delete orders, users, products and categories. The cart model cannot be modified by an admin because a cart is either modified by the logged in user before the purchase or deleted after the purchase.

### Screenshot


#### Home Page

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

####  Products Page

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


#### Admin Dashboard Page

![admin Dasboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld2zda1t77g7pg31ukyd.png)

---


### Developed by  [kishoredurai](https://www.linkedin.com/in/kishore-durai-7932321a4/)
Education Website
Tags: atlashackathon
Published: 2022-01-12 17:53:29

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
CodeChef CU Chapter is the official campus chapter of CodeChef run by the students of Chandigarh University. The aim of the chapter is to open opportunities to all the students in the university to learn from hands-on experience in the industry and getting to learn from professionals working in the industry right now. We are a community which aim to install problem solving aptitude and promote competitive programming while also giving development exposure to all the members.

GitHub - https://github.com/cu-coders/backend
License - https://github.com/cu-coders/cucoders/blob/master/LICENSE
Readme - https://github.com/ank1traj/cucoders/blob/master/README.md

### Submission Category: E-Learning


### Link to Code - https://github.com/cu-coders/backend

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github https://github.com/cu-coders/cucoders/ %}` to share a GitHub repository)


### Additional Resources / Info

https://treact.owaiskhan.me/
Whats the difference between Args and Env in Docker
Tags: docker, dotnet, tutorial, devops
Published: 2022-01-12 17:51:29

In this article we are going to discuss what's the difference between Args and Env within docker

You can watch the full video on YouTube 
{% youtube MaoGm1rO_Qc %}

You can find the source code on github:
https://github.com/mohamadlawand087/v5-dockerComposeAspNetCpre

When you are creating your docker file to containerise your application often you want to pass arguments to your docker image and to your container but this can get a bit confusing if you are just starting out with Docker and containerisation. 

Let us see how we can break this down 

### ARG - Build time var

Passing arguments to our docker image at build time we utilise ARG. ARG is only available during the build of a docker image. Once the image is build we cannot utilise ARG.

When utilising ARG it is advisable not to pass sensitive data as by using the following command

```bash
docker history
```

We can see the args that was passed to build the image

### ENV - All around Var

Unlike the ARG var, ENV is available to both the container and the image. The ENV can be overriden while starting a container


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mibe7tgkg5447ow780g.png)
100First - the #100daysofcode tracker!
Tags: atlashackathon
Published: 2022-01-12 17:48:20

### Overview of My Submission
The 100first is a web application to track the progress of your 100 days of code challenge, lets you share it across different handles and lets you generate a profile as proof. All you have to do is visit the website and start the challenge!


### Submission Category: 
**Choose Your Own Adventure**


### Link to Code

{% github GeoBrodas/100first %}

### Live Link to Application

https://100first.vercel.app

### 👀 Features
- Fast ( Made with Next.js ❤ )
- Cross Platform support
- Responsive
- Installable as PWA
- Simple and easy

### 🛠 Tech-Stack
- Next.js
- TailwindCSS
- MongoDB Atlas
- MongoDB driver
- React-Hot-Toast
- React-Awesome-Reveal
- NextAuth.js
- React-Icons

### Launch Video
{% youtube DPmJRFtFg_I %}

#### Screenshots
![Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8ayzxmo8vt555azij9g.png)

![Profile-screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eliiibgsspyt5xx2fiha.png)
 
![What can 100First do?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmgq6nbyapassnxyvrak.png)   

#### Resources
- [NextAuth.js](https://next-auth.js.org/)
- [Next.js](https://nextjs.org/) 
- [MongoDB driver Manual](https://docs.mongodb.com/drivers/node/current/)
- [TailwindCSS](https://tailwindcss.com/docs/guides/nextjs)
- [React-Icons](https://react-icons.github.io/react-icons/)

## Thanks for reading!

Thanks for reading through and checking out my application. The app can be further improved with more and more open source contributors! Finally if you like my concept do give this article a ❤. Thankyou!!
You Must Know the Answers to the 7 Most Basic Questions about React
Tags: react, beginners
Published: 2022-01-12 17:45:12

**1. What is reactjs? Tell us about advantages and disadvantages of using react js.**

-> React.js is a JavaScript library that is used to build scalable Frontend UI.

_Advantages:_
Easy to learn.
> Gives syntactic sugar by which HTML code can be written inside JavaScript.
> By writing one component once, it can be used whenever it needs to be used.
> Huge community support

_Disadvantages:_
> Core React.js frameworks is not SEO friendly
> Huge dependency on many third party libraries.


**2. What is JSX? How does it work?**
-> JSX refers to JavaScript XML. It gives syntactic sugar and ease to React.js. By using JSX, we can write HTML code inside JavaScript without the burden of using createElement(), appendChild() or template literals.


**3. What is Virtual dom? What are the differences between virtual and real dom?**
Or what is the diff algorithm? How does it work?
-> Virtual DOM is a virtual copy of real DOM. It is kept in memory and is synced with real DOM by ReactDOM. DOM manipulation is a less speedy and less efficient process and this is why without rendering the whole document for a little change changing the particular portion is efficient. Virtual DOM does this very well. Whenever change happens, virtual DOM captures the change using diff algorithm and then it updates just that important part that needs to be updated.


**4. Differences between props and state?**
-> Props are immutable and can be passed as child components but states are mutable, owned by the component and mutable.


**5. What is the purpose of useState? When and why will you use it?**
-> The useState hook is used for initializing, storing and managing the states of any variable. -> const [state, setState] = useState();


**6. What is prop drilling?**
-> Sometimes it becomes necessary to pass a value to a child component and from that child component to it’s child component as props. This process of nested passing is called prop drilling.


**7. why do we need to inject dependency for useEffect?**
-> Using useEffect, it’s necessary to inject dependencies as whenever the state of the dependencies change, the code inside the useEffect executes.
Easiest way to create a serverless backend in AWS using UI
Tags: aws, iac, cdk, tutorial
Published: 2022-01-12 17:30:39

I've recently discovered a new way to create serverless backend in AWS using the GUI. Of course, creating lambda functions and dynamodb tables through the UI isn't really difficult. The main point is to get everything as Code at the end. This is a really long awaited feature in aws, which is finally being delivered. Now you can configure your infrastructure through the AWS console, and then export it as code. You can use CDK or SAM as the export target. A similar feature has been offered by azure (exporting ARM templates), but it is great to see AWS is offering this feature.

As opposed to previous posts, in this one we only work with the GUI (AWS Console).

So after logging in to the aws console, go to Lambda section and click on Applications.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvla7p6njtlg3kgwlx8.png)


After that you see the following options:



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hcurr4ipepl147n43ap.png)


As you can see, you can not do everything using this method, but you have quite a few options.
We go ahead and create a Serverless Backend API. This will generate a new API Gateway, a few Lambda Functions and a DynamoDB Table.
Please note that at this moment only Node.js 14 is supported. It is also worth mentionning that the generated code can be exported to github or to aws code commit.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4v6yrodu23fii2fj7um2.png)


So go ahead and click on next to go to the page where you can specify your application name, github/codecommit repository and whether you want the export to be SAM or CDK. If you want to export to github, you need to make a connection between your aws account and github. Click on "Connect with CodeStar Connections". In the popup window choose a name fo the connection and click "connect to github". After that a pop-up window will appear, asking you for your credentials. After entering your credentials your connection is there and you can go ahead and click on "create" on the bottom of the page. 

And that is IT! it takes a few minutes for all the resources to be created and for the code to be available in github. The cherry on top is, that using this method you already get a functioning CICD pipeline! As a matter of fact, aws configures code Pipeline and CodeBuild and connects them to your github repository for you. So every time you make a change and push it to github, the change will be automatically deployed to aws.

It might be a bit difficult to follow using only text, so I went ahead and created a vide, which hopefully will be easier to follow.

        Youtube: https://youtu.be/z8lDx2l7f0w


That is it. Thank you very much for reading this post.
SvelteKit .env secrets
Tags: svelte
Published: 2022-01-12 17:28:44

---
title: SvelteKit .env secrets
published: true
description: 
tags: #svelte
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1syn9ug9v1o3ni86u8cr.jpg
canonical_url: https://scottspence.com/posts/sveltekit-env-secrets
---

So SvelteKit is super awesome n' all and the best thing ever but have
you ever tried to use a `.env` secret that you didn't want exposed on
the client?

SvelteKit uses [Vite] and it has a specific way to reference [Env
Variables and Modes], you reference a `.env` variable with
`import.meta.env.VITE_NAME_OF_VARIABLE` the `VITE_*` prefix means in
SvelteKit it makes that variable available on the client.

## What if you have a secret key?

So if you want a secret key that's not exposed to the client then,
what? Remove the `VITE_*` prefix? Well, no, so, how to have secrets??

The answer is don't use Vite and instead use something to load the
variables from the `.env` file.

Use [env-cmd] or [dotenv] or whatever you want to use to ensure the
runtime `process.env` is populated in dev.

## Example

Here I have defined my `.env` file at the root of my project:

```python
VITE_CLIENT_VARIABLE=wheeeeeeeee
SUPER_SECRET_SECRET=shhhhhh
```

Then I've created a `secret.js` file to access my secret:

```js
export const API_URL = process.env['SUPER_SECRET_SECRET']
```

Then I've added `env-cmd` to my `dev` script in my `package.json` so
that `process.env` has the super secret secret populated:

```json
"scripts": {
  "dev": "env-cmd svelte-kit dev",
```

Now I can access my super secret secret and have client side variables
too.

## Update

There's annother option to use which I found on the [Blog by
Hideckies] in their example it's a `svelte.config.js` change:

```js
const config = {
  kit: {
    // ...
    vite: {
      define: {
        'process.env': process.env,
      },
    },
  },
}

export default config
```

Check out the post linked earlier for more info!

## Thanks!

A kind thank you to Discord users `Xyo` and especially `saikatdas0790`
on the Svelte Discord `svelte-kit` channel for helping me out with
this!

[vite]: https://vitejs.dev/
[env variables and modes]:
  https://vitejs.dev/guide/env-and-mode.html#env-variables
[env-cmd]: https://www.npmjs.com/package/env-cmd
[dotenv]: https://www.npmjs.com/package/dotenv
[blog by hideckies]:
  https://blog.hdks.org/Environment-Variables-in-SvelteKit-and-Vercel/
Welcome Thread - v159
Tags: welcome
Published: 2022-01-12 17:25:19

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

![Power Rangers cheering](https://media.giphy.com/media/l1J9v4RNoCdFjuvtu/giphy.gif)

### Welcome to DEV!

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

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

**Great to have you in the community!**
Reverse Linked List | Leetcode Problem
Tags: leetcode, algorithms, cpp
Published: 2022-01-12 17:06:54

## Problem Statement
Given the head of a singly linked list, reverse the list, and return the reversed list.

**Example:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8q215zhavqlri28fae3.jpg)

`**Input:** head = [1,2,3,4,5]
**Output:** [5,4,3,2,1]
`
**_Link to the question:_** [https://leetcode.com/problems/reverse-linked-list/](https://leetcode.com/problems/reverse-linked-list/)

## Solution

```
class Solution {
public:
    ListNode* reverseList(ListNode *cur, ListNode *next) {
        ListNode *last;
        if(next->next!=nullptr)
            last=reverseList(next, next->next);
        else
            last=next;
        next->next=cur;
        return last;
    }
	
    ListNode* reverseList(ListNode* head) {
        ListNode *last;
        if(head==nullptr || head->next==nullptr)
            return head;
        if(head->next!=nullptr)
            last=reverseList(head, head->next);
        head->next=nullptr;
        return last;
    }
};
```
5 dicas de conteúdo sobre transição de carreira para ciência de dados
Tags: career, datascience, beginners, devjournal
Published: 2022-01-12 17:04:54

_Uma amiga pediu indicação de conteúdo sobre transição de carreira para Ciência de Dados e decidi reunir tudo que eu gosto em um post._ 

---
#### 5 indicações de conteúdo que foram (e ainda são) muito úteis na minha transição

1. Artigo no Data Hackers - **Um guia para a transição de carreira na área de dados** - [Leia](https://medium.com/data-hackers/um-guia-para-transi%C3%A7%C3%A3o-de-carreira-na-%C3%A1rea-de-dados-fcfa9b334635)

2. Curso em vídeo da Isabela Rangel - **Como se tornar um analista de dados** [ Módulo 1 ](https://youtu.be/Zht2jD505Oo) e [Módulo 2](https://www.youtube.com/watch?v=bDAbL2ZYKw4)

3. Artigo do Marcos Silva - **Como se tornar um cientista de dados** 
[Leia](https://medium.com/team-data-stone/como-se-tornar-um-cientista-de-dados-bdda45047be1)

4. Artigo da Mikaeri Ohana - **Como iniciar na carreira de ciência de dados?** [Leia](https://medium.com/@mikaeriohana/como-iniciar-na-carreira-de-ci%C3%AAncia-de-dados-9b37aa525181)

5. Palestra do Mulheres em Dados - **Transição de Carreira para Ciência de Dados** [Assista aqui](https://youtu.be/cGGu0dQdmZM)
ASDF: O gerenciador de versões universal!
Tags: asdf, webdev, beginners, tutorial
Published: 2022-01-12 16:51:34

Hoje em dia em bem comun cada linguagem de programação ter seu próprio gerenciador de versão, como por exemplo o Node tem o NVM e o Ruby tem o RVM. Mas agora imagine que para cada linguagem que você use, você tenha que ter um gerenciador de versões diferentes e imagine o pior, e se tal linguagem não tiver um gerenciado de versões? Para isso foi criado o ASDF, ele permite que através de um único programa de CLI nós possamos instalar e gerenciar múltiplas versões de diferente linguagens.

## Instalação
Vamos começar com o processo de instalação do ASDF, isso é bem simples. Basta entrar no seu terminal e digitar os seguintes comandos:
```bash
git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.9.0
```
Hoje o programa se encontra na versão 0.9.0 e ela que estamos instalando.

Logo em seguida vamos configurar o ASDF no arquivo de configuração do nosso terminal, podendo ser tanto o arquivo `.bashrc` ou `.zshrc`. No meu caso eu estou utilizando o ZSH, logo vou fazer a configuração no `.zshrc`. Para isso basta utilizar o seguinte comando no seu terminal:
```bash
echo ". $HOME/.asdf/asdf.sh" >> $HOME/.zshrc
```

## Instalando e Gerenciando versões
Primeiro de tudo, no ASDF cada linguagem de programação é um plugin. Vou deixar [AQUI](https://github.com/asdf-vm/asdf-plugins) uma lista com todos os plugins disponíveis.
Como exemplo para este artigo, vamos instalar o NodeJs utilizando o ASDF.
Primeiro de tudo, precisamos entrar na [página do plugin](https://github.com/asdf-vm/asdf-nodejs). Nela vai conter todos os passos para a instalação. Mas no geral os passos são esse:
  - 1° - Adicionar o plugin com `asdf plugin add <NOME> <LINK DO REPO>`
  - 2° - Instalar o plugin com `asdf install <NOME> <VERSÃO>`

Vamos instalar o NodeJs para exemplificar melhor.

Primeiro vamos adicionar o plugin:
  ```bash
  asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
  ```
Agora vamos instalar o plugin, para fazer a instalação da última versão de alguma linguagem, basta utilizar a tag latest. E para versões específicas basta utilizar o número da versão. Ex: 15.8.2
```bash
    asdf install nodejs latest
```

Pronto, temos a última versão no Node instalada na nossa máquina!

## Outros Comandos
Vou deixar uma lista alguns comandos mais utilizados
  - asdf plugin add <NOME> <LINK REPO> // Adicionar um Plugin
  - asdf install <NAME> <VERSÃO> // Instalar uma linguagem
  - asdf plugin list all // Listar plugins instalados
  - asdf remove <NAME> // Remover uma linguagem
  - asdf update <NAME> // Atualizar uma linguagem