teleren/devto huggingface dataset:
Error: Cannot find module 'mongodb/node_modules/bson'
Tags: mongodb, node, mongoose
Published: 2021-05-31 15:21:14

---
title: Error: Cannot find module 'mongodb/node_modules/bson'
published: true
description: 
tags: #mongodb #node #mongoose
//cover_image: https://direct_url_to_image.jpg
---
##1 Add "mongodb": "1.4.9" to package.json and run "npm i"

###2 Add "mongoose": "^4.4.12" to package.json and run "npm i"

####3 run npm install inside mongodb folder
In your terminal, navigate into mongodb folder like this cd node_modules\mongodb  and run "npm i"


#####4 Restart your serve: npm start

if all these steps still failed
Delete your node_modules and run "npm install" with your package.json intact.

Reference: [github issues ]https://github.com/Automattic/mongoose/issues/2718
Volia!!!
The simpler Javascript library
Tags: javascript, library, simple, inter
Published: 2021-05-31 15:20:34

Hello friends, I am here to introduce a new Javascript library to you, it's called **Inter**, it's a javascript library designed to build highly interactive web apps, so why a new Javascript library? Let me explain why.

# Simplicity

The most front-end Javascript technologies around are really unnecessary complex or verbose, and they do not have an intuitive api. I guess when you already know Javascript you can learn a framework or a library in a few minutes but it is not what we've seen. **Inter** is very simple and intuitive.

# You won't do any complex setup

You will not do any complex setup to be up and running with **Inter** just import the library in a script tag, it's so adoptable, if you already have a web app you can add it to enrich a party of your web app.

# It is small

It does not mean that it's less capable, it means that it is easy to learn and cheaper to parse and download.

# It is easy

If you know Javascript, in a few minutes you will understand **Inter** quickly, there's no magic, it is just Javascript.

# It is reactive

**Inter** has a powerful reactive system, that know exactly where to apply the changes.

So **Inter** came to give a fun in development process, with it's intuitive and simple api.

If you know Javascript you already know Inter, to have a in-depth guide visit Inter's repository in Github [Inter's repository](https://github.com/DenisPower1/inter)
Amazing Testimonials Hover Using HTML & VanillaTilt
Tags: html, css, webdev, javascript
Published: 2021-05-31 15:14:01

Today I created a Amazing Testimonials Hover Using HTML & Vanilla Tilt. This is simple testimonials using html and CSS and I use vanilla tilt for hover effect. I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/oNZpgWE %}
How to Set up Laravel Queues on Production
Tags: laravel, queue, programming
Published: 2021-05-31 14:53:31


{%youtube iH4Skwaw-KU%}

Hello everyone, in this article, you will learn how to set up Laravel Queues/Jobs on production

Below steps to follow...

1.Connect to your ubuntu server and go to your existing laravel project then run the below command to create required tables in the database.
```
php artisan queue:table
``` 

2.Then migrate the tables with the help of the below command

```
php artisan migrate
``` 
3.Now, you can create Jobs controller through command so that you will get the basic format of jobs or queue in laravel

```
php artisan make:job SendNotification
``` 
Here, SendNotification is a controller, where your main logic of queue/job will execute.

Laravel queues provide a unified queueing API across a variety of different queue backends, such as Amazon SQS, Redis, or even a relational database.

Now, we need to setup .env file to execute the jobs using database

 
4.Go to .env file then change QUEUE_DRIVER=database or QUEUE_CONNECTION=database

5.Go to the app/Jobs folder and write the task in the handle function of the SendNotification.php file and you can pass the variables from the controller and define them in the constructor in the Job file. (Refer to Video for better understanding)

6.From any controller you can dispatch the job:  dispatch(new SendNotification($mobile, $msg));

7.To automate the queue we have to install a supervisor 

```
apt install supervisor
``` 


8.Create supervisor config file at /etc/supervisor/conf.d  queue-worker.conf

```
cd /etc/supervisor/conf.d
nano queue-worker.conf
``` 
**queue-worker.conf**
```
[program:queue-worker]
process_name = %(program_name)s_%(process_num)02d
command=php /var/www/html/project-folder/artisan queue:listen
autostart=true
autorestart=true
user=root
numprocs=1
redirect_stderr=true
stdout_logfile=/var/www/html/project-folder/public/worker.log
```

