teleren/devto huggingface dataset:
My blog reached 100 visitors a day!
Tags: devjournal, showdev
Published: 2021-10-20 18:06:22

I am glad to share that my blog crossed the 100 visitors a day mark yesterday. I know it's not a lot, but with the continuous effort, I am seeing a decent uptrend in the number of visitors per day.

I am excited because this is the first goal I had set up for the blog.

It's not the first time the blog has crossed 100 users a day. It did whenever I shared my articles on social media. But, this time it's a bit different. There was no social media push. It all happened organically. I mean, more than a hundred users came to my blog searching for the solution to their problem. 

For blogging, the biggest learning till now is that it's a long time game. Success will not come overnight. 

I am learning, implementing, making a lot of mistakes and then rectifying. And through this process, I believe I have found the formula now.

I will continue to explore and share the result in my articles. If it works for me, then I will share the complete journey with you guys. Thanks for reading :)
65+ JavaScript Code Snippets - With Explanations
Tags: javascript, webdev, codequality, tutorial
Published: 2021-10-20 18:03:38

Hi folks,

In this eBook you'll find useful JS code snippets w/ explanations by [Simon Høiberg.](https://www.linkedin.com/in/simonhoiberg/) 

[Download free eBook](https://simonhoiberg.com/ebooks/65-code-snippets-with-explanations) & enjoy it.

Great job, 
Feel free to leave any useful resources on comments.
Can you answer this Javascript question?
Tags: javascript
Published: 2021-10-20 17:56:27

Can you tell what would be the following output of these snippets?


```js
const promise = new Promise((resolve, reject) => {                                                                       20/10/2021
  console.log("YAZIF");

  setTimeout(() => resolve(), 0);
});

new Promise((resolve, reject) => {
  console.log("Yazof");

  setTimeout(() => resolve(), 0);
}).then(() => console.log(2));

console.log("CHEDDAR");

promise.then(() => console.log(1));

```

Verify your answer. Now, can you also answer this?

```js
const promise = new Promise((resolve, reject) => {                                                                       20/10/2021
  console.log("YAZIF");

  resolve();
});

new Promise((resolve, reject) => {
  console.log("Yazof");

  resolve();
}).then(() => console.log(2));

console.log("CHEDDAR");

promise.then(() => console.log(1));
```
React + Vite quick start
Tags: react, vite
Published: 2021-10-20 17:15:23

I convinced my class at [Tech Talent South](https://www.techtalentsouth.com/) to use Vite instead of `create-react-app`. These are some notes I wrote to help my instructor, TA, and classmates start using Vite.

---

## Single command quick start (Windows)

(These instructions may work for non-Windows computers, but it didn't work for at least one of my classmates who used Linux. You can always look at the official Vite [documentation](https://vitejs.dev/guide/) for more details.)

Run

```
npm init vite@latest my-vue-app -- --template react
```

Navigate to your project and install dependencies via

```
cd my-vue-app
npm i
```

Run your app with

```
npm run dev
```

For more info, check out the [docs](https://vitejs.dev/guide/#trying-vite-online) or Evan You's 14 minute [demo video](https://www.youtube.com/watch?v=DkGV5F4XnfQ).

## Multiple command quick start

Run

```
npm init vite@latest
```

and select the options you want.

## Links

[📝 Docs](https://vitejs.dev/guide/#trying-vite-online)

[🎥 Demo video](https://www.youtube.com/watch?v=DkGV5F4XnfQ)

[👥 Why ES modules?](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)

## Notes

### 👀Replacing `create-react-app` with Vite👀

Tips:

- Use `.jsx` files instead of `.js` files unless you're writing pure JavaScript.

---

Banner source: [🎥 きゅうくらりん / いよわ feat.可不（Kyu-kurarin / Iyowa feat.Kafu）](https://www.youtube.com/watch?v=2b1IexhKPz4&t=79s)  
Article source: [🐙🐱 Ai-Yukino/dev.to](https://github.com/Ai-Yukino/dev.to/tree/main/10-20-21-Wednesday-1)
Welcome Thread - v147
Tags: welcome
Published: 2021-10-20 17:14:55

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

![Pokémon friends](https://media.giphy.com/media/10LKovKon8DENq/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!**
Enable gzip compression on build for a Nrwl/nx React project and configure Nginx server to serve compressed files
Published: 2021-10-20 16:47:12

The bundle size is critical to a web application. Bigger bundle sizes increase the initial response time. Nrwl/nx’s build configuration offers many solutions to reduce bundle sizes, such as tree shaking/optimisation and minification, but gzip compression is not one of them by the time of this article.

Compressing and serving compressed files from our webserver can further reduce our web application’s bundle size by as much as 70% and more. It is easy to configure the Nginx server to compress files on the fly using gzip directive. However, compressing on the fly for every request costs server CPU resources, and it is a waste because we can and we should compress our files beforehand.

We can produce compressed gzip files on build for a Nrwl/Nx project, by extending Nrwl/nx’s webpack configurations and add `compression-webpack-plugin`.

For a React Nrwl/nx project, steps to extending Nrwl/nx’s webpack configurations are:

1. add a file webpack.config.js with the below content under your app’s folder or somewhere else. The content is copied from the default configuration from Nrwl/nx and added the compression-webpack-plugin plugin.
{% gist https://gist.github.com/rexebin/0ff09cf844e7e65045df19bc929f08aa
%}

1. Add `compression-webpack-plugin` to your dev dependencies in your `package.json` file. Note, for webpack 4.x (which is the version for nrwl/nx 12.x), the highest version of `compression-webpack-plugin` you can use is 6.1.1. Make sure you install it with your favourite package manager.

1. In your `workspace.json` file, replace `webpackConfig` under `[your-app-name]/targets/build` node to point to above file `webpack.config.js`.

After the above steps, rebuild your app. You should see extra .gz files are generated along with your original bundle files. Please note, if you encounter the “heap out of memory” error during the building process, try to increase the node’s memory usage globally like this “export NODE_OPTIONS= — max_old_space_size=4096” and retry.

To enable serving gzip files for a Nginx web server, just add `gzip_static on` in your app’s nginx configuration file. For an Ubuntu server, the file would be `/etc/nginx/sites-enabled/[your-app-conf-file]`. Then restart or reload nginx with a command like this: `sudo service nginx restart`

To check, open your browser’s developer tools, open the `network` tab, make sure `disable cache` is enabled and refresh your app. Then inspect one of your bundle files. You should see that the downloading sizes of your bundle files are much smaller. Click one of your bundle files, and in the `Headers` tab, you should see `Content-Encoding: gzip` under `Response Headers` section.
HIRING IONIC DEV
Published: 2021-10-20 16:38:59

Hi everyone,

We are small tourism SaaS company based in Serbia.
We have one app which is made in IONIC.

Our past devs split up due to internal issues and now we are left with code on gitlab.
App is active on iOS and Play Store.

We need someone to maintain it as API is sometimes changes & some new features after few months.

Please if someone very experienced can apply.

We used to work on request. We send detailed requirements and they send us offer and do it.

You can send all details here or on email office@otasync.me

Thanks,
Ilija
Which Domain is Best: BlogSpot Domain Vs Custom Domain
Tags: blogger, difference, domain
Published: 2021-10-20 16:18:05

Have you ever thought of buying a domain name for your blog? Many bloggers are stuck between purchasing a free blogspot domain vs purchasing a custom domain. Though there are many different things to consider, at the end of the day, choosing an appropriate domain will help your blog convert better. So should you buy a domain or stick to BlogSpot?

<b>See My Answer is if your content is unique and different from other people then you have to purchase a Custom Domain Because If you are starting a blog then you have to invest something then you can concentrate on that particular blogging because you are thinking about how we manage domain money from blogging.</b>

See I also Started my blog named as a custom domain blogtriggers.com I think If you are doing blogging then you have to use custom domain name for branding your blogging about particular niche.  

For More Details about <a href="https://www.blogtriggers.com/2021/08/blogspot-vs-custom-domain.html">blogspot domain vs custom domain</a> then read this posts for details information
Go .. C of 21st century
Tags: go
Published: 2021-10-20 16:16:00

Go language, it is a statically typed compiled language and it is often described as c for the 21st century!

It was created at google in 2007 by legends who really know their stuff like Ken Thompson the inventor of the (b) and (c) programming languages; and then version 1.0 was released as open source software in 2012; and the was design was meant to be simple and efficient and that's why we call it go.
 
The source code is compiled down to machine code which means it generally outperforms interpreted languages but it's famous for its extremely fast compile times made possible by innovations to dependency analysis and even though it's a statically typed language it performs type inference to deliver a syntax that is very concise and practical.

It also has a package and module system making it easy to import and export code between projects to get started install go and then open an empty directory on your system.

Create a file ending in go then add package main at the top to create a standalone executable then
declare a main function which is where your program will start executing 

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

Go has a standard library of core packages to handle common requirements like math networking or formatted io by importing "fmt" we can print a line to the standard output then run the go build command and it quickly compiles the source code and dependencies into an executable binary.

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

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

When it comes to dependencies we can also link to remote packages on github.
 
Run go mod init from the command line and that creates a go module file that enables dependency tracking.

Go is like a concise version of c or c plus plus if you know any of those languages, you declare a
variable with the var keyword followed by its name and type and initialize it with a value or you might use the short assignment syntax to replace var and let go automatically infer the type and you can define multiple variables from a single line go has all the other features you would expect in a programming language like arrays maps loops and control flow but also allows you to store the memory address of a value using pointers while disallowing pointer arithmetic which often leads to dangerous and unpredictable behavior in
addition it supports concurrency with go routines which are functions that can run at the same time as other functions by utilizing multiple threads on a cpu.
Sam Lessin: co-Founder and co-CEO of Fin
Tags: career, podcast, ai
Published: 2021-10-20 16:12:16

Sam Lessin is the co-founder and co-CEO of Fin. He also invests in tech startups through Slow Ventures, where he is a partner and early investor in companies like Venmo and Masterclass. Previously, he was a Vice President of Product Management at Facebook until 2014, where he managed several product groups.

In [this episode](https://bit.ly/3DW9ILf), Teja Yenamandra, CEO of Gun.io talks to Sam about his journey from the VP of Product Management at Facebook to coding boot camp, his "human in the loop" approach at Fin, and the dirty secret about all CEOs.

{% podcast https://dev.to/thefrontierpod/sam-lessin %}
Smartphone Technology
Tags: beginners, productivity
Published: 2021-10-20 16:10:15

A smartphone is a portable device that combines mobile telephone and figuring out/calculating functions into one unit. They are (told apart from/separate than) feature phones by their stronger hardware abilities and long/big mobile operating systems, which help wider software, internet (including web (looking at web sites on) over mobile broadband), and (combining video, sound, words, and pictures together) ability to do things (including music, video, cameras, and gaming), next to core phone functions such as voice calls and text messaging. Smartphones usually contain some metal-oxide-(element used to make electronic circuits) (MOS) electronic devices (IC) chips, include different sensors that can be (including a lot of debt) by pre-included and third-party software (such as a magnetometer, closeness sensors, (air pressure recording device), gyroscope, acceleration-measuring device and more), and support wireless communications rules of conduct (such as Bluetooth, Wi-Fi, or satellite (driving or flying a vehicle to somewhere/figuring out how to get somewhere)).
Create Mad Libs game in Python
Tags: python, datascience, programming, github
Published: 2021-10-20 16:03:02


## What is Mad Libs Game?

Mad Libs is the quintessential game of make-believe. You provide a list of words, and everyone else adds in their own silly, outrageous, or even absurd ideas for what they might be. Everyone laughs uproariously while using the best words, puns, and turns of phrase they can think up. There are tons of variations that you can take your Mad Libs adventures with at any time to suit your mood or theme.

Mad Libs Generator will give you a variety of prompts that you can use to start your story, or you can use them as the basis for your own stories. You then get to add in your funny word-puns, slogans, quotes, poetry beats, and even sound effects.

You can check our [How to Create Mad Libs game in Python](https://pythonscholar.com/python-projects/mad-libs-game-in-python/) guide to learn more about mad libs games using Python.

Now let's see a simple tutorial on how to create a mad libs game using only basic python skills; mostly, we will use python string and python [input-output function](https://pythonscholar.com/python-programming/python-input-and-output/). 

**Step 1:** In the first step, we will take the required input from the user and store it in the python variable to use in the future in our mad lib story. Copy the below code in your python compiler or Python IDE.

```
verb_1 = input("Enter a verb of choice, and press enter:")
adj_1 = input("Enter a adjective of choice, and press enter:")
verb_2 = input("Enter second verb of choice, and press enter:")
body_part = input("Enter a body part name of choice, and press enter:")
adverb = input("Enter an adverb of choice, and press enter:")
body_part_2 = input("Enter any body name of your choice,and press enter:")
noun = input("Enter a noun of choice, and press enter:")
verb_3 = input("Enter the third verb of choice, and press enter:")
animal = input("Enter name of any animal of choice, and press enter:")
noub_2 = input("Enter an noun of choice , and press enter:")
verb_4 = input("Enter the fourth verb of choice, and press enter:")
adj_2 = input("Enter an adjective of choice, and press enter:")
color = input("Enter any color name, and press enter:")
```

**Step 2:** Now, let’s add the user inputs into a story and make it a fun game, here; we will use python string to print our story. 

```
story = "Most doctors agree that bicycle of" + verb_1 + " is a/an " + adj_1 + " form of exercise." + verb_2 +" a bicycle enables you to develop your " + body_part + " muscles as well as " + adverb + " increase the rate of a " + body_part_2 + " beat. More " + noun + " around the world "+ verb_3 +" bicycles than drive "+ animal +". No matter what kind of "+ noun_2 +"you "+ verb_4 + ", always be sure to wear a/an " +adj_2+ " helmet.Make sure to have " + color + " reflectors too! "
```

**Step 3:** In the last step, we will print the story to get the final output of our name.

```
print(story)
```

As you can see, just using basic python skills, we have created a small game. 

We hope you have enjoyed this tutorial and learned something new.

Happy learning.
Use the filter positional operator in MongoDB to update specific array elements
Tags: mongodb, database
Published: 2021-10-23 23:24:29

---
title: Use the filter positional operator in MongoDB to update specific array elements
published: true
date: 2021-10-20 16:00:00 UTC
tags: MongoDB,database
canonical_url: https://donaldfeury.xyz/use-the-filter-positional-operator-in-mongodb-to-update-specific-array-elements/
series: Small Bytes of MongoDB
cover_image: https://donaldfeury.xyz/content/images/size/w960/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/).

* * *

MongoDB provides a filter positional operator `$[<name_of_filter>]` to only update some elements in an array. If you want to update all the elements in the array, [use the all positional operator in MongoDB to update all elements in an array](https://donaldfeury.xyz/use-the-all-positional-operator-in-mongodb-to-update-all-elements-in-an-array/).

You must define the filters to use in a property called `arrayFilters`.

With the following data inserted into a collection called `games`:

```
db.games.insertMany(
	{
		name: "Genshin Impact",
		reviewScores: [8, 6, 9, 5]
	},
	{
		name: "Factorio",
		reviewScores: [7, 7, 10, 8]
	},
	{
		name: "Bloodborne",
		reviewScores: [9, 8, 9, 9]
	}
)

```

For the game `Genshin Impact`, increase all the reviews by 1 that are less than 9.

```
db.games.updateMany(
	{ name: "Genshin Impact" },
	{ $inc: { "reviewScores.$[reviews]": 1 } },
	{ arrayFilters: [
		{ "reviews": { $lt: 9 } }
	]}
)

```

Notice in the `$inc` [update operator](https://donaldfeury.xyz/how-to-update-a-single-document-into-a-mongodb-collection-2/), we reference the array filter defined called `reviews` to tell MongoDB which elements to update.

[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 view the results:

```
{
	name: "Genshin Impact",
	reviewScores: [9, 7, 9, 6]
},
{
	name: "Factorio",
	reviewScores: [7, 7, 10, 8]
},
{
	name: "Bloodborne",
	reviewScores: [9, 8, 9, 9]
}
```

### Related

- [My other posts on MongoDB](https://donaldfeury.xyz/tag/mongodb)
- [All Positional Array Operator](https://donaldfeury.xyz/use-the-all-positional-operator-in-mongodb-to-update-all-elements-in-an-array/)

* * *

Did you find this information useful? If so, consider heading over to my [donation](https://donaldfeury.xyz/donate/) page and drop me some support.

Want to ask a question or just chat? Contact me [here](https://donaldfeury.xyz/contact)
Web API in NET 6 + Docker
Tags: dotnet, docker, tutorial, webdev
Published: 2021-10-20 15:57:44

Hello!

How are you? I hope all of you are stay safe and having a great day!

If you want to follow this step-by-step. Please install some tools that will be required here.

1. .NET 6: https://dotnet.microsoft.com/download/dotnet/6.0
2. Docker: https://docs.docker.com/get-docker/

## Project Preparation

* Create the Web API from template.

```bash
dotnet new webapi -o DockerNetExample
```

* Create the solution to link the project and link the project.

```bash
dotnet new sln
```

```bash
dotnet sln add DockerNetExample
```

* Your project is ready now. :)

## Prepare for Dockerfile

* Create your `Dockerfile` at the root, similar place with the `.sln` file.

```Dockerfile
FROM mcr.microsoft.com/dotnet/sdk:6.0-alpine as build
WORKDIR /app
COPY . .
RUN dotnet restore
RUN dotnet publish -o /app/published-app

FROM mcr.microsoft.com/dotnet/aspnet:6.0-alpine as runtime
WORKDIR /app
COPY --from=build /app/published-app /app
ENTRYPOINT [ "dotnet", "/app/DockerNetExample.dll" ]
```

## Build the Image and Run the Container

* Build your image use `docker build . -t dotnetexample`

* Run a container with previous image. `docker run --name dotnetexample -p 8081:80 -d dotnetexample`

* Check your container. `docker ps`. You would see like this.

![Docker PS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33ddsbs0ncgcfj0tvmf6.png)

* Check your API use browser or another things.

Note: If you use Firefox, the return will be like this, the value maybe will be different, since it returns randomly.
![Browser Firefox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7puo2cy9fizwsefvaazo.png)

* Congrats. You are done. :)
 

## Repository

{% github bervProject/docker-net-example %}

## Thank you

Thank you for visiting this tutorial. If you have any questions or suggestions, please comment in here.

![Thank you](https://media.giphy.com/media/BYoRqTmcgzHcL9TCy1/giphy.gif)
Hey, there's a new CustomEvent() going
Tags: javascript, programming, webdev, tutorial
Published: 2021-10-20 15:55:19

Event handling is a very important when it comes to making interactive websites. We can listen for various events on a element like **click**, **mouse enter**, **mouse leave**, **key up** etc. But sometimes these are not enough. Which is why many modern frameworks like [Vue.js](https://vuejs.org/) allows you to dispatch custom event and listen to them.

In this article we are going to see:
## How to use custom events in Vanilla JavaScript
To create a custom event in JS we use `CustomEvent` class
```js
const options = {
		detail: {
			message: "Hello World!"
		},
		bubbles: true,
		cancelable: true
	}
const event = new CustomEvent(
	"myEvent", 
	options
)
```
In this example, `myEvent` is the custom event type. The second parameter is the config object(optional) with three properties:
* **detail**: if you want to pass some data to the listeners of this event you can put them in this `detail` object.
* **bubbles**: if true, events will bubble to ancestors of the element which fired the event.
* **cancelable**: if true, events can be canceled using the event object’s stopPropagation() method.

Okay so now use can use this event with `document.addEventListener` and `document.dispatchEvent`.
```js
const options = {
		detail: {
			message: "Hello World!"
		},
		bubbles: true,
		cancelable: true
	}
const event = new CustomEvent(
	"myEvent", 
	options
)

document.addEventListener("myEvent", e => console.log(e.detail))

//You can fire the event whenever you want
document.dispatchEvent(event)
```
![Custom event demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/galr6twxqcap9jdvifnh.png)
 
Be sure to check out my other articles as well.
{% link https://dev.to/0shuvo0/i-will-be-notified-if-you-click-this-7df %}
{% user 0shuvo0 %}