teleren/devto huggingface dataset:
JavaScript Set
Tags: javascript, webdev, tutorial, codenewbie
Published: 2021-03-06 17:36:00

A `Set` is a collection of a set of values without keys.

The common methods and properties are shown below:
- `new Set(iterable)` – creates the set, and if an iterable object (eg. array)
- `set.add(value)` – adds a value
- `set.delete(value)` – removes the value
- `set.has(value)` – returns `true` if the value exists, otherwise `false`.
- `set.clear()` – removes everything from the set.
- `set.size` – returns the current element count.

---
### Set calls
Repeated calls of the same `set.add(value)` don't count.

See the example below:

```js
const set = new Set();

const bello = { name: 'Bello' };
const monica = { name: 'Monica' };
const jerry = { name: 'Jerry' };

set.add(bello);
set.add(monica);
set.add(monica);
set.add(jerry);
set.add(jerry);

console.log( set.size ); // 3

for (let user of set) {
  console.log(user.name);

/*
3
Bello
Monica
Jerry
*/
}
```

The example above shows that `Set` prevents repetition of properties in an iterable object.

Let's filter out all repeating items in the array or prevent items from repeating more than once in the array.

See the example below:

```js
const randomWords = [ 
  'pursue', 'admire', 'power', 'pursue', 
  'advocate', 'begin', 'admire', 'love', 'joyful' 
];

const uniqueRandomWords = [ ...new Set(randomWords) ];
console.log(uniqueRandomWords);

/*
[
  'pursue', 'admire',
  'power',  'advocate',
  'begin',  'love',
  'joyful'
]
*/
```

---
### Iteration over Map
There are 3 methods to loop over a `set` &mdash; the same methods are used on `map`.

- `set.keys()` - returns an iterable for keys,
- `set.values()` - returns an iterable for values,
- `set.entries()` - returns an iterable for entries

See the example below:

```js
const set = new Set([ 'Apple', 'Orange', 'Melon']);

// for...of
for (let value of set) { 
  console.log(value);

/*
Apple
Orange
Melon
*/

}

// forEach:
set.forEach((value, valueAgain, set) => {
  console.log(value);

/*
Apple
Orange
Melon
*/

});
```

> `value` and `valueAgain` are the same value for compatibility with `Map`

**Happy coding!!!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
Collab Lab: Cohort 19 Recap (Winter 2021)
Tags: collablab, juniordeveloper, webdev, beginners
Published: 2021-03-06 17:35:01

