teleren/devto huggingface dataset:
Christmas RomCom Bingo - Hackathon Submission
Tags: dohackathon, gatsby
Published: 2021-01-10 04:52:32

## What I built
For the Digital Ocean Hackathon I decided to go quite silly having been inspired by the silliness around the Gatsby Silly Site Challenge. 
This website is a bingo inspired game for people watching seasonal Romantic Comedies, of which there are many on Netflix. The purpose is for people to tune into a show, and play the bingo together, with the highest score at the end, or the first person to get the winning screen, to win! 
Every time the page is refreshed new bingo items will be generated.

### Category Submission: 
Random Roulette

### App Link
https://romcombingo.fun/

### Screenshots
The final app:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xt75opq46xf4c8ulwzja.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/voll6vnf2367d28r9ebb.png)
Win Screen (with animated snow):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8he1d3jlxi2x1jzgzyf2.png)

### Description
 This is a bingo inspired game for people watching Seasonal RomComs, built using Gatsby and hosted on Digital Ocean. 
It has randomly generated bingo cards, a live updated score and a win screen.

### Link to Source Code
You can check out the original code here: [GitHub](https://github.com/amtrav42/ChristmasRomComBingo)
I highly encourage anyone who has a passion for ANY genre of movie to fork this repository and create their own themed bingo. This could work just as well with Star Trek, Harry Potter or Action films (but you might want to do some rework of the theming..)

### Permissive License
MIT

### Background
As a big fan of Seasonal RomComs I felt they deserved celebrating, as they are often the core of jokes, and don't get appreciated for what they are. This platform highlights some of their unique beauty, as well as providing a base for other genres games. 
From a Dev perspective I also wanted to practice using Gatsby and utilising arrays.

### How I built it 
This app was built using the basic Gatsby Hello World Starter, version controlled on GitHub and deployed using Digital Ocean. 
It was the first time I've used DO, previously I've used AWS Amplify. It was incredibly easy and user friendly, I would definitely consider it again! Especially for rapid prototyping of ideas. 

### Additional Resources/Info

For more details head over to Twitter for the threads on my process.
[First Sprint] (https://twitter.com/amaltr42/status/1335846803057463298)
[Second Sprint] (https://twitter.com/amaltr42/status/1344234909116764160)
Learn Git in 10 Minutes
Tags: beginners, github
Published: 2021-01-10 04:41:04

Hey! Today I show you how you can use Git on your local machine and on a remote one. Also I talk about Branching. Have a nice day! :)

{% youtube pZGZRjlS2fY %}

➤ Install Git: https://git-scm.com/downloads
➤ Github: https://github.com/Lumary2

➤ Timestamps:
0:00 Introduction
1:08 Working with Git locally
3:03 Working with remote repository
6:15 Branching
Self Study: Data Science - Machine Learning journey : Day 2 (Statistics | R | Python | Anaconda | Jupyter)
Tags: machinelearning, datascience, beginners, tutorial
Published: 2021-01-10 04:40:47


{% youtube WyFoSSvbNRA %}


## Prerequisites:

Statistics is generally considered as one of the prerequisites to study machine learning. We need statistics to help transform observations into information and to answer questions about samples of observations.

### Statistics is needed in Machine Learning for..

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d4g97x4eygy3mss4sz8x.png)


Another prerequisite to data science - machine learning is a programming language - R or Python. R is used for statistical analysis to build models while Python is used beyond statistics with wide range of libraries and having better integration with other programming languages. 



## Applied Statistics:

Two broad categories in the field of statistics:
1. Descriptive statistics
2. Inferential statistics

Descriptive statistics is the process of categorizing and describing the information. 

Inferential statistics includes the process of analyzing a sample of data and using it to draw inferences about the population from which it was drawn.

We need to get familiarized with all these concepts to continue our machine learning journey effectively. Most of these concepts would have been covered as part of our graduate degree. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ubaqnuwuemf3iux33rth.png)


## Install R Studio