9.Reread the supervisor the config file

```
supervisorctl reread
``` 


10.Activate the process

```
supervisorctl update
``` 

  [To know more about Laravel Queue](https://laravel.com/docs/8.x/queues)
Common Mistakes
Published: 2021-05-31 14:45:44

## this
### 1. What does "this" refer to?
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtvomwo8380m37ug5on7.png)
 
"this" in a method refer to **car** (not Car) in this situation.
看call function的时候，最左边的是什么，this就是指什么

### 2.How to solve "undefined" problem caused by "this"?
用arrow function.
Launch a GUI Application inside the Docker Container
Tags: docker, python, jupyter
Published: 2021-05-31 14:35:14

In this article, we are going to see how to run/launch the Jupyter notebook inside the docker container.

By default, we cant run any GUI applications on Docker container. By performing some trick, we are going to run those applications inside the docker container.

We have to know our GUI Display variable of our localhost by running the following command.
```echo $DISPLAY```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vu9mvr139ad1plof0g8v.png)

Here, DISPLAY variable is :0

Then we have to create the docker container by using following command.
```docker run -it --name mygui --net=host --env="DISPLAY" -v /root:/root centos:latest```

Here, we are giving docker network as host network in order to reach the host and access the host environment, since we are going to use host's Graphical Interface to run the GUI applications on Docker containers.

We are importing a environmental variable DISPLAY in order to get that display to run GUI applications.

Now, you are inside the Docker container. But, you may notice that your hostname on bash is not changed.

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

You can also verify using your IP or running any non-default applications.

Next step is to install firefox and Python3, because Jupyter is a python library so we required Python and Jupyter runs on the top of firefox.

You can install those packages using the following command.
```yum install firefox python3 -y```

After installing those packages, final step is to install Jupyter using pip3 by using following command.
```pip3 install jupyter```

Now, your Jupyter library is installed. You can use it by running the following command.
```jupyter notebook --allow-root```

![jupyter cli](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8eott74e3so21o3foac.PNG)
 
Since, due to security concern, Jupyter cant run in root mode.So, we add --allow-root in order to launch Jupyter in root mode.
     ![jupyter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ewtkl4mriyxfu3pt1vk.PNG)
 
Finally, we launch Jupyter notebook inside the container. Now, you can run any ML models on Jupyter.

Thats it. Thank you for your reads. Stay tuned for my upcoming article!!
CreateJs + HTML5
Tags: html, createjs
Published: 2021-05-31 14:29:37

A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. When I decided to use these two technologies for JOKERCARDGAMES I knew that something special was in the works. I want everyone to check out what me and my team created. So you will be encouraged to use this combination of technologies.https://jokercardgames.itch.io/
Make PowerShell with k8s great again
Tags: powershell, pwsh, k8s, kubernetes
Published: 2021-05-31 14:16:27

---
title: Make PowerShell with k8s great again
published: true
description: So, like me, you're using Windows. WSL isn't always reliable (e.g. VPN problems), yet you're working with Kubernetes and require autocomplete tools. I'm the same way :) 
tags: PowerShell, pwsh, k8s, kubernetes
canonical_url: https://stapp.space/pskube-context/
---

So, like me, you're using Windows. WSL isn't always reliable (e.g. VPN problems), yet you're working with Kubernetes and require autocomplete tools. I'm the same way :)

## Kubectl autocomplete

With bash or zsh, having autocomplete is straightforward. Almost only one command is required to complete the task:

```
source <(kubectl completion bash)
```
However, this will obviously not work in PowerShell😅. Especially when you look what and how many lines the `kubectl completion bash` command produces and how many lines it generates:
```
kubectl completion bash | wc -l
```
14143 is the correct answer! To implement autocomplete, more than 14k lines of code were written!
How to use it on Windows?  Is it possible to move it? Yes, and thankfully, someone else did the legwork for you: https://github.com/mziyabo/PSKubectlCompletion/blob/master/PSKubectlCompletion.psm1

