teleren/devto huggingface dataset:
How to Develop, Build & Deploy a REACT app with Authentication using AWS Amplify
Tags: aws, react, devops, javascript
Published: 2021-08-22 18:35:12

Recently I started reading about AWS Amplify and found it very interesting. I was very impressed to see how easily one can deploy a full stack React app (supports more frameworks) using the Amplify framework. So I started learning about it more and how it can be leveraged in real life scenarios.

This post is from my initial learning of the basic framework. The framework itself is vast and lots of options to explore. I took a part of the framework which will enable you to quickly stand up a React app if you want to use Amplify.  

For more details visit: https://amlanscloud.com/amplifyreact/
10 useless NPM Package with millions of downloads
Tags: javascript, webdev, 100daysofcode, npm
Published: 2021-08-22 18:34:41

##1. is-odd 
Detect number is odd or not - **2M downloads/month** 🎉
![check number is odd or not](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z73b4dea0o9i3kws9t7n.png)




##2. is-even
Detect number is even or not - **855k downloads/month** 🎉

![check number is even or not](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbrnrno6874s0zkauqah.png)

##3. upper-case
Convert a string to upper case -  **27M downloads/month** 🎉
![converts a string to uppercase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7rnuz63y6ptq6qqvqs7.png)

##4. is-number
Detect a number is number or not - **194M downloads/month**
![check if a number or not](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zvb0hezci1uinafk9k5.png)

##5. store2
For storing and getting from localstorage - **9.7M downloads/month** 🎉
![store in localstorage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1hg3wfiw3rp3no9h13t.png)

##6. array-flatten
Flatten nested arrays - **103M downloads/month** 🎉
![javascript flatten array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5yph3psberpskawfw2f.png)

##7. split-string
Split a string at any desired position - **67M downloads/month** 
![Split a string](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndyikh8mlm3xxqy0odzg.png)

##8. is-boolean-object
Detects a value is boolean or not -  **52M downloads/month**
![Detects a value is boolean or not](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64lgfkez45zxn6zornx6.png)

##9. array-includes
Check if a value exists in an array or not- **52M downloads/month** 
![array includes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fffk93eozi8a928p29ah.png)

##10. ismobilejs
Detects if mobile or not in browser or server - **170k download/week** 🎉
![detect mobile or not using javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4gfivq62a8sy2gdnm8m.png)

If you know any other such useless plugin  , please comment down below.

Also I have started posting on twitter related to frontend tips and tricks. You can follow me at- https://twitter.com/frontend_jsx
This is how to do upserting in MongoDB
Tags: mongodb
Published: 2021-08-22 18:35:18

---
title: This is how to do upserting in MongoDB
published: true
date: 2021-08-22 18:25:14 UTC
tags: MongoDB
canonical_url: https://donaldfeury.xyz/this-is-how-to-do-upserting-in-mongodb/
cover_image: https://donaldfeury.xyz/content/images/2021/08/MongoDB_Logo2-4.png
series: "Small Bytes of MongoDB"
---

 ![This is how to do upserting in MongoDB](https://donaldfeury.xyz/content/images/2021/08/MongoDB_Logo2-4.png)

For a full overview of MongoDB and all my posts on it, check out my [overview](https://donaldfeury.xyz/introduction-to-mongodb/).

Upserting is a database concept that combines inserting and updating that MongoDB supports. To perform an upsert during an update operation, you must pass an additional argument to the `update`, `updateOne`, or `updateMany` methods.

With the given data inserted in a collection called `users`:

```
db.users.insertMany([
	{
		_id: 1,
		name: "John Doe",
		email: "doe@doe.com",
		admin: true
	},
	{
		_id: 2,
		name: "Jane Doe",
		email: "jane@doe.com",
		admin: true
	},
	{
		_id: 3,
		name: "Billy Bob",
		email: "billy@bob.com",
		admin: false
	},
	{
		_id: 4
		name: "Steve Stevenson",
		email: "steve@test.com",
		admin: true
	},
])

```

If the following command is used:

```
db.users.updateOne({_id: 5}, {$set: {admin: true}})

```

It won't do anything as there is no document matching the query of `_id = 5`.

If upserting is enabled:

```
db.users.updateOne(
	{_id: 5},
	{ $set: { admin: true } },
	{ upsert: true }
)

```

Since there is no document matching the query, a new document is inserting using the given `_id` and the result of the update operators.

[Use the find method to read data back out of MongoDB](https://donaldfeury.xyz/get-all-the-documents-out-of-a-collection-in-mongodb/) to check the collection:

```
db.users.find()

```

Will yield:

```
{
	_id: 1,
	name: "John Doe",
	email: "doe@doe.com",
	admin: true
},
{
	_id: 2,
	name: "Jane Doe",
	email: "jane@doe.com",
	admin: true
},
{
	_id: 3,
	name: "Billy Bob",
	email: "billy@bob.com",
	admin: false
},
{
	_id: 4
	name: "Steve Stevenson",
	email: "steve@test.com",
	admin: true
},
{
	_id: 5
	admin: true
}

```
Basics of  RESTful API
Published: 2021-08-22 18:23:22

🎇A REST API (also known as RESTful API) is an application programming interface (API or web API) that conforms to the constraints of REST architectural style and allows for interaction with RESTful web services. 
🎇REST stands for representational state transfer and was created by computer scientist Roy Fielding

![Restful Api](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eowjxaj4zpm9wm6tt0m7.jpg)
1-- Make a simple server of node Js and express🕶.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w8auilvjbsk6esdcuvd.png)

2-- Make Connection to the MongoDB(It's an example of Offline Mongo Db Database)🎆
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up1ddv9d3ekv8o3c96j6.png)
3-- Actions in API 🔨

The action should be indicated by the HTTP request method that we’re making. The most common methods include GET, POST, PUT, and DELETE.

* GET retrieves resources.
* POST submits new data to the server.
* PUT updates existing data.
* DELETE removes data. 


For Example - ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l92ix6z6eyc15k1z8cxn.png)


4-- Examples Of GET , POST , PUT , PUT , DELETE 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khkuwcirgyu54lh2rjn4.png)
  