Install R and R Studio Desktop for your version of OS from [here](https://rstudio.com/products/rstudio/download/#download)..

Sample R code to illustrate AUC and ROC from Day 1:

https://github.com/IamVigneshC/Machine-Learning-Data-Science/blob/master/R/ROC_AUC.R

## Install Python 

You can install and use python through command line or through [Anaconda](https://www.anaconda.com/products/individual) which come along with a [tutorial](https://docs.python.org/3/tutorial/index.html), reference for various libraries.

Once installed, you shall open JupyterLab or Jupyter notebook and work on Python.


Some of my samples to get started:

https://anaconda.org/iamvigneshc

https://github.com/IamVigneshC/Machine-Learning-Data-Science/tree/master/Python
Highlight of My AZ-900 journey
Tags: azure, microsoft
Published: 2021-01-10 04:36:00

When I begun studying for my AZ-900 I struggled getting this concepts and could often get them mixed up but after writing this blog I feel more confident in explaining them to others. I hope you feel the same after reading it.
I'll be sharing more insights on the cloud service models and there key differences.

Microsoft Azure is a **Cloud computing platform** and an online portal that allows people to access and manage cloud services and resources provided by Microsoft.

* Cloud Computing : the delivery of computing services over the internet, which is otherwise known as the cloud. These services include servers, storage, databases, networking, software, analytics, and intelligence. 

**Cloud Service Models** define the different level of shared responsibility that a cloud provider and cloud tenant are responsible for.There are 3 Cloud Service Models:

 * Infrastructure as a Service(IAAS)
 * Platform as a Service (PAAS)
 * Software as a Service (SAAS)

**Infrastructure as a Service**This model is the closest to managing physical servers. A cloud provider keeps the hardware up to date, but operating system maintenance and network configuration is left to the cloud tenant.
**Example** Azure virtual machines are fully operational virtual compute devices running in Microsoft data centers.


**Platform as a Service**This model is a managed hosting environment. The cloud provider manages the virtual machines and networking resources, and the cloud tenant deploys their applications into the managed hosting environment.
**Example** Azure provides app services supporting the entire building process of a web app development and deployment,

**Software as a Service**In this cloud service model, the cloud provider manages all aspects of the application environment, such as virtual machines, networking resources, data storage, and applications. The cloud tenant only needs to provide their data to the application managed by the cloud provider. 
**Example** Microsoft Office 365 provides a fully working version of Microsoft Office that runs in the cloud.

An illustration of the various levels of responsibility between a cloud provider and a cloud tenant.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n4044kt4egd53d92sizz.png)
DO Hackathon: Blokii Image Maker - An Introduction
Tags: dohackathon, webdev, quasar, feathers
Published: 2021-01-10 04:27:16

### The Project - Blokii Image Maker
The Blokii Image Maker is a simple image generator for tech blogs. It overlays common framework icons on an image provided by the user and allows basic filtering and titles to be applied.

### Tech Stack
The tech stack chosen for this project is Quasar and FeathersJS. The (simple) application could have been built on just Quasar alone if it wasn't for the Unsplash API that requires a backend proxy to secure API auth tokens. 

As I've been working with FeatherJS quite a bit, I decided to use [FeathersJS](https://docs.feathersjs.com/guides/) for the backend to create a simple api that could proxy my Unsplash API requests.

The [Quasar Framework](https://quasar.dev) is used as the frontend framework. In this series of posts, I'll write about how the project was developed.

Let's get hacking.
Consejos para desestructurar listas en JavaScript
Tags: javascript, spanish, espanol, tutorial
Published: 2021-01-10 04:13:22

La desestructuración en JavaScript eres un recurso muy utilizado e una grande adición para mejorar nuestro código, especialmente en listas.

La sintaje para desestructurar una lista eres simples. Vamos a un ejemplo.

```javascript
const frutas = ["manzana", "naranja", "guava", "morango"];

const [ manzana, naranja ] = frutas

console.log(manzana, naranja) //tenemos en lo console manzana y naranja
```

¿Pero, qué hacer si queremos saltar uno de los itens? ¿Por ejemplo, si queremos lo morango, pero saltar la naranja y la guava?

```javascript
const frutas = ["manzana", "naranja", "guava", "morango"];

const [ manzana, , ,morango ] = frutas

console.log(manzana, morango)
```

Ponemos una coma para saltar dos valores (naranja y guava) e desta forma, pegarmos solo los valores que interesan a nosotros.

¿Pero, por qué no adicionar legibilidad para nuestro código?

```javascript
const frutas = ["manzana", "naranja", "guava", "morango"];


const [
  manzana,
  , //naranja
  , //guava
  morango
] = frutas

console.log(manzana, morango)
```

De esta forma, nosotros podemos ayudar futuros desarrolladores a tener un entendimento mejor de nuestro código.

Yo espero que tengan disfrutado de este artículo e que tenga ayudado usted a mejorar la legibilidad de su código cuando utilizar la desestructuración.
Creating a database from scratch with Node.js - Day 12
Tags: database, learning, javascript, node
Published: 2021-01-10 04:02:45


Hello folks! 

Here am I, talking about my database study project again

Today I had the plan to implement the indexing algorithm, turns out I started it but it will take me more time.

Here is what I did today

---

### Fixed a bug in LQL parser 

I had a bug where the parser would spit out two statements instead of one

Pretty sure this is meant to be the Nearley feature that allows you to parse ambiguous language, but for now, I made the parser always return a single statement object.

---

### Split the database tables into files

This project was using a single file to represent the entire database, now each table has its own file with "ldbt" extension (which is still just a JSON).

in this file, I will only record the actual rows, the table information like which row is nullable and which row is a primary key, etc will stay in the main database file.

This will be useful for three reasons:
* The database will not load tables that are not being used, and will therefore save memory
* Once I create an index, and I have that situation I mentioned where the index has all the information needed to perform a query, loading the database file won't even be necessary
* This is the first step to support partition

---

### Started implementing BTrees indexes

I have just began doing this, for now, my BTree can only insert values and find them, it's not balancing itself yet, and it doesn't support deleting

This is the test file I've written so far: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j1hx2qp0monlzjgplq0h.png)

and this is the output:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vhjy9n2kaonf3g9db56a.png)

_the parent attribute is always null for now, it's purposely done this way, so I can log the entire thing without it becoming an infinite loop of references_

I've read a lot of resources, but this is the one I've liked the most, so if anyone wants to learn how to create a btree, just take a look at this repository > 

{% github QuotableWater7/btree no-readme %}

It has no tutorial, but the code is very clean and easy to understand.

---

Tomorrow I will keep working on the BTree. I will try to implement deletion and rebalancing.

If I can do this quickly, I will finish implementing indexing

If anyone wants to take a look at the code or play around with the database, these are the repositories for the project:

LuisDB: 

{% github ciochetta/learndb no-readme %}

Note: the version I've used in this particular post is in a branch called index

LQL parser:

{% github ciochetta/lql-parser no-readme %}
Inverter palavra com JavaScript
Tags: beginners, braziliandevs, javascript
Published: 2021-01-10 03:50:07

Olá pessoal, hoje irei deixar uma dica rápida de como inverter uma palavra, frases ou até mesmo parágrafos inteiros utilizando JavaScript.

A primeira forma é utilizando o comando `for` para percorrer o texto e pegar as letras do final e adicionar no início de outra variável:

```js
let texto = 'Comunidade DEV é show!';
let temp = '';

for (let i = 0; i <= texto.length; i++) {
  temp += texto.charAt(texto.length - i);
}

console.log(temp);
```

Agora vamos utilizar outra forma para realizar a inversão das palavras:

```js
let texto = 'Comunidade DEV é show!';

texto = texto.split('').reverse().join('');

console.log(texto);
```

Pronto, aprendemos duas formas de inverter palavras em **JavaScript**, valeu pessoal 😎✌!
One of the most important rules I learned after a year of learning frontend
Tags: css, javascript, beginners, productivity
Published: 2021-01-10 03:25:43

Most of the time when I was writing code, I was subconsciously working according to one concept "If it works, don't touch it" which was really time wasting and a lot of the time frustrating. Now I try to code according to another concept "Think before you code". In this article I'm gonna talk about this concept and why it's really important. 

#If it works, don't touch it
When you write code as a beginner this is probably how you solve a problem: 
"write some stuff then run it , doesn't work ? write more stuff then run it again, maybe copy some snippets from stackoverflow and so on until it works."
Even with css, you probably try different properties on the element and keep trying until you get the desirable result.
I have been there but I discovered that this is not a right way of writing code because most of the time you're not really understanding what your code does, another problem is that you're probably have some lines of code that either redundant or repetitive. 

#Think before you code
A better approach is by planning things out before writing any code, There two magical tools that'll help you make a good plan these tools are: a pen and a paper.
Say you wanna build a website, spend some time away from your code editor and start ask yourself some questions : "What colors or fonts do I wanna use ?" , "how do I want it to look on desktops? what about mobile ?" , "Do I want to repeat some style ?".
Think deeply about each question and write the answers, draw a basic shape of your layout, believe me this'll save you from repeating yourself and from wasting a lot of the time trying things out waiting for your code to work. Kevin powell has an amazing article about that topic([Creating a website - getting over the anxiety of starting with a blank file](https://www.kevinpowell.co/article/creating-a-website-getting-over-the-anxiety-of-starting-with-a-blank-file/))

##Applying it to javascript
Take you time understanding the problem and the relation between the input and the output, think about things you need in order to solve the problem, the data type you're dealing with and whether you need an auxiliary data type or not , write some pseudo code. 

#What if things didn't work after planning? 
At this point, start searching to understand why your code isn't working and by searching I mean looking for articles/videos that talk about the topic that's confusing you, take your time searching until you figure out what's wrong this searching process will help you develop your skills and understanding of the language you're learning, and please never copy snippets of code without understanding them.
Open Source Newbie! Please help!
Tags: opensource, javascript, react, node
Published: 2021-01-10 03:13:47

Hi to everyone! My name is Nicolás i have 21 years old, i droped the economics university after 3 years and i have been studied intensely "how to code" (10 to 14 hs at day) for 8 months ( i learned html, css, js, react, node.js, mongodb, gatsby, python, etc) and i want to start to contribute to the open source comunity but there is a problem : i don't know how to start and what kind of things i can do for them.

So im very glad if some of you can help me to see a way and start doing things. I really want to help to others but i don't no how to start. So if you know about some project that i can help or something like that, no doubt and tell me about it.
Also I want to say sorry for my english, because it's not perfect (i'm working on it) and thanks for your help.