To use autocomplete we will need the [PSKubectlCompletion module](https://github.com/mziyabo/PSKubectlCompletion). Install it with `Install-Module PSKubectlCompletion` and include with:
```
Import-Module PSKubectlCompletion
Set-Alias k -Value kubectl
Register-KubectlCompletion
```
At this point the basics are working quite well. But how about other tools? Like ...

## kubectx and kubens
If you never use the original ones these are two simple commands to switch your current Kubernetes context (`kubectx`) and namespace (`kubens`). In PowerShell world they should be named rather like Select-KubeContext and Select-KubeNamespace, but I will you aliases instead 😜

And for above someone else did the work for you once more. It's me this time: https://github.com/ptrstpp950/PSKubeContext
How it works? Just let me present a small YouTube:
{% youtube _6XjdLD0TWo %}

Great, isn't it?  I'm so glad it works that I made and published a module called [PSKubeContext
](https://www.powershellgallery.com/packages/PSKubeContext)

To utilize it, install it with `Install-Module PSKubeContext`, and simply add the following to your profile:
```
Import-Module PSKubeContext
Set-Alias kubens -Value Select-KubeNamespace
Set-Alias kubectx -Value Select-KubeContext
Register-PSKubeContextComplete
```

What's inside:

- `Select-KubeContext` or if you prefer alias `kubectx`
- `Select-KubeNamespace` or `kubens`
- 100% autocomplete using <TAB> 🙈🙉🙊
- A menu in command line to select the context/namespace if something goes wrong 😅

And that's it. Your PowerShell is great again and works well with Kubernetes CLI.
Como eu organizo o CSS
Tags: css
Published: 2021-05-31 14:16:21

---
title: Como eu organizo o CSS
published: true
description: A ideia nesse post é compartilhar como eu costumo organizar arquivos de estilo.
tags: CSS
cover_image: https://images.unsplash.com/photo-1577996980983-928bf4612005?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=100
---

Nesse post eu comento sobre 3 pontos que eu organizo quando eu escrevo arquivos CSS:
- Ordem das propriedades
- Ordem dos seletores
- Nomes de classes

Eu gostei bastante de contar sobre como costumo fazer essa organização, vale a pena dar uma conferida no link do meu blog oficial: 

https://evellynlima.com.br/como-eu-organizo-meu-css/

--- 

#### Links úteis
- [Foto tirada por Rad Pozniakov](https://unsplash.com/@radpozniakov)
Farsite
Published: 2021-05-31 13:37:40

Farsite is a blockchain powered sandbox massively multiplayer online (MMO) real-time strategy (RTS) game. It has the elements of adventure in a science-fiction setting based on a post-apocalyptic story.

The gaming universe of Farsite is formed by Constellations containing stars, each with unique set of planets. "Homestead" is the first Constellation where all players start the game. By using some Credits, players can travel between Stars on spaceships following interstellar paths in faster than light modes, performing some social media tasks can increase your scores to get a powerful starter ship. If this alone has made you excited or has sparked your interest to the game, you may use this link to register, https://farsite.club/u/warliezdiaz.

### Technology Used
Farsite is built using a mix of distributed ledger technology. The game also features Collateralized Digital Assets (cNFT) which is a proposed standard for ERC-20 collateral staking on non-fungible tokens (NFTs) Most of the in-game operations and trading will take place on Layer 2. Farsite will be open source and open to anyone who wants to play and contribute to the development of the game. It will be available to anyone with a web address and can be played by anyone with an internet connection.

### Environment
Within the Farsite universe, Constellations play a central role. Only 4 to 5 Planets will be explored on the start of the game. Exploring a Planet will open its Sectors for acquisition and reveal resources spots and deposits. Sectors are a part of a Planet representing a construction site for a Base. These contain valuable resources that can be extracted using special buildings on the surface.

The ownership of a Sector can be traded or transferred to another player with all the contained Resources and constructed Bases. The construction of Stations can only be done by a player or a Corporation and requires a lot of resources and credits. Without a Station in a Star, players will need to fly to another Star to perform these transactions and require credits. All planets in the 'Homestead' Constellation will be available for colonization. There are 8 to 10 known Planets, unknown Planets and dead Planets.
Deploy Twitter bot on Heroku
Tags: heroku, twitter, node, javascript
Published: 2021-05-31 13:08:15

In [__part 1__](https://dev.to/neer17/twitter-bot-in-node-js-329) of this post, we have made a Twitter bot that greets followers and people who like our tweets but it was dependent on our local machine. So, in this post let's get rid of it and push it on Heroku.

Heroku bestow the functionality to make a Node app a **Worker** which would run continuously as opposed to a **Web** app that would be put to sleep if not visited for a brief period of time.

__Step-0:__ Make a Heroku app, then we can deploy the app using either _Heroku CLI_ or attaching Github to it. Here, I am gonna use Heroku CLI.

__Step-1:__ Add a _Procfile_ to make our app a _Worker_. Simply make a file with the name **Procfile** add it to the root and add the following code in it:

```
worker: npm start
```

And modify the _start_ script to ` "start": "node bot.js"`

__Step-2:__ Push the app to heroku by following the steps: 

- Install Git form [here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
- Install _Heroku CLI_ from [here](https://devcenter.heroku.com/articles/heroku-cli#download-and-install)
- Commit your changes using _Git_
 -  ```js

      cd myapp
      git init
      Initialized empty Git repository in .git/
      git add .
      git commit -m "My first commit"

      ```
- Then create a Heroku app using `heroku create twitter-bot-2021`, this would also add a remote to you repository. Check the remote using `git remote -v`. This should show a Herko remote.

- Now open the app by login in to the Heroku in order to put environment variables there as we cannot push `.env` file for security reasons.

- Get the app URL by opening up the app using _open app_ option from inside the app _dashboard_.

- Then go to _settings_ and click on _Reveal Config Vars_ and insert the environment variables present in your _.env_ file.

- Now, finally deploy the code to Heroku using `git push heroku master:main`, if you are on the `main` branch in your local git repo then simply do `git push heroku main`.

- Checkout [these](https://devcenter.heroku.com/articles/git) docs related to deployment in case you are stuck somewhere. 

- Check the dashboard of the app, it should show a successful build in green.

- Now, finally check the bot by following it form some other account, you should get the DM from the bot.
<br>

And you have done it.
![](https://media.giphy.com/media/9XdF2zUugVFHVXbK2V/giphy.gif)
Day 12/30 : Responsive Pricing Card tables using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-05-31 12:53:00

Welcome to Day 12 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Responsive Pricing Card tables](https://1.bp.blogspot.com/-CdRBDVK0QGI/YKijanRy2CI/AAAAAAAAAEk/rZkyLmWSRd4qJ6tv6qMkGn_td86ZGRelgCLcBGAsYHQ/s600/12.gif)

**➜ Video Tutorial :**

{% youtube 3no4wrHP2Ek %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/05/responsive-pricing-card-tables-using.html


**➜ Instagram Post and Reel for Day 12 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

------------------------------------------------------------------

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
3 ways to clone in JS
Tags: javascript, webdev, react, productivity
Published: 2021-05-31 12:42:22

Objects in JavaScript are reference values, you can't simply just copy using the '='<br>

_Save It For Later!_ Let's begin...<br>

```
const food = {a : 'apple', b : 'burger'}
```

####<br>1. Spread
```
{...food}
```

####<br>2. Object.assign
```
Object.assign({}, food)
```

####<br>3. JSON
```
JSON.parse(JSON.stringify(food))
```

####<br>Result
```
{a : 'apple', b : 'burger'}
```

<br>_Do you know the difference between these 3 ways?_ Comment down below!

<br/>
Connect with me : [Github](https://github.com/deyRupak) | [Tutoring](https://www.fiverr.com/share/V763ld) | [Freelance Web Dev](https://www.fiverr.com/share/Rld9Y8)
Easily animate DOM elements entering the viewport
Tags: css, javascript, html, animation
Published: 2021-05-31 12:25:29

# Animon

I tried to create a JS package as simple as possible to animate DOM elements when they get into the viewport.

- [Package's repository](https://github.com/bnthor/animon)
- [Demo site](https://bnthor.github.io/animon-site/) showing the animations

## Usage

The installation and initialisation is pretty simple:

```bash
npm install -D animon
```

Add the default styles to your HTML page:

```html
<link rel="stylesheet" href="https://unpkg.com/animon/dist/animon.css"/>
```

Then you can import animon and launch it. By default it animates all the elements that has an `animonItem` class:

```js
import { animon } from 'animon';

animon();
```

## Custom selector 

You can target any element, passing a CSS selector to the animon function:

```js
animon('h1');
```

### DOM syntax

Animon will detect all elements that has a 'animonItem' classname, for example:

```html
<section>
    <h1 class="animonItem">Hello World</h1>
    <p class="animonItem">Lorem ipsum dolor sit amet, tu quoque mi filii.</p>
</section>
```

In addition, animon also detects three data-attributes that gives you more control:

#### Data-effect

This is the easing function that will be used on the element entrance:

```html
<h1 class="animonItem" data-effect="fadeInUp">Hey yah!</h1>
```

There's a few effects available at the moment:

- fadeIn
- fadeInLeft (default)
- fadeInRight
- fadeInDown
- fadeInUp
- scaleUp
- scaleDown

#### Data-delay

Delays the entrace by `x` milliseconds:

```html
<h1 class="animonItem" data-delay="800">
```

#### Data-duration

The transition duration, it must be expressed as a CSS "transition-duration" value (120ms, 2s etc...).

```html
<h1 class="animonItem" data-duration="4s">
```

### Custom effects

You can skip importing the default stylesheet entirely and create your own effects. All you have to do is declare a default state and its `.is-visible` CSS properties.

You may want to start with this:

```css
/* Base */
.animonItem {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 640ms 400ms cubic-bezier(0.5, 1, 0.89, 1),
        transform 640ms 400ms cubic-bezier(0.5, 1, 0.89, 1);
}
.animonItem.is-visible {
    opacity: 1;
}

/* Custom effect */
.animonItem[data-effect="myEffect"] {
    transform: translateY(20rem);
}
.animonItem[data-effect="myEffect"].is-visible {
    transform: translateY(0);
}
```
What is the difference between QA and UAT?
Published: 2021-05-31 12:24:57

What is UAT? 

It is the last period of the plan and working of web items. Before your web item goes live, the UAT is the place where the test group will pay special attention to all that isn't right and could turn out badly. 

We should characterize Quality Assurance (QA) testing as follows: 

It ensures the nature of the item, that it meets indicated necessities in the test plan from the concurred extent of work. 

The QA group is autonomous from, yet upholds, the improvement group. 

It doesn't have to test the web item's convenience according to shopper experience 

QA analyzers are not expected to comprehend the motivation behind the web project nor the business 

Sounds like Quality Assurance (QA) analyzers could be living under its own cavern. You may differ about the assumptions and when QA should come in, and you're not off-base to feel that. You may demand that QAT ought to occur previously, after, or during the <a href="https://www.testingxperts.com/blog/uat-testing">UAT</a> or the venture life cycle, in view of the buyer since quality is then estimated by the assessment of purchasers. Isn't that right? 

Conclusion
<a href="https://www.testingxperts.com/blog/quality-assurance-banking-system">Quality Assurance</a> (QA) testing can contrast across associations in light of the fact that not all organizations make it happen, and select only one strategy. These two systems can be joined relying upon the different components and the target of the web items. In Agile, QA testing and UAT are related to one another rather than them being done in an arrangement.
Using Raspberry Pi as Dev Platform for smartwatch development
Published: 2021-05-31 12:24:19

Normally one would think Raspberry Pi being a single board computer or SBC for short would not make a good dev platform. This may be because traditionally dev platform requires lot of libraries and hardware resources that a SBC like Pi may not suited for. However for a small hardware development like smartwatch Raspberry Pi 3+ and above is not only suitable but ideal as you can do both hardware and software development.  

1) First you you need to choose smartwatch dev kit I choose PineTime smartwatch by Pine64
2) Next you need to install the Dev tools you need for development as you see in the image above
3) Next you need to choose an Operating system or firmware for your smartwatch I choose Wasp-os https://github.com/daniel-thompson/wasp-os and it has all the libraries and documentation right on github it also has good documentation Right here https://wasp-os.readthedocs.io/en/latest/install.html#install-prerequisites
4)Rest all depends on what you trying to build with the smartwatch the possibilities are endless