Main HTTP Methods.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cklj7xyzzfadvh0etw1z.png)
 

5-- Example Of URL 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7dqr3m71rce8an3h35r.png)
The truth about learning to code. (From a self taught developer)
Tags: codenewbie, 100daysofcode, tutorial, computerscience
Published: 2021-08-22 17:55:52

![jefferson-santos-9SoCnyQmkzI-unsplash (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd8cyn10gdt9l63fk1if.jpg)
 **TLDR;** You shouldn't waste a lot of time learning the basics. Get your hands dirty building projects as soon as you can to establish a good understanding of the concepts.

First things first, let me just put it out there. Nobody is really a _"self taught"_ developer, and at the same time, everyone is a _"self taught"_ developer.

###What do I mean?
For a person to label themselves a "self taught" developer, they basically mean they didn't do the conventional way of learning by going to college and attending lectures and doing assignments.

The self taught path is more nuanced, an individual might have picked up a book and learned to code by reading the book. Somebody else might have watched a video course to learn to code. Someone else might have read the documentation, both official and unofficial.

But all these were curated by people. So, even though you aren't directly interacting and learning from the people that wrote these docs or books or created the courses you are following, you are still being taught by somebody indirectly.

And, on that note. **Nobody can teach you everything**. Over time, you begin to build intuition and learn from the work you do and projects you build. You learn more from your mistakes and establish a stronger foundation and understanding of programming and its concepts from your experience.

Not to mistake my opinions for facts, I believe that people shouldn't spend so much time learning the basics. Most of these you can find with a quick google search.

The best way to learn how to code is to blaze through the basics of a language or framework. You don't have to completely understand everything or commit it to memory. Then get to building projects as fast as you can.

You'll learn more from the mistakes you make, and you'll get to understand what all these basic concepts you are learning and might be seeing the point of are actually for.

A lot of people early on in their journey are stuck on understanding what a loop does, or what an if statement is useful for in building apps and feel stuck. The fastest way to set unstuck is to get your hands dirty half baked and seeing things in action.

This post started feeling like a rant, I think I made sense.

Follow me on [twitter](https://twitter.com/JoeEverest165), I'm not fun but I try to be. 😎
Why I use vim
Tags: techtalks, linux
Published: 2021-08-22 17:39:27

{% youtube uwI2CtWgltk %}

[Vim](https://www.vim.org/) is very powerful text editor, you can do all kinds of things with it.

You can jump immediately to a line, search by pressing `/` and anything you want to do - with a few keystrokes. 

Vim is everywhere: on your local device (Linux), on embedded systems, on servers. It's really everywhere and it's really powerful.

In fact, if you use Linux then vi/vim is installed by default. Even on Mac OS X the vim editor is available in the terminal (I use this for work).

If you want to learn vim I recommend [this tutorial](https://vim.is) besides the basic vimtutor.
LEVEL UP! Boost your JavaScript skills, LVL 3
Tags: javascript, webdev, beginners, tutorial
Published: 2021-08-22 17:16:00

### In this blog series tutorial, I will be covering some of the basic JavaScript programming concepts.

This is geared toward beginners and anyone looking to refresh their knowledge.

### See the [<strong>Previous Level Here</strong>](https://dev.to/devcronin/level-up-with-javascript-level-2-1pba)

Level 3 will cover: 

* Finding Remainder
* Compound Assignment Augmented Addition
* Compound Assignment Augmented Subtraction
* Compound Assignment Augmented Multiplication
* Compound Assignment Augmented Division

## Finding Remainder

When dividing numbers that do not divide as a whole number, the remainder operator (%) can be used to find how much remains after the division.


```JavaScript
let remainder = 13 % 2;

console.log(remainder);

// 1


``` 


## Compound Assignment Augmented Addition

The compounded assignment uses the (+=) operator to do the mathematical operation and then assignment in one step. The mathematical operation to the right of the equal sign is always performed first and follows the order of operations.


```JavaScript
let spellDamage = 10;
spellDamage += 5;

console.log(spellDamage); 

// 15

``` 


## Compound Assignment Augmented Subtraction

Compounded assignments can also be used with augmented subtraction using the (-=) operator.


```JavaScript
let hitPoints = 20; 
hitPoints -= 5;

console.log(hitPoints); 

// 15

```JavaScript 

## Compound Assignment Augmented Multiplication

By using the (*=) operator we can use compounded assignment for augmented multiplication.


```JavaScript
var criticalHit = 2;
criticalHit *= 10;
 
console.log(criticalHit);

 // 20

``` 



## Compound Assignment Augmented Division

By using the (/=) operator we can use compounded assignment for augmented division.


```JavaScript
var moveSpeed = 30; 
moveSpeed /= 2; 

console.log(moveSpeed);

// 15

``` 

### Thank you for reading my blog! This is the third of my series on JavaScript so if you would like to read more, please follow!


### See the [<strong>Next Level Here</strong>](https://dev.to/devcronin/level-up-with-javascript-lvl-4-3k4m)

---


## [<strong>Support and Buy me a Coffee</strong>](https://www.buymeacoffee.com/ZachCronin)
Mari Mengenal Infix Notation di Kotlin
Tags: indonesia, kotlin
Published: 2021-08-22 17:05:52

Infix merupakan notasi antara operand dan operator (+, -, *, /) dimana operator berada di antara dua operand. Bentuk Infix pada matematika :

2 + 3 = 5
5 + 5 = 10

Misalkan pada 2 + 3, 2 dan 3 merupakan operand dan + merupakan operator.

Bentuk Infix diatas bisa diterapkan kedalam kotlin, jadinya

```kotlin
fun Int.kurangi(newValue: Int): Int {
    return this - newValue
}

infix fun Int.tambah(newValue: Int): Int {
    return this + newValue
}

fun main() {
    val hasil = 10.kurangi(4)
    val hasil2 = 5 tambah 5
    val hasil3 = 5.tambah(5)
}
```

**Penjelasan kode**

Ada dua function yang ditambahkan pada tipe data Int yaitu `kurangi` dan `tambah` maka setiap tipe data Int bisa menggunakan kedua fungsi tersebut. Misalkan pada variabel `hasil` karena 10 itu adalah tipe data Int maka bisa langsung di eksekusi fungsinya jadi `10.kurangi(4)`

Penulisannya bisa dipersingkat menggunakan keyword `Infix` sebelum keyword `fun`. Misalkan pada method `tambah`, karena method ini adalah sebuah Infix maka pemanggilannya bisa dipersingkat menjadi `5 tambah 5` (notasi infix)

## Class Infix Method

Kode di atas merupakan contoh Infix pada sebuah class Int. Kotlin juga support Infix pada method di sebuah class. Misalkan :

```kotlin
class Angka(var angka: Int) {
    infix fun tambah(nilai: Int): Int {
        return angka + nilai
    }
}

fun main() {
    val hasil = Angka(10)
    println(hasil tambah 10)
}
```

## Syarat Infix

- Bisa bertipe data apa saja termasuk String atau Double
- Harus memiliki satu parameter
GitUI - v0.17 supports commit-compare
Tags: github, terminal, productivity, rust
Published: 2021-08-22 17:00:25

[GitUI](https://github.com/extrawurst/gitui) is a terminal UI for git written in Rust. We aim to simplify common git tasks in a fast, keyboard-only and cross platform way without leaving your beloved CLI.

## Release Highlights

* compare any two commits
* new options popup (show untracked files, diff settings)
* mark and drop multiple stashes 
* [much more](https://github.com/extrawurst/gitui/releases/tag/v0.17)

Thanks for your interest and support!❤️
How to deploy an application to GitLab pages
Tags: gitlab, javascript
Published: 2021-08-22 16:50:09

Let's say we want to develop a simple application inspired by [Homework for Life](https://homeworkfor.life/). Before we even start development, let's figure out preview deployment first.

# GitLab pages
[GitLab pages](https://docs.gitlab.com/ee/user/project/pages/) is a hosting infrastructure we access in a free plan of a GitLab project. It's turned on by default, but we have to make sure we correctly name our Continuous Integration (CI) steps.

## Username or organization gotcha
For everything to work smoothly, make sure to avoid `.` in the user or organization name you set up pages for. I had to rename my account from `how-to.dev` to `how-to-dev` because otherwise, the HTTPS wouldn't work with the page's domain.

# Code
To start, let's limit ourselves to HTML. GitLab Pages will work only when we put the files in `public` folder, so let's create our index files directly there. `public/index.html`:
```HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Homework for life</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
  </head>
  <body>
    <h1>Homework for life</h1>

    <form>
      <input type="date" />
      <br>
      <textarea placeholder="Put your story"></textarea>
    </form>
  </body>
</html>
```

The file is nothing else than basic HTML & placeholder for the future app.

# Configuration
We configure CI with `.gitlab-ci.yml`:
```
pages:
  artifacts:
    paths:
      - public
  script:
    - echo 'deploying...'
```

* `pages:` - the name is important here - any other value will not cause GitLab to deploy `public` to pages
* `artifacts.paths = public` - another key value to make sure deployment happens. Without - nothing will be deployed
* `script: ...` - my minimalistic approach backfired without `scripts` the file doesn't validate correctly, so I put it a dummy value here

# Deployment
The successful [deployment](https://gitlab.com/how-to-dev/homework-for-life-vanilla/-/pipelines/357393442) will look like:
![pipelines.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnomhq8fmpj9qdlaarwq.png)

# Links
* [TED talk by the author of the idea](https://www.youtube.com/watch?v=x7p329Z8MD0)
* [repository](https://gitlab.com/how-to-dev/homework-for-life-vanilla/)
* [branch](https://gitlab.com/how-to-dev/homework-for-life-vanilla/-/tree/deploy-to-pages)

# Summary
In this article, we have seen how to deploy an application to GitLab Pages.
Free Docker registries
Tags: devops, docker, cloud, free
Published: 2021-08-22 16:29:28

Since Docker announced that it would remove unused images from Docker Hub, I've been interested in listing places where I could host mine. As it's for personal purposes, I'm interested in free plans. Here's what I found.

<table>
<tbody>
<tr>
<th rowspan="2">Provider</th>
<th rowspan="2">Private?</th>
<th colspan="2">Monthly limit</th>
<th rowspan="2">Details</th>
</tr>
<tr>
<th>Storage</th>
<th>Transfer</th>
</tr>
<tr>
<td><a href="https://www.docker.com/pricing">Docker Hub</a></td>
<td>1</td>
<td>❓</td>
<td><ul><li>Anonymous: 100 pulls / 6 hours</li><li>Authenticated: 200 pulls / 6 hours</li></ul></td>
<td></td>
</tr>
<tr>
<td><a href="https://docs.gitlab.com/ee/user/packages/container_registry/">GitLab</a></td>
<td>✅</td>
<td>10Gb</td>
<td>❓</td>
<td><ul><li>Storage quota is per-project</li><li>Quota includes <strong>all</strong> artifacts, including code</li></ul></td>
</tr>
<tr>
<td><a href="https://docs.github.com/en/packages/guides/about-github-container-registry">GitHub</a></td>
<td>✅</td>
<td colspan="3"><div class="content"><div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>GitHub Container Registry is currently in public beta and subject to change. During the beta, storage and bandwidth are free</p>
</div>
</blockquote>
</div></div></td>
</tr>
<tr>
<td><a href="https://aws.amazon.com/ecr/pricing/">AWS</a></td>
<td><ul><li>First year only</li><li>500Mb storage</li></ul></td>
<td>50Gb</td>
<td><ul><li>Anonymous: 500Gb</li><li>Authenticated: 5Tb</li></ul></td>
<td></td>
</tr>
<tr>
<td><a href="https://cloud.ibm.com/registry/catalog">IBM Cloud</a></td>
<td>✅</td>
<td>500Mb</td>
<td>5Gb</td>
<td></td>
</tr>
</tbody>
</table>

Here are some additional options with their associated pricing model:

<table class="tableblock frame-all grid-all fit-content">
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Provider</th>
<th>Pricing</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://jfrog.com/pricing/">JFrog</a></td>
<td><ul><li>Can be hosted on Google Cloud, AWS or Azure</li><li>Pricing depends on provider</li></ul></td>
</tr>
<tr>
<td><a href="https://cloud.google.com/storage/pricing/">Google</a></td>
<td>
  <ul>
    <li>Storage</li>
    <li>Transfer</li>
  </ul>
</td>
</tr>
<tr>
<td><a href="https://azure.microsoft.com/en-us/pricing/details/container-registry/">Azure</a></td>
<td>
  <ul>
    <li>Storage</li>
    <li>Build time (?)</li>
  </ul>
</td>
</tr>
<tr>
<td><a href="https://quay.io/plans/">Quay</a></td>
<td>
  <ul>
    <li>Monthly subscription</li>
    <li>Number of private repositories</li>
  </ul>
</td>
</tr>
</tbody>
</table>

_Originally published at [A Java Geek](https://blog.frankel.ch/free-docker-registries/) on August 22<sup>nd</sup>, 2021_
I ❤️ Kanban boards - devLog[1]
Tags: react, javascript, frontend, css
Published: 2021-08-22 16:29:13

##The Elephant in the room
It's been a while. I understand that. Unfortunately I underestimated how busy life can get sometimes and how important it is to push through the hard days. I still get quite busy but I know I'll be able to create content more frequently than I have.
##Where are we at?
If you take a look at the `feature/board` branch, you'll notice that I have the basic kanban design down. Why did I do this instead of working on the mulitude of foundational things I could've worked on like state management? Because progress. The longer I overthought what to do next with the limited time I had, the more I got crippled into stagnation. We can't have that. Here's what it looked like before this stage:
![Picture of an over-complicated design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2zo878foun293ie1n5n.png)
The idea behind that was to have multiple boards in one workspace. This is still the idea, actually. For the sake of progress, I decided to get the ball rolling by visualizing how the board and data structures will be arranged in the board. I've updated my latest progress to Github and I'll be back to make another update later on. By then, I would've worked on the foundational issues that I mentioned. Thanks, see ya!
Battery Zira (Windows)
Tags: windows, software, github, opensource
Published: 2021-08-22 16:28:30

Interact with your *laptop's battery* like never before !

## Why use Battery Zira

### Problem

+ Currently, **Windows** support only *low* and *critical* battery alerts with no *full-charge* notification support.

+ We all know that current **laptop** devices have an auto-cut feature on full charge. Moreover, the chemistry of modern batteries even don't allow them to overcharge. Generally, it is not a good practice to completely discharge and then recharge a battery repeatedly, as that affects its charge cycles, reducing its lifetime. In fact, to maintain a healthy battery, it is always an ideal practice to keep the *battery* within *optimum levels*.

+ Many laptops' hardware do not support *Charging Threshold*, which is a new feature suggested this days to improve battery life.

### Solution

+ ***Battery Zira*** comes to rescue by notifying the user in an incredible manner to help maintain the *battery* within *optimum levels* with *low*, *critical*, *maximum* and *full-charge* alerts.

+ Thus, indirectly it also provides *Charging Threshold* feature for laptops which don't even have this feature. So, no need to worry anymore !

+ Users can also customize various parameters like the *notifiable battery levels* and *snooze interval* at their own ease.

+ The software size is incredibly small ! Moreover, there is no dependency. Hence, you need not install any additional package or, software. Generally, it includes *scripts* written in **Batch Script** and **VBScript** which are lightweight and directly executable on Windows platform.

## Download & Usage

Full details can be found on [GitHub](https://github.com/JustABeginning/Battery-Zira). Enjoy it ! Feedbacks are highly appreciated :blush:.