Thanks a lot!
How can I store all kinds of number in the same variable in C#?
Tags: csharp, help, beginners, dotnet
Published: 2021-01-10 03:05:27

~~Is there a C\# equivalent of Java's `Number` class?~~
Is there a way to store multiple kinds of numbers in a single variable in C#?


<div alt="Thanks! Cheers!">
##<b><center><b>Thanks!<br/>Cheers!</b></center></c/b>
</div>
Exit app when back button is pressed twice in React Native.
Tags: react, beginners, reactnative, tutorial
Published: 2021-01-10 02:46:45

In this post I will discuss how you can implement "exiting your app when back button is pressed twice". 

So if your user is using your app and accidently presses the back button, the app will exit. So to warn the user about exiting the app we can use <code>BackHandler</code> provided by the react native library.

So the flow is when the user touches the back button it will not exit the app and when he double touches it, we will be alerting him to either go back to the app or exit the app.

So below is the code to implement it.


```js

import React, { useEffect } from "react";
import { Text, View,BackHandler, Alert } from "react-native";

const App = () => {
  useEffect(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "Are you sure you want to go back?", [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel"
        },
        { text: "YES", onPress: () => BackHandler.exitApp() }
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  }, []);

  return (
    <View >
      <Text style>Gautham's Backhandler Example </Text>
    </View>
  );
};


export default App;

```

