teleren/devto huggingface dataset:
Update of Vue Rx to Vue Next Rx
Tags: vue, news, showdev, javascript
Published: 2020-12-18 11:32:12

_link on npm: [@nopr3d/vue-next-rx](https://www.npmjs.com/package/@nopr3d/vue-next-rx)_

Hello there !

The latest update of Vue is here, we are several to test it but we are still waiting for the update of certain dependencies.


So, instead of waiting I said to myself : "why don't you do it yourself?"

I chose the dependency with which I had the most affinity ([vue-rx](https://github.com/vuejs/vue-rx)) and after a few days (and a lot of coffee) the dependency was up to date with Vue Next and its unit tests too.


![Nice !](https://dev-to-uploads.s3.amazonaws.com/i/5554oaicsd55bl0j0gq7.gif)

Now let's talk about this dependency, Vue Next offers a lot of changes (new lifecycle hooks, composition API, performance improvements, multiple root node, ...)


So I took all the existing functionality of [vue-rx](https://github.com/vuejs/vue-rx) and I took the opportunity to also extend new features (Ref and Watch)


For example is how you can use Ref and Watch with the reactive way :

# Ref

```js
import { ref } from "@nopr3d/rx-vue-next";

// use ref like an Rx Subject
export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    const msg = ref("Message exemple");

    setTimeout(() => {
      msg.value = "New message !";
    }, 2000);

    msg.subscribe((value) => {
      console.log(value); // After 2s will print : New message !
    });

    return { msg };
  },
});
```

```html
<!-- bind to it normally in templates -->
<!-- on change DOM is update too -->
<div>{{ msg }}</div>
```

---

<br />

# Watch

```js
import { ref, watch } from "@nopr3d/rx-vue-next";

export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    const msg = ref("Message exemple");

    watch(msg).subscribe((val) => {
      console.log(val); // After 2s will print : New message !
    });

    setTimeout(() => {
      msg.value = "New message !";
    }, 2000);

    return { msg };
  },
});
```

```html
<!-- bind to it normally in templates -->
<!-- on change DOM is update too -->
<div>{{ msg }}</div>
```


---

Of course updated the test on vue next (it wasn't easy haha)

![Tests](https://dev-to-uploads.s3.amazonaws.com/i/gwlede2xe4r9u9fu7wm0.PNG)

---

The example folder is also updated

If you wanna test it you can install it with : 

npm install vue @nopr3d/vue-next-rx rxjs --save

---

This is my first publish on npm, feel free to open an issue !

Thanks and have a good day !

_link on npm: [@nopr3d/vue-next-rx](https://www.npmjs.com/package/@nopr3d/vue-next-rx)_

_repo: [vue-next-rx](https://github.com/NOPR9D/vue-next-rx)_
All my programming threads and job hunting resources in one list
Tags: webdev, css, javascript, career
Published: 2020-12-18 11:11:16

### Let's start!

## Free web development resources.

{% twitter 1277492413032992768 %}

## GitHub repositories to improve your programming skills.

{% twitter 1335833349672361984 %}

## You want to learn HTML & CSS but don't know where to get started?

{% twitter 1307997683651678208 %}

## You want to learn JavaScript but don't know where to get started?

{% twitter 1290533125530017792 %}

## 10 JavaScript Array methods to simplify your code.

{% twitter 1333303935600390144 %}

## Use `console.log()` like a pro.

{% twitter 1330752037148127232 %}

## 50 free tools and resources you're gonna love!

{% twitter 1338354778385084416 %}

## Free hosting:

{% twitter 1302921883977953280 %}

## Websites to find a remote job:

{% twitter 1304274720246738945 %}

## Technology-specific job sites:

{% twitter 1313729349552664577 %}

## Who's hiring developers?

{% twitter 1335127441501773824 %}

## Happy coding! ❤️

If you liked this article, be sure to ❤️ it.
How to not demotivate 
Tags: beginners, codenewbie, motivation
Published: 2020-12-18 11:04:06

## How?

When doing something, developing new software, algorithm, game, or something else that you do, and start thinking about if it worse what can I do?

![What-Why-How.png](https://dev-to-uploads.s3.amazonaws.com/i/io869st320sn3qh8i59t.png)

I don't know the answer to that question but you can follow these steps that can help you with that.

- **Disconnect from that problem temporarily** (Taking some fresh air, making some exercise, reading a book or an article better than this one, etc. )
- **Look back for everything that you have already done and achieved** (that can help you gaining motivation to keep going) 
- **Save the work and start again from scratch**, on the paper, to check out if everything is working as expected or if you find some tiny bug under your nose.
- **Talking about the problem** to someone, or alone, also can help because you are listening to what are you saying the thinking if that makes sense or if it can be done in some better way.


These are a few steps that can help.
In the future, I will write a more deep post about this theme.

Don't forget, **stay positive!**

### Links:
- [Youtube](https://www.youtube.com/c/DavidRicardo97/)
- [Twitter](https://twitter.com/DavidCRicardo/)


### Credits to:
- Cover Image: [Inspiring Decisions](https://www.inspiring-decisions.com/lorem-ipsum-8/)
- Image on the post: [The Physical Educator](https://thephysicaleducator.com/2014/11/24/whatwhyhow/)

*[PS: When writing this article I am also writing for me]*
LSD and Programming
Tags: programming
Published: 2020-12-18 11:03:02

The filmmakers from Honeypot travelled to Portugal to meet with a developer who experiments with LSD while working. The use of LSD (Acid) is legal in Portugal. 

In an interview, this unique developer explains what it's like coding on acid. Plus you'll also hear from Dr Ben Sessa, a psychedelics expert, who further explains the history of LSD and the creative benefits it can have when taken in small doses.   

{% youtube 2DAiWxBTJ08 %}
Check if a value exists in an array using Javascript.
Tags: javascript, node, array
Published: 2020-12-26 07:29:29

---
title: Check if a value exists in an array using Javascript.
published: true
date: 2020-12-18 11:00:00 UTC
tags: javascript, nodejs, array
canonical_url: https://blog.murtajaziad.xyz/check-if-a-value-exists-in-an-array-using-javascript/
---

In this article, I will show you the 2 ways for checking if a value exists in an array.

* * *

![Photo by Luis del Río from Pexels](https://images.pexels.com/photos/15286/pexels-photo.jpg?crop=entropy&cs=srgb&dl=pexels-luis-del-r%C3%ADo-15286.jpg&fit=crop&fm=jpg&h=1667&w=2500)

* * *

### 1. Using includes()

This method returns `true` if the array includes the value, else it returns `false`.

```js
let array = ["a", "b", "c", "d"];
console.log(array.includes("b")); // true
console.log(array.includes("e")); // false
```

### 2. Using indexOf()

This methods returns the index of the value if it exists, else it returns `-1`.

```js
let array = ["a", "b", "c", "d"];
console.log(array.indexOf("b")); // 1
console.log(array.indexOf("e")); // -1
```
What is your Emulator,Shell and Prompt setup?
Tags: discuss, watercooler
Published: 2020-12-18 10:58:30

Recently I saw a [video from DistroTube on YouTube](https://www.youtube.com/watch?v=LDLisRPAC_g), about the starship shell prompt and it seemed very interesting.

I also wanted to try out the alacritty emulator for some time now, so I installed both, and have been using Alacritty + Bash + Starship for few days now.

It is a great combination, and now the flow is a bit more Rust-full !

What is your current setup of Emulator,Shell and prompt?

Thank you!
#JavaScriptmas
Tags: scrimba, javascriptmas
Published: 2020-12-18 10:55:13

---
title: #JavaScriptmas
published: true
description: A collection of solutions to Scrimba's advent calendar of 2020.
tags: scrimba, javascriptmas
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--U-ewNq6x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/n9tj9kgwmba7fd2hgxmm.jpeg
---

I decided to participate in [Scrimba's Advent Calendar](https://scrimba.com/learn/adventcalendar) this year.

I enjoyed it a lot and here are my solutions:

[#1 - Candies](https://scrimba.com/scrim/cofbb46878beea46560c0412c)
[#2 - Deposit Profit](https://scrimba.com/scrim/coe4c4f4495c9f3d6222b7f1a)
[#3 - Chunky Monkey](https://scrimba.com/scrim/co3814150a050c0dad945b06d)
[#4 - Century from Year](https://scrimba.com/scrim/co7a348a28c3588ad2d1c0e5f)
[#5 - Reverse a string](https://scrimba.com/scrim/co05b433c8afb10a1c8019105)
[#6 - Sort by length](https://scrimba.com/scrim/co3824226a61d8b1fed228dce)
[#7 - Count Vowel Consonant](https://scrimba.com/scrim/co32e46aba1a9a295ca44f81b)
[#8 - The Rolling Dice](https://scrimba.com/scrim/coa544818a6a39b0173d8de62)
[#9 - Sum Odd Fibonacci Numbers](https://scrimba.com/scrim/co4724521a3323d53d2b372ee)
[#10 - Adjacent Elements Product](https://scrimba.com/scrim/coa9f40689afdcdd924ff2d3d)
[#11 - Avoid Obstacles](https://scrimba.com/scrim/co78246a1ad24bd5ae787a983)
[#12 - Valid Time](https://scrimba.com/scrim/cocae41caa10c38d2fda50768)
[#13 - Extract Each Kth](https://scrimba.com/scrim/co11f4b9281ea972e189a03d4)
[#14 - Maximal Adjacent Difference](https://scrimba.com/scrim/coaeb468fb328ae4f7225106c)
[#15 - Carousel](https://scrimba.com/scrim/co112482191131d88342d8c2e)
[#16 - Insert Dashes](https://scrimba.com/scrim/co9344317ba1f8d83926e638f)
[#17 - Different Symbols Naive](https://scrimba.com/scrim/co9704481bc3b6cffe87cda27)
[#18 - Array Previous Less](https://scrimba.com/scrim/co51845599f5ffaf24f2fbee2)
[#19 - Alphabet Subsequence](https://scrimba.com/scrim/cob1f430eb74eda1fe0fc1b83)
[#20 - Domain Type](https://scrimba.com/scrim/co0ec4f09925af11adf4a118c)
[#21 - Sum of Two](https://scrimba.com/scrim/co3084121ad1e40cecc4f2035)
[#22 - Extract Matrix Column](https://scrimba.com/scrim/cod284bff81486527858d6009)
[#23 - Tweet Input Component](https://scrimba.com/scrim/cod884197af06898783c1e387)
[#24 - Test Your Agility](https://scrimba.com/scrim/co30d41ac912f863eba61f033)

I hope you enjoy my solutions! Any feedback is appreciated.
Yet another π computation algorithms
Tags: algorithms, go, maths
Published: 2020-12-18 10:53:10

The purpose of this post is to explain, illustrate and code different PI computation algorithms from antiquity to the present. We will see that π is everywhere like in the physics collisions, in pure mathematical series or even in the randomness.

[Read more...](https://algomaths.tech/yet-another-pi-computation-algorithms/)

{% github lunatikub/AlgoMathAndCo no-readme %}
Free Open Source deployment Tools for Monitoring K8s-Kubernetes & Docker
Tags: kubernetes, docker, containers, deploymenttools
Published: 2020-12-18 10:50:30

<a href="https://www.hyscale.io">Kubernetes K8s</a> and Docker are two are the most commonly used buzzwords in modern DevOps conversations. Docker may be an app deployment tool that permits you to <a href="https://www.hyscale.io/blog/is-your-ci-cd-pipeline-ready-for-containers/">Ci CD containerize</a> and run your applications, and <a href="https://www.hyscale.io/blog/kubernetes-troubleshooting/">K8s Kubernetes troubleshooting</a> provides you with a <a href="https://www.hyscale.io/blog/infrastructure-as-code-vs-platform-as-code/">platform</a> to orchestrate or manage these CI-CD containers—since managing thousands of CI-CD containers manually using the Docker CLI would be a practical nightmare. Get started for free with <a href="https://www.hyscale.io/download-hyscale-opensource/">Open source deployment tools</a>

References:
<a href="https://www.hyscale.io/hybrid-cloud-deployment/">Hybrid cloud deployment tools</a>
<a href="https://www.hyscale.io/deploying-microservices-to-kubernetes/"> Deploy Microservices to Kubernetes</a>
<a href="https://www.hyscale.io/tutorial/simplified-cluster-setup-and-app-deployment-to-k8s-with-platform9-and-hyscale/">K8s Cluster Deployment</a>
<a href="https://www.hyscale.io/hyscale-vs-kustomize-vs-skaffold-vs-helm/">kustomize vs skaffold vs helm</a>
<a href="https://www.hyscale.io/blog/hyscale-app-centric-abstraction-kubernetes/">Kubernetes App centric abstraction</a>
<a href="https://www.hyscale.io/blog/of-microservices-and-containers/">Deploy Microservices and Containers</a>
why do we learn python?
Tags: programming, python
Published: 2020-12-18 10:31:59

why do we learn python?
![image of python](https://dev-to-uploads.s3.amazonaws.com/i/lvt2e5xp1q04s4wr13jr.png)
-python is one of the most popular languages for programming.
-it's easy to understand as compared to other languages
-less code 
-different module in python
      like; for creating GUI Tkinter, for gaming pygame, etc.
Building a Recruitment App: Software for Applicant Tracking Case Study

Tags: appdevelopment, recruitmentsoftware, recruitmenttechnology
Published: 2020-12-18 10:28:11

Discovering the right professional among the pool of candidates can be a challenging task, but acquiring the top talent is the number one goal for any enterprise. 

For HR managers to have a competitive advantage, the company’s hiring processes have to be boosted. And what could save more time and accelerate recruitment better than automation in the form of an HR software?

Automate hiring processes in your company with custom software development. Read the case study of how Apiko built a recruitment app for our personal use in an interview with an expert HR manager - [https://apiko.com/blog/building-a-recruitment-app-custom-software-for-applicant-tracking/](https://apiko.com/blog/building-a-recruitment-app-custom-software-for-applicant-tracking/)
PostgreSQL Foreign Data Wrapper tutorial
Tags: postgres, sql, database
Published: 2020-12-18 10:20:56

A PostgreSQL Foreign Data Wrapper (FDW) allows you to write queries against a remote database.

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

## Considerations

While some FDW tradeoffs are not immediately apparent, at least a few come to mind more readily.

### Schema drift

The remote schema may change. However, the FDW schema is generated at a single point in time (based on the remote schema). This may lead to the FDW schema being out of sync with the remote schema.

One solution to this issue would be to re-generate the FDW schema on a periodic basis.

## User permissions

Each database user needs an individual user mapping for the remote database server. This may not be an issue on a single-user system, but can be a bit more annoying in a multi-user environment.

## Queries
The following sections outline the queries necessary to connect to a remote database, create a mirror schema, and assign user permissions to the foreign data source.

### Create FDW extension
Make sure PostgreSQL has the FDW extension enabled.

```
create extension if not exists postgres_fdw;
```

### Create FDW server

Create the FDW server by giving it a local name and remote connection details.

```
create server <fdw_server_name>
foreign data wrapper postgres_fdw
options (host 'dbms.example.com', dbname 'database_name');
```

### Create mirror schema

Create an empty schema in the local database and populate it with matching table definitions from the remote database schema.

```
create schema <local_schema_name>;

import foreign schema <remote_schema_name>
from server <fdw_server_name>
into <local_schema_name>;
```

### Create FDW user mapping

For each user who needs to interact with the foreign server, we need to create a user mapping. 

The local user will have the same permissions on the FDW server as the remote user defined in the user mapping.

```
create user mapping for <user_name>
server <fdw_server_name>
options (user 'remote_user_name', password 'remote_user_password');
```

## References

- PostgreSQL (current) documentation - [postgres_fdw module](https://www.postgresql.org/docs/current/postgres-fdw.html)
- thoughtbot - [PostgreSQL's Foreign Data Wrapper](https://thoughtbot.com/blog/postgres-foreign-data-wrapper#handling-schema-changes)
Need A favor Guys
Published: 2020-12-18 10:18:30

Guys I need a favor from u all the favor is that will u subscribe to my YouTube channel  " CodingWithAmit " and join my discord server...
In youtube I am only having 39 subscribers so I need help from u all guys...
Link of my YouTube channel:- 
https://youtube.com/channel/UCw8e4wIQ2CwXi0F8us3wfKQ

And my Discord Server Link Is:-
https://discord.gg/petchcGy

Guys plz help me 🙏🙏🙏
Excel Formulas to Calculate the Commission Split Values!!
Tags: excelformula, excelformulas
Published: 2020-12-18 10:17:34

---
title: Excel Formulas to Calculate the Commission Split Values!!
published: true
date: 2020-12-18 10:14:00 UTC
tags: ExcelFormula,Excelformulas
canonical_url: https://geekexcel.com/excel-formulas-calculate-commission-values/
---

In Excel, to calculate a commission and split the Commission between Agent and Broker according to a pre-established schedule, you can use the VLOOKUP Function. This page will show how **to calculate the commission split values in Excel**. Let’s get started!!

Get an official version of ** MS Excel**  from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

[![Find commission split values](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/EXCEL_OaezoTs0lx.png)](https://geekexcel.com/excel-formulas-calculate-commission-values/excel_oaezots0lx/#main)<figcaption id="caption-attachment-19979">Find commission split values</figcaption>
## General Formula:

- Use the below formula to calculate the commission split.

**=commission\*[VLOOKUP](https://geekexcel.com/how-to-use-excel-vlookup-function-in-office-365/)(amount,split\_table,column,TRUE)**

## Syntax Explanations:

- **VLOOKUP** – This function helps to look up data in a range or table by row. Read more on the **[VLOOKUP Function](https://geekexcel.com/how-to-use-excel-vlookup-function-in-office-365/)**.
- **Commission** – It represents the total commission amount in the worksheet.
- **Split\_Table** – It contains the fixed intervals of a certain amount.
- **Column** – It returns the column number.
- **Comma symbol (,)** – It is a separator that helps to separate a list of values.
- **Parenthesis ()** – The main purpose of this symbol is to group the elements.
- **Multiplication (\*)** – In this symbol will multiply any two values or numbers.

## Example:

- Now we are going to see how to calculate the commission split values.
- Refer to the below screenshot.
- Here, we will create the fixed intervals of the amount with the commission percentage in **Column B** , **Column C** , and **Column D**.
-  We will enter the input ranges in **Column F** and **Column G**.
- Then, enter the given formula in the formula bar section.
- Finally, we get the result in **Cell I4**.

![Example](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/Example-67.png)<figcaption id="caption-attachment-19978">Example</figcaption>

## Conclusion:

From this tutorial, you can get to know the simple formula used for **calculating the commission split values in Excel**. Hope you like this article. Mention your queries in the comment box below. Thank you. To learn more, check out **[Geek Excel](https://geekexcel.com/)** and [**Excel Formulas**](https://geekexcel.com/excel-formula/) **!!**

### Read Also:

- **[Excel Formulas to Find the Smaller of Two Values!!](https://geekexcel.com/wp-admin/post.php?post=19803&action=edit)**
- **[Excel Formulas to Find the Minimum Value From a Range!!](https://geekexcel.com/wp-admin/post.php?post=19584&action=edit)**
How do you compensate the space that fixed header takes place in react?
Tags: react, javascript, ask, discuss
Published: 2020-12-18 10:04:18

---
title: How do you compensate the space that fixed header takes place in react?
published: true
description: react
tags: react, js, ask, discuss
//cover_image: https://direct_url_to_image.jpg
---

Let's say there is fixed header component that has two or more component. The component has it's own rendering function. Some may render earlier while some may render later.

If header has two component
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/89bml0u01o7rxnulm6a7.png)

If header has only one component
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w2wz1l5kpwffbgtoix9q.png)

Below the header component, there is section that renders list of information. Since the header is fixed, the list component has to be given certain top value in order for it to be placed just below fixed header component.

<b>How can one manage the top value for list regarding that the fixed container can have 1 or more component render?</b>

The solution I have come up is this.
![Image](https://dev-to-uploads.s3.amazonaws.com/i/w4x35jwjpmmaktv836z1.png)

This will grab the total height the fixed container takes and store it in css variable which will then be access by list component. 
But the problem here is that it is one time only. If certain component render few seconds later, it won't add that component height.

Any suggestions on how can this be changed or updated?
Wrapping up a challenging year
Tags: watercooler, webdev, opensource, privacy
Published: 2020-12-18 09:49:08

Read the full version of [this article on the Offen blog.](https://www.offen.dev/blog/performance-awareness/?utm_source=forum)

We develop a fair and open web analytics software that treats operators and users as equal parties. Wrapping up what has been a challenging year for everyone, we have worked continuously on the further development of our product over the last three months. This is what we have achieved.

**Query performance**

We were able to significantly improve query performance when displaying metrics. When analyzing many data points over longer periods of time, we were able to reduce response times by up to two-thirds.

**User onboarding**

The feedback we have gathered so far has shown us that the functionality of our [Auditorium](https://offen.offen.dev/?utm_source=forum) is not immediately clear to some users. Therefore, there is now an onboarding feature for the first-time user. In addition to a brief insight into the data just collected, he will now be introduced to the basic functionality of Offen.

**Campaigns and sources**

Since we want to offer a fair and professional web analytics alternative, we integrated a UTM feature early on. URLs can be marked with special tags that are later displayed separately in the Auditorium. You can now find a detailed description of this feature [in our Docs.](https://docs.offen.dev/running-offen/campaigns-sources/?utm_source=forum)

**Up next**

In the coming months we will focus on some critical UX improvements also featuring ready-made elements for operators to make their users aware of how to access their data. In addition, we will add German as a second locale and further develop the underlying idea of Offen. So stay tuned!
Solving day 18 of Advent of Code 2020 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2020-12-18 09:48:54

---
title: Solving day 18 of Advent of Code 2020 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2020 (day 18)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2020 in Javascript
---

{% youtube BeNj24qFjHQ %}
Best Office 365 Backup
Tags: security, backup, office365, microsoft
Published: 2020-12-18 09:44:59

The various services in Microsoft Office 365 are available almost all the time, thanks to Microsoft's 99.9% uptime record. However, the only aspect that Office 365 wanders into is providing a way to recover from unexpected data loss. Microsoft's data retention capabilities are not sustainable solutions for all data loss scenarios, as they are very minimal.

So, this is where Altaro stands up! It offers the best Office 365 backup as the ultimate solution for your data loss headaches: https://www.altaro.com/office-365-backup/