For the Winter 2021 Cohort of [the Collab Lab](https://the-collab-lab.codes), we were honored to be able to lead the charge for Cohort 19, a team of developers and mentors located in the EMEA regions.

Below, you'll find some insights from our mentors about the entire experience, an overview of the app our developers created, and the developers' contact information via LinkedIn should anyone wish to learn more about them (hint: they should!!)

## The (Dream!) Team

Our team was made up of four developers (Chiamaka in Nigeria, Joseph in Uganda, Julia in Austria, and Rebecca in the UK) and four mentors (Luka in Georgia, Golfo in Greece, Muhammad who joined us for part of the cohort in Pakistan and the other part in Finland, and me in France).

On the part of the mentors, Luka had been the only one who'd had past experience with the Collab Lab (as a participant!), so he was *instrumental* in helping to manage our team of mentors and developers. 

I think in general, those of us who were first-time mentors were a little bit nervous at first, but the entire team's dynamic worked so well that we soon became comfortable with each other and fell into a very productive rhythm.

Over the course of the past eight weeks, we've had weekly syncs on Sunday evenings where we'd watch the developers' demos of the past week's work and issues, lead learning modules on various topics, have retros to discuss what was working or could be improved on, and discuss the next week's issues.

I have to say - it's been absolutely amazing to see how well everyone collaborated with each other, worked as such a cohesive team, and just overall had an awesome time.

Our team's brilliant developers were extremely dedicated to their project, tasks, and responsibilities each week, and they created some truly professional-level work. Seriously, such a wonderful joy to witness and be a part of. 

## The Project

The team was responsible for assembling a Smart Shopping List concept created by the Collab Lab from various issues in a GitHub repository.

Each week over the course of the 8 weeks, our team of four developers paired up in teams of two and tackled issues one by one down the list. 

## The Finished Product

You can tour the finished application [right here >>](https://tcl-19-smart-shopping-list.netlify.app/)

![screenshot of application UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nk2uc73q6bsmv3ojcvi9.png)

## Hire these amazing developers!!!

- [Chiamaka Umeh on LinkedIn](https://www.linkedin.com/in/chiamakaumeh/)
- [Joseph Mawa on LinkedIn](https://www.linkedin.com/in/joseph-mawa-465000203/)
- [Julia Undeutsch on LinkedIn](https://www.linkedin.com/in/juliaundeutsch/)
- [Rebecca Botha on LinkedIn](https://www.linkedin.com/in/rebecca-botha-34228931/)

![Cohort 19 on Zoom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or3dila0nz7vedv96r1h.png)
Android - Crie seu app para Streaming
Tags: android, mobile, rtmp, live
Published: 2021-03-06 17:32:34

Este artigo é um exemplo de como criar seu próprio app nativo Android para transmitir lives para serviços de streaming como YouTube, Mux e outros.

Download do código fonte [aqui](https://bitbucket.org/pcmporto/rtmpcamera/src/master/).

Neste [link](https://github.com/pedroSG94/rtmp-rtsp-stream-client-java) você encontra a biblioteca que utilizei para construir este app.

No vídeo a seguir mostro o app funcionando e explico um pouco sobre ele.
{% youtube gVFL7hlzTJU %}

Dúvidas, sugestões para temas ou somente um "Oi", me procure no Instagram por @voutestandooficial
Simple Layout Challenge #4
Tags: challenge, html, css, beginners
Published: 2021-03-06 17:23:22

## About

Hi everyone 👋

The last challenge I did more than half a year ago and here I'm again with you 🤗

Today I want to introduce you to an effect based on blurring with transparency - Glassmorphism. You may have seen this effect in many iOS applications, but today I invite you to experiment with it yourself

## Task

This is how the design looks, you can find all the necessary resources [here](https://github.com/Alexandrshy/glassmorphism-UI-card-with-form). It is important to make your HTML valid, make the switch work from the keyboard, and implement the glassmorphism effect

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

___

My implementation of this

{% youtube XLOjE0lJfu0 %}

___

I hope this challenge will be of interest to you, I'm waiting for your links and ready to conduct a code review 🤗
Palindrome Program using Haskell
Tags: haskell, functional
Published: 2021-03-06 17:12:00

I try to learn the syntax of different programming languages. In [this](https://dev.to/amananandrai/solving-the-mystery-of-12-02-2021-498e) blog I have written the program to find whether a number is a palindrome or not using 6 different programming languages. These languages include **C**, **C++**, **Java**, **Python**, **Perl**, and **Ruby**.

I tried learning functional programming and wrote a program to find whether a number is a palindrome number using **Haskell**. The program for finding palindrome using Haskell is given below.

>Functional programming is a programming paradigm in which we try to bind everything in pure mathematical functions style. It is a declarative type of programming style. Its main focus is on “what to solve” in contrast to an imperative style where the main focus is “how to solve”.

```haskell

-- Main function which takes input and prints palindrome or not by using the function palindrome to check
main :: IO ()
main = do
    print "Enter a number: "
    inputStr <- getLine 
    let input = read inputStr :: Integer
    if palindrome input then
        print $ show input <> " is a palindrome number"
    else
        print $ show input <> " is not palindrome number"

-- palindrome function which checks whether the number is a palindrome by comparing with the reverse of the number
palindrome :: Integer -> Bool
palindrome x = reversal x == x

-- reversal function for calculating the reverse of the number
reversal :: Integral a => a -> a
reversal = go 0
  where go a 0 = a
        go a b = let (q,r) = b `quotRem` 10 in go (a*10 + r) q
```
Easily animate React components when mount/unmount 😅
Tags: react, mount, keyframes, css
Published: 2021-03-06 16:54:17

---
title: Easily animate React components when mount/unmount 😅
published: true
description: I'm looking for contributors for a small open-source library that lets you animate components in React when they are mounted and when they are unmounted.
tags: React,  mount, keyframes, CSS
//cover_image: https://raw.githubusercontent.com/mijim/react-mount-animation/master/images/example1.gif
---

![Example 1](https://raw.githubusercontent.com/mijim/react-mount-animation/master/images/example1.gif)

One of the things that I have neglected the most as a React programmer when it comes to animations is the transitions when mounting and unmounting a component. Normally I always <strong>left without animations</strong> because I didn't see an easy and comfortable way to put them either. The result is quite forced and the experience for the user is that things appear and disappear by magic, nothing fluid.

Until a couple of days ago I decided to investigate the best and simplest way to run animations when mounting and unmounting components. I came to the conclusion that the best thing was to <strong>create a generic component that allows mounting and unmounting components</strong> through the simplest possible syntax.

I started creating a component that would manage the animation of the component and take care of mounting and unmounting it when indicated. The animation had to be done using the <strong>CSS keyframes</strong>, so I came up with a solution like this simple example:

Instead of this (mount/unmount without animation):
```JSX
const MyComponent = () => {
  const [isMounted, setIsMounted] = useState(false);

  ...

  return (
   <>
      {isMounted && (
        <div>
          Hi World!
        </div>
      )}
   </>
)
...
```
We do this (same with animation):
```JSX
import Animated from "react-mount-animation";

const MyComponent = () => {
  const [isMounted, setIsMounted] = useState(false);

  ...

  return (
      <Animated.div //You can use any HTML element here
        show={isMounted}
        mountAnim={` 
            0% {opacity: 0}
            100% {opacity: 1}
        `}
      >
        Hi World!
      </Animated.div>
)
...
```

Anyone who wants to collaborate on it can contact me and any technical or non-technical opinion I will receive with pleasure. Maybe this package does not make sense, maybe it does, in any case I would love for you to leave a comment.

If you want to <strong>inspect the code</strong> or simply <strong>test it</strong>, you can do it by consulting the repository: <https://github.com/mijim/react-mount-animation>

<https://www.npmjs.com/package/react-mount-animation>

Thanks & Happy Coding! ⚡️
Price Comparison of Popular Serverless Architecture Providers
Tags: serverless, cloud, react, reactnative
Published: 2021-03-06 16:49:14

Serverless computing has become very popular over the last decade. There are many benefits to going serverless, especially when deploying production applications as an individual or small team. One of the main benefits is the pricing model, whether it be pay-as-you-go or tiered. The monetary cost of serverless application development is very much to the benefit of the developer. 

You may be asking, "what is a serverless application?". This model of application development abstracts away the overhead of manually owning and configuring the backend modules required for modern apps. You can [learn more about serverless apps here](https://easybase.io/about/2021/01/30/What-Is-a-Serverless-Application/). This piece will aggregate the pricing calculators and models of leading serverless providers.

![Easybase serverless architecture diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa6um4hqtj6newxyst5d.png)

<hr />

# 1. AWS
Amazon Web Services is a popular, enterprise solution for highly experienced developers with demanding processes.

[AWS Pricing](https://calculator.aws/#/)

# 2. Easybase
Created with the small team or individual in mind, Easybase is great for adding serverless capability to your applications. Although lacking in some of the niche aspects of serverless computing, the platform features packages for React and React Native.

[Easybase Pricing](https://easybase.io/pricing/)

# 3. Azure
Similar to AWS, Microsoft's Azure is the platform for many of the most popular applications today. Although its interface is quite complicated and can be difficult to set up and use for novice developers.

[Azure Pricing](https://azure.microsoft.com/en-us/pricing/)

# 4. IBM Cloud
The newest member of the serverless computing game, IBM is similar to Azure but lacks the maturity featured in Microsoft's platform. IBM Cloud is definitely still a contender and has a bright future if they can cater to the needs not catered by the other competitors.

[IBM Cloud Pricing](https://www.ibm.com/cloud/pricing)
How to Auto Adjust Font Size to fit div
Tags: javascript, webdev, tutorial, programming
Published: 2021-03-06 16:49:03

Original article with code snippets (recommended): https://gabriellazcano.com/blog/how-to-auto-adjust-font-size-to-fit-div/

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouvqpxblmv92b241kmhf.png)
 
I’ve been trying to get a solution like this for a long time already. As I didn’t find anything apart from libraries from JQuery I decided to make my own implementation with vanilla JavaScript. I know there must be ways of optimizing my code completely with some algorithms and such. Feel free to let me know if you found something or you want to share something :)

## Detect Overflow
So I decided to take this path. Calculating if the div has overflow and then work the font-size afterwards. This is how we detect if a div has overflow:

And it’s time for the main function! My thought process here was, if I start the font-size with 0.1em I can increase the font size by a fixed rate until I get an overflow point in the div. For not overflowing I save the last size in a variable and substract the incrementation to get the last point when it wasn’t overflowing.

And we have it. We are adjusting the font-size already. To make it to work when resizing we just have to call to the function when the window resize event happens.

If you’ve read my other post you might have already noticed that doing handling the event this way is not very performant. So we are going to use the same technique. We are going to throttle the function calls to have a delay of 500ms.

So now it’s working completely. You can check at the CodePen in this link for the full implementation.
List of Evaluation Metrics for Classification and Regression
Tags: machinelearning
Published: 2021-03-06 16:34:34

Machine Learning is the science of teaching computers to perform certain tasks without being explicitly programmed. It can be basically divided into 3 parts-

* Supervised Learning
* Unsupervised Learning
* Reinforcement Learning

Supervised learning is the part that is majorly taught everywhere and consists of two very important tasks **Classification** and **Regression**. To know more about these tasks and a simple introduction to how to perform them using Python read my article given below.

 {% link https://dev.to/amananandrai/basic-machine-learning-cheatsheet-using-python-10-classification-regression-methods-9g0 %}

We need to assess the performance of our machine learning models and here I am giving a list of evaluation metrics for classification and regression tasks.

#### Evaluation Metrics for Classification

1. Accuracy
2. Precision (P)
3. Recall (R)
4. F1 score (F1)
5. Area under the ROC (Receiver Operating Characteristic) curve or simply Area Under Curve (AUC)
6. Log loss
7. Precision at k (P@k)
8. Average precision at k (AP@k)
9. Mean average precision at k (MAP@k)

#### Evaluation Metrics for Regression

1. Mean absolute error (MAE)
2. Mean squared error (MSE)
3. Root mean squared error (RMSE)
4. Root mean squared logarithmic error (RMSLE)
5. Mean percentage error (MPE)
6. Mean absolute percentage error (MAPE)
7. R-square (R^2)

For a much more detailed explanation of Performance metrics you can read the article given below.

https://neptune.ai/blog/performance-metrics-in-machine-learning-complete-guide
Configurar terminal de Git Bash en Vcode
Published: 2021-03-06 16:25:12

Para los usuarios que utilizan sistemas operativo Windows, es necesario instalar una terminal para poder utilizar los comandos que se usan en servidores Linux.

###¿Qué necesito instalar?

Debemos instalar la terminal [Git Bash](https://git-scm.com/download/win)

###¿Como configurar Visual Studio Code para usar Git Bash?

Debemos seguir estos pasos:
- Copiar la ruta donde se instalo Git Bash, en mi caso fue en la carpeta `c:\Program Files\Git\git-bash.exe`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjq3h6v2dnhsq0r36v6a.png)

- Abrir Visual Studio Code y en el menú superior seleccionar la opción `File` luego `Preferences` luego `Settings`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbon1rffukeywf4mfgw4.png)

- Se nos desplegará una pantalla con opciones y debemos seleccionar la que dice `Extensions`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wni79mzq80a7tdc0uuuj.png)


- En la opción `Explorer Kind`, seleccionamos la opción `external` y luego pegamos la ruta donde se encuentra instalada Git-Bash, en mi caso era `c:\Program Files\Git\git-bash.exe`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/me3m2pl9oikzraq80soz.png)

- Luego debemos abrir una nueva terminal 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6itt89t9fkmz1lighpi2.png)

- Y debería verse de esta forma
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27biz3x4811p2zfz4joz.png)
Build a simple CLI with Bash
Tags: bash, tooling, beginners
Published: 2021-03-06 16:00:49

Bash is a [**unix**](https://en.wikipedia.org/wiki/Unix) shell and command language, and this article has a purpose to introduce how to using bash for building a simple CLI (Command Line Interface).

## Prerequisite

- [Terminal](https://en.wikipedia.org/wiki/Terminal_(macOS)), [iTerm2](https://iterm2.com), or [Alacritty](https://github.com/alacritty/alacritty)
- [VSCode](https://code.visualstudio.com/), [Vim](https://www.vim.org/download.php), or [Neovim](https://neovim.io/)
- MaxOS or Linux

## Getting Started

Please create a new folder with the name `bash-cli` then create a file with the name `bash-cli.sh` inside of `bash-cli` folder, and open the file `bash-cli.sh`.

```bash
#!/bin/bash

echo "Hello World"
```

`#!/bin/bash` line of script to inform your machine os that is a bash scripting.

Next, we need to make sure the scripts work. you just need to execute with `source ./bash-cli.sh` inside of `bash-cli` directory, or you can access directly `./bash-cli` but you need to enable access permissions with command `chmod`, simply just type `chmod +x ./bash-cli.sh`.

```bash
./bash-cli.sh
Hello World
```

Yes, congratulations bro, and next we need to add more syntax to build a simple project CLI.

```bash
#!/bin/bash

# catch first arguments with $1
case "$1" in
 -s|--scan)
  # execute if arguments in $1 to equal "-s" or "--scan"
  echo "scan..."
  ;;
 *)
  # else
  echo "Usage: (-s|--scan)"
  ;;
esac
```

if we execute the bash with `./bash-cli.sh -s` the result to showing text "scan..." in your terminal.

```bash
./bash-cli.sh -s
scan...
```

next, add more functionality to scan something on the internet, or we can use `curl` to fetch or download data from the internet.

```bash
#!/bin/bash

scan_your_ip() {
  command curl "https://ipecho.net/plain"
}

# catch first arguments with $1
case "$1" in
 -s|--scan)
  # execute if arguments in $1 to equal "-s" or "--scan"
  echo scan_your_ip
  ;;
 *)
  # else
  echo "Usage: (-s|--scan)"
  ;;
esac
```

Finish, let's try with execute `./bash-cli.sh -s` and expected you get your network [**ip**](https://en.wikipedia.org/wiki/Internet_Protocol) as result, like this.

```bash
./bash-cli.sh -s
36.75.151.87
```

## Conclusion

I hope you need basic experience in using bash for building a simple CLI, for more reference you can build a more complex CLI, please check out this repo [https://github.com/adiatma/intip](https://github.com/adiatma/intip) as references.
Full Page: 20 Advanced CSS & HTML techniques: clip-path, @property, aspect-ratio and blend-mode
Tags: css, tutorial, webdev, html
Published: 2021-03-06 15:58:45

Today I am sharing with you this advanced CSS & HTML tutorial where we are going to go through some of the best techniques to achieve the effect that you see on this landing page like mix-blend-mode, clip-path, position: sticky, css grid and what not. 

This is a 2hr long tutorial where I explain how I build that demo landing page start to finnish and along the way you can find some very interesting things.

We are going to build an entire landing page with a hero, gallery, list, object rotation and the final section position sticky horizontally. 

Note that time to time I might have mixed the words but please don't mind me this has been a very long tutorial and just my second video. 

Source:  
https://github.com/astrit/youtube

Demo:
https://css.gg/epic/index.html

{% youtube PpheLuPbP5Y %}
Stalin sort
Tags: python, algorithms
Published: 2021-03-06 15:35:32

```python
# Stalin sort
# Check if the list is ordered, if it is not, remove the element.

import numpy as np


# Code
def stalin_sort(list_a):
    len_a = len(list_a)
    the_end = False
    i = 0
    j = i + 1
    while not the_end:
        if list_a[i] > list_a[j]:
            list_a.pop(j)
            len_a = len(list_a)
            if i == len_a - 1:
                the_end = True
        else:
            i += 1
            j += 1
            if j == len_a:
                the_end = True

    return list_a


# Input
n = 25  # Elements
A = np.random.randint(low=0, high=50, size=n)
A = list(A)
print(f"Input: {A}")

# Output
print(f"Output: {stalin_sort(A)}")
```
CSS Gradient Button With Hover Effect
Tags: css, html, webdev, ux
Published: 2021-03-06 15:28:25

If you have to use a different type of button in Gradient color with a minimal UI. Then you are in the right way, here we made an attractive CSS Gradient Button With Hover Effect with the help of CSS and HTML.

In these buttons, we used Gradient colors and also we used minimal types of hover effects. Here we used a custom color class for button colors. For hover effects, we used a global selector of the button tag. This is mobile-friendly and fully responsive Gradient buttons.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/css-gradient-button-with-hover-effect/)