Implement it in the App.js where you will be defining navigators.

So here we are adding event listener called "hardwareBackPress" to listen to users' action on back button and call the function in useEffect.

So thats how you can easily implement "exiting your app when back button is pressed twice" functionality in your react native app.

This may not be that much significant for small apps. But if people are using your app to enter data inputs and accidently touched the back button and the app closes, it may provide for bad UX experience.

Best documentation on React BackHandler Functionality I referrerd to :
[React Native Doc](https://reactnative.dev/docs/backhandler)

To know more about React & React Native you can checkout my courses in Udemy.

https://www.udemy.com/course/react-native-for-absolute-beginners-with-react-hooks/
Javascript understanding errors part 1
Published: 2020-12-21 20:30:04

**Intro**

Bugs are a common part of coding and understanding various common bugs can be a huge time saver. Lets take a look at some of those common bugs:

**Reference Errors**

Reference errors commonly occur when variables or functions are misspelled or mis-capitalized causing the browser to look for an object that does not exist:

```
let wideReceiver = "Jerry Rice";
let runningBack = "Frank Gore";
console.log(`My favorite wide receiver is ${wideReciever}`);

// ReferenceError: wideReciever is not defined
``` 
Fix:

```
let wideReceiver = "Jerry Rice";
let runningBack = "Frank Gore";
console.log(`My favorite wide receiver is ${wideReceiver}`);
```

**Syntax Errors**

Syntax errors occur when the incorrect use of defined syntax is in your code. One of the more common syntax errors are from unclosed brackets, quotes, parentheses, and braces:

```
const myArr = [1,2,3,10;
console.log(myArr)

SyntaxError: Unexpected token, expected "," (1:23)

> 1 | const myArr = [1,2,3,10;
    |                        ^
  2 | console.log(myArr)
``` 

An easy way to avoid this mistake is once an opening character is written to immediately close that character before writing out any additional code:

```
const myArr = [1,2,3,10];
console.log(myArr)
```

**Syntax Errors:Mixed Quotes**

Javascript allows the use of both single quotes `(')` and double quotes `(")`. Just make sure in situations where you use both you don't close one of the quotes too early. Also when using single quote be careful of accidentally opening a second set of single quotes: 

```
// Incorrect
const myQuote = 'I've had a wonderful day today'

SyntaxError: Unexpected token, expected ";" (1:19)

> 1 | const myQuote = 'I've had a wonderful day today';
    |                    ^

// Correct 
const myQuote = 'I\'ve had a wonderful day today';
``` 

**Incorrect Assignment Operator**

Another common error among beginning programmers is the incorrect assignment operator. Remember that `=` assigns a name to a variable while  `==` and `===` check for equality. `===` checks for strict equality meaning the value and type must be the same. 

Here is an example using an if statement:

```
let x = 10;
let y = 20;

if(x = y){
  console.log("These numbers are equal")
}

// "These numbers are equal "
```
Why did the console log "These numbers are equal when 10 clearly does not equal 20? We used the incorrect assignment operator `=` thus the console.log will trigger with any y value that isn't set to a "falsy" value.

To fix this we just need to use the proper `===` operator in the if statement:

```
let x = 10;
let y = 20;

if(x === y){
  console.log("These numbers are equal")
} else {
console.log("These numbers are not equal")
}

// 'These numbers are not equal'
```

**Conclusion** 

That concludes the first set of common errors. In my next blog I will go over some more common errors and even a few less common errors.
Project 30 of 100 - React Tailwind Sign Up Flow
Tags: react, css, 100daysofcode
Published: 2021-01-10 02:11:21

*Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [Link](https://100-react-projects-day-30-tailwind-auth-flow.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-30-react-firebase-tailwind-auth)

Just a short post for this project. This is a sign up/sign in flow built in Tailwind CSS based on this tutorial for a Firebase authentication tool:
[link here](https://blog.logrocket.com/user-authentication-firebase-react-apps/).

I followed the styles recommended by the author in this tutorial but look forward to using more Tailwind in upcoming projects.
Day 9 of 365: Beautiful cube with inertial rotation (live demo)
Published: 2021-01-10 02:09:03

Day 9 of 365: Live demo! Beautiful cube with inertial rotation.

I added fling ability to last demo. Fling to spin!

👇 @CodePen
{% codepen https://codepen.io/trusktr/pen/rNMrvOY %}

👇 Made with #LUME
{% github https://github.com/lume/lume %}

topics: #codeart #webdev #3D #webgl #creativecode #newmediaart #webdesign #365DaysOfCode2021