teleren/devto huggingface dataset:
replaceAll in JavaScript
Tags: javascript, webdev, tutorial, beginners
Published: 2021-01-09 18:19:27

<p><span class='first-letter'>S</span>tring.prototype.replaceAll() replaces all occurrence of a string with another string value.</p>

<u>Syntax:</u>

```js
const newStr = str.replaceAll(regexp|substr, newSubstr|function)
```

There are few ways to replace all occurrence of a string:

1. RegEx
2. split and join
3. replaceAll

### 1. RegEx 🙅‍♀️

```js
const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.replace(/suprabha/g, "suprabha supi");
console.log(newInfo); // "Hi All, suprabhasupi's account is @suprabhasupi"
```

### 2. split and join ䷖ ⊞

Using `split` and `join`, replace all the occurrence of a string.

```js
const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.split('suprabha').join('suprabhasupi');
console.log(newInfo); // "Hi All, suprabhasupi's account is @suprabhasupi"
```

Till now, you were able to do full replacement with above two approaches. Now we have `replaceAll` which helps us to do the same.

### 3. replaceAll 🚀

<p>The <a href='https://github.com/tc39/proposal-string-replaceall/commits?author=mathiasbynens'>Mathias bynens</a> proposal solves these problems and gives a very easy way to do substring replacement using `replaceAll()` which replaces all instances of a substring in a string with another string value without using a global regexp.</p>

```js
const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.replaceAll('suprabha','suprabhasupi');
console.log(newInfo); // "Hi All, suprabhasupi's account is @suprabhasupi"
```

You can also pass RegEx to first parameter in `replaceAll`.

```js
const info = "Hi All, suprabha's account is @suprabha";
const regex = /suprabha/ig;
const newInfo = info.replaceAll(regex,'suprabhasupi');
console.log(newInfo); // "Hi All, suprabhasupi's account is @suprabhasupi"
```

**Note: 🧨**

<p>When using a regexp you have to set the global ("g") flag; otherwise, it will throw a <i>TypeError: "replaceAll must be called with a global RegExp"</i>.</p>


You also have `replace()` method, which replaces only the first occurrence if the input pattern is a string.

```js
const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.replace("suprabha", "suprabhasupi");
console.log(newInfo); // "Hi All, suprabhasupi's account is @suprabha"
```

## Reference 🧐

- <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll'>replaceAll MDN</a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
Ensure all nock mock interceptors are used
Tags: javascript, testing, nock
Published: 2021-01-12 22:03:15

---
title: Ensure all nock mock interceptors are used
published: true
date: 2021-01-09 18:15:05 UTC
tags: javascript,testing,nock
canonical_url: https://michaelheap.com/nock-all-mocks-used/
---

When using `nock` to mock HTTP requests in node, you can call `nock.disableNetConnect()` to make `nock` throw an error any time a request is made that does not have a mock configured. This is useful, but only tells half of the story. What happens if you configure a mock that is not used? Your application/library may not be making a request that you expect it to.

I use `jest` for testing, but the following instructions would work for tools such as `mocha` too.

`nock` exposes a few useful functions that we can use to keep track of our configured mocks:

- `isDone` - returns true if all configured mocks have been used
- `pendingMocks` - returns any mocks that have been configured but not called
- `cleanAll` - removes all active mocks (both pending and fulfilled)

Putting these three functions together, we can add an `afterEach` method to our tests that show an error if there are any `pendingMocks` remaining:

```
afterEach(() => {
  if (!nock.isDone()) {
    throw new Error(
      `Not all nock interceptors were used: ${JSON.stringify(
        nock.pendingMocks()
      )}`
    )
  }
  nock.cleanAll()
})
```

This will throw an error if there are any unused mocks and log out the HTTP verb, host and path for any pending mocks (e.g. `["GET http://example.com:80/path"]`)
Ruby on OpenBSD
Published: 2021-01-09 18:10:16

If you use OpenBSD for security reasons, you can use several versions of [Ruby](https://www.ruby-lang.org/en/). OpenBSD is a unix system that has many built-in security mitigations.
 
## Install Ruby

You can use the command pkg_info to get information on packages

    doas pkg_info -Q ruby

This returns all related ruby packages. On the latest OpenBSD version. To check your OpenBSD version

    $ uname -a
    OpenBSD foo.home 6.8 GENERIC.MP#2 amd64

In my version it returns

    jruby-9.2.13.0
    mruby-2.0.1p0
    ruby-2.5.8p0
    ruby-2.6.6p0
    ruby-2.7.1p1

This is the default OpenBSD packages, not the ports repository. In the ports repository, they didn't do a security audit on the software packages.

You can install ruby with the command

    doas pkg_add ruby-2.7.1p1

If you are new to Ruby, try this [Ruby tutorial](https://ruby-lang.co/).

Then to run program you can use **ruby27**. 

    ruby27 program.rb

Of course Ruby isn't the only programming language you can use on Go. There's C, C++, [Golang](https://golangr.com/), [Python](https://python.org), [PHP](https://php.net) and a lot more.
Learn AWS DevOps
Tags: aws
Published: 2021-01-09 18:08:29

AWS DevOps is a hot area for top jobs.  In this LinkedIn search there are over [9,000 currently open jobs](https://www.linkedin.com/jobs/aws-devops-jobs/) in the US for AWS DevOps roles.

In this 15 hour-long curated track of courses on Lynda.com, take in the basics of AWS DevOps and more.  The Lynda.com/LinkedIn Learning course libraries literally have hundreds of courses on AWS (and other public clouds) in DevOps, Dev, Architecture, Security and many more in-demand topics.

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

Tip: Many locations allow for FREE use of Lynda.com courses if you have a local library card. For example in Hennepin County (MN, US) - here's the link (search on Lynda.com)

https://www.hclib.org/browse/online-resources

####happy2021 
####keepLearning
Interaction Between FTP Server and client
Tags: python, network
Published: 2021-01-09 18:07:07

######Photo by panumas nikhomkhai from Pexels

The client sends a Passive[PASV] commands to the server which invokes passive modes
The server responds with a 227 code with IP address and port of data socket
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ojj7nqfnfa9hg5032a53.png)

The client sends a retrieve[RETR] command plus, the name of the file to be retrieved
If the client is authorised to  access the file the server sends a 150 code[request is successful and the file is about to be transferred]
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z5jsfg7n44xzmv26eoo5.png)

Now to establish the connection to be used connection the client sends an SYC[synchronise] command
The server replies with an acknowledgement and so does the client
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ectosxvf3qdek5xnednu.png)

The server sends part of the file and the client acknowledges it and this continues until the whole file is received.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/grtz5mw7k7xgalimarrr.png)

Thanks for reading please leave comments of suggestions or contact me [@black_strok3](https://twitter.com/black_strok3)
Git, GitHub, and Open Source Projects
Published: 2021-01-09 18:05:00

#**_Introduction_**

Git and GitHub are used world wide by almost any developer known to man. It is an extremely useful tool that lets developers work on the same file from different locations uploading and transferring the progress each time a developer finishes.

#**Git vs. GitHub**

While both services appear to have the same function, there is a distinct different between the two. Git is open source, and installed on the local machine. Conversely, GitHub is not open source, and is an online service, utilized through a web browser

#**Git Commands and Interaction with GitHub**

**-clone:** clone is used to clone, or duplicate, an already existing repository into your editor or files

**-push:** This can be used to push or send your updated but not uploaded files to the GitHub repository

**-pull:** Conversely from push, pull can rip or take files from the uploaded repository down into you files for editing

**-add:** Adds a file to you local machine to later be uploaded to the repository

**-commit:** Uploads the pushed files to the GitHub repository

**-branch:** Displays all branches within the current repository

**-checkout:** Changes the current branch that is being worked on to a different branch to work on

#**GitHub Change Tracking**

GitHub also helps developers interact but showing change logs and other useful information within the files. It has useful features such as showing other users what was deleted, added, and comments that are made by the developer who made said changes.

#**GitHub Branches**

Branches are one of the best ways to utilize workflow in GitHub. The main branch, called master, is what is always seen as the actual working and functioning product. Branches can be utilized in order to work on files in the master branches without breaking the rest of a project. They are most commonly used when developers are looking into fixing bugs or creating/testing a new feature that is being added.

#**_Contributing to open Source_**

Open source is meant to be treated as a coding playground of sorts. It is a place where you can have fun, experiment, and try new things, without worry of judgment or fear of being wrong. Open source projects are places for people to use to become better then they already are, expanding their limits and becoming a better coder. While most of not all open Source project have instructions, this is to keep challenging you to be the best coder you can be, and to also avoid committing something that breaks the project.

When starting an Open Source project, you use a GitHub project called Fork. Forking clones the entire repository and makes a copy that you own and can edit.

#**_Sources_**

**Information:** Udemy "The Complete Web Developer 2021: Zero To Mastery"  course by Andrei Neagoie
**My Class Teacher:** Matthew Larrubia
Microsevices with different languages
Tags: discuss, help, microservices
Published: 2021-01-09 17:58:30

Hello everyone,

I want to learn microservices deeply. I know spring boot, cloud, eureka, zuul , docker etc. But if i want to write one service with flask another one with python then how to implement service discovery and api gateways? How to manage these services? how do you manage this kind of services? Any suggestions are welcome. Thank you !
my website
Tags: dohackathon
Published: 2021-01-09 17:50:14

## What I built
here this is a simple website of mine wishing you all a happy new year.....
### Category Submission: 
Random Roulette

### App Link

https://my-website-xruwk.ondigitalocean.app/
### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3vn4o3x7va5q94y6i2h2.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/woyjtxye7ki0vszikwux.png)

### Description
This is my website which helps me to connect to all of you there. And here are my contact info and this site will re-direct you to my portfolio site....

### Link to Source Code
https://github.com/bakiyaswanth/my-website
### Permissive License
MIT

## Background
(What made you decide to build this particular app? What inspired you?)
Nothing special about this site but, I have done some work using a video background and found some thing worthy to share with you all...
### How I built it 
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)
i have built this site using html, css , java script and deployed it on Digital Ocean app platform

### Additional Resources/Info
just enjoy the website interface and get engage with me😊😊
thank you digital ocean to giving me this opportunity....
Interactive websites with vue.js
Published: 2021-01-09 17:46:35

JavaScript isn't going anywhere soon, and these days JavaScript is used to make all kinds of things including Web Apps. Who would have thought that the web browser became a kind of operating system?

## What is Vue.js?

[Vue.JS](https://vuejs.org) is javascript framework that inspired by Angular. You can find some [Vue examples here](https://vuejsexamples.net/).

If you have a single page web page, you can make it interactive using Vue.js.

You can make all kind of on page interacts with Vue and even small apps that don't require a back-end. In fact one of the things you can do is interact with an API and present the data on a single page (as an app) with Vue.js. 

Pretty cool right? or do you prefer React or another framework when working with the web?

## Why Vue.js?

There are several reasons why you could use vue.js

First it's approachable. If you already know HTML, CSS and JavaScript you can build things in no time!

It's scalable and it has a small footprint which is important for page speed. It has a 20KB min+gzip Runtime
Leveling Up in 2021
Published: 2021-01-09 17:38:25

Reflecting on 2020 was eye-opening for me. While I never had a shortage of goals I wanted to accomplish, I struggled with organizing those goals into focused efforts. So this year I committed to a different approach, and created a 3-step process to keep myself on track for 2021. 

1. Set a [focus](#2021-focus) for the year.
2. Plan [goals](#goals) based on that focus.
3. Establish [milestones](#milestones) to stay on track.

### 🌀 2021 Focus
I chose 3 areas of programming that I want to focus on and master. 

- JavaScript
- Python
- **Deep Dives:** Data Structures & Algorithms


### 🎯 Goals
With my priorities in mind, I established 5 measurable goals to keep me on track. 

1. Publish 25 blog posts. Write about topics related to my **Focus** areas.
2. Complete 3 Udemy courses: [Learning Algorithms in JavaScript](https://www.udemy.com/course/learning-algorithms-in-javascript-from-scratch/), [Python for Data Structures](https://www.udemy.com/course/python-for-data-structures-algorithms-and-interviews/), [The Complete Javascript Course 2020](https://www.udemy.com/course/the-complete-javascript-course/).
3. Finish my last 2 Computer Science classes. 
4. Attend 2 tech conferences: [Grace Hopper Celebration](https://ghc.anitab.org/), [PyCon](https://us.pycon.org/2021/).
5. Complete my [2021 Reading List](https://blog.code-create.dev/reading-list).

### 🏔️ Milestones
I divided my 2021 calendar into blocks&mdash;I chose two-month terms because that worked best with my university's schedule. **I created milestones by dividing my goals into smaller tasks**, then I assigned each milestone to a specific term. 

**Tip:** Keep your workload in mind as you assign milestones. *For example, my CS classes have an intense workload, so I know I won't have time to work on any other goals during Term 2.*

  ![2021 Goals Term Graph@2x.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609628808320/jVDGN6bYm.png)

### Summary
I set a focus for 2021 to help me **prioritize my time and structure my goals**. I also created milestones to keep me motivated and I'm excited to see how this approach works IRL. 

Have you set your goals yet? What will you be working on this year?

Let's make 2021 a good one! 🥂
Building a Multiplayer TicTacToe Game
Tags: dohackathon, redis, node, javascript
Published: 2021-01-09 17:30:22

Building real-time multiplayer games on the web require open channel communication using TCP or UDP. Websockets can be used to achieve real-time communication. A WebSocket is a TCP communication protocol that allows for two-way communication between a server and a client. When comparing WebSockets to HTTP, you'll learn that servers can communicate with clients without a request (trigger) from the client.

## How the game is structured
The game follows the simple logic of 
1. Generate game code
2. Share with a different player
3. Play in multiple rounds
You can see the live version here.

https://tic-tac-toe-trm58.ondigitalocean.app/

![Live version](https://dev-to-uploads.s3.amazonaws.com/i/4zpzf7se2kjbuyc371s9.png)
 
## Deploying To Digital Ocean
Digital Ocean simplifies the deployment of applications through the app platform. They implemented a mechanism such that the type of app is detected an analysed. The deployment requirements are obtained and fixed in the deployment process.

So when I was deploying this app, Digital Ocean affixed ENV_SILENT to the start command. I haven't seen any other cloud provider with such precision.
```
ENV_SILENT=true npm start
```

## What I learned about deployment
Digital Ocean will fail to deploy a Node.js app without a package-lock.json. Funny right? I wonder why the lock file is ignored in the .gitignore of some projects. 

Also, if `tls` host is excluded from ioredis' config, it will fail to connect to a Redis server secured by SSL.

```diff
  prod: {
    host: Env.get("REDIS_HOST"),
    port: Env.get("REDIS_PORT"),
    password: Env.get("REDIS_PASSWORD"),
    db: 0,
    keyPrefix: "",
+   tls: {
+     host: Env.get("REDIS_HOST"),
+   },
  },
```

In the next post of the series, we'll look into a step-step process of deploying the game on Digital Ocean.
A Svelte component to format numbers
Tags: svelte
Published: 2021-01-09 17:09:31

Photo by [Nick Hiller](https://unsplash.com/@nhillier?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/notebook?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)

Let's develop a [Svelte](https://svelte.dev) component that formats numbers in a human readable way.

Instead of 63476432, the component displays 64M. Here are a few more examples:
<table>
  <tr>
    <td>6</td>
    <td>=&gt;</td>
    <td><span>6</span></td>
  </tr>
  <tr>
    <td>63</td>
    <td>=&gt;</td>
    <td><span>63</span></td>
  </tr>
  <tr>
    <td>634</td>
    <td>=&gt;</td>
    <td><span>634</span></td>
  </tr>
  <tr>
    <td>6347</td>
    <td>=&gt;</td>
    <td><span>6.3K</span></td>
  </tr>
  <tr>
    <td>63476</td>
    <td>=&gt;</td>
    <td><span>63K</span></td>
  </tr>
  <tr>
    <td>634764</td>
    <td>=&gt;</td>
    <td><span>635K</span></td>
  </tr>
  <tr>
    <td>6347643</td>
    <td>=&gt;</td>
    <td><span>6.3M</span></td>
  </tr>
  <tr>
    <td>63476432</td>
    <td>=&gt;</td>
    <td><span>63M</span></td>
  </tr>
</table>

It supports different locales as well. Converting `63476432` looks as follows

<table>
  <tr>
    <td>ko-KR</td>
    <td>=&gt;</td>
    <td><span>6348만</span></td>
  </tr>
  <tr>
    <td>zh-TW</td>
    <td>=&gt;</td>
    <td><span>6348萬</span></td>
  </tr>
  <tr>
    <td>de-CH</td>
    <td>=&gt;</td>
    <td><span>63&nbsp;Mio.</span></td>
  </tr>
  <tr>
    <td>ar-SA</td>
    <td>=&gt;</td>
    <td><span>٦٣&nbsp;مليون</span></td>
  </tr>
</table>

## How it's done

We leverage the `Number.prototype.toLocaleString()` method ([docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString)). Thanks to that, the Svelte component becomes very basic:

```html
<script>
  export let number;
  export let locale = "en";
  
  $: formattedNumber = number.toLocaleString(locale, {
    notation: "compact",
    compactDisplay: "short",
  });
</script>

<style>
  span {
    font-variant-numeric: tabular-nums;
  }
</style>

<span>{formattedNumber}</span>
```

It is important to make sure `number` is of type `Number`. If you pass a string, the `toLocaleString` method will not work as intended.

### Typescript

I highly recommend you enable Typescript for your Svelte project ([instructions](https://svelte.dev/blog/svelte-and-typescript)) and refactor the `FormattedNumber` component as follows:

```html
<script lang="ts">
  export let number: number;
  export let locale: string = "en";

  $: formattedNumber = number.toLocaleString(locale, {
    notation: "compact",
    compactDisplay: "short",
  });
</script>

<style>
  span {
    font-variant-numeric: tabular-nums;
  }
</style>

<span>{formattedNumber}</span>
```

Voilà, now the Typescript compiler makes sure you pass a `Number`.
ex10 Volleyball Club Portfolio
Tags: dohackathon, javascript, webdev
Published: 2021-01-09 17:01:05

---
## What I built: 

ex10 Volleyball Club Portfolio Website 

### Category Submission: 
Personal Site/Portfolio

### App Link: 
https://ex10.club

### Screenshots:
####Desktop View

![Landing Page](https://dev-to-uploads.s3.amazonaws.com/i/memrtw70yxu0928r5rk4.PNG)

![Achievement](https://dev-to-uploads.s3.amazonaws.com/i/7v8nm4c4z0md37ul50fl.JPG)

####Mobile View

![MobileViewLanding](https://dev-to-uploads.s3.amazonaws.com/i/1gl2xq6o27rfpm5g6fr3.JPG)

![MobileViewMembers](https://dev-to-uploads.s3.amazonaws.com/i/39vvredtdd74g87yf4is.JPG)

![MobileViewAchievement](https://dev-to-uploads.s3.amazonaws.com/i/id2tlhxhv3pqo4yealwr.JPG)

![MobileViewAbout](https://dev-to-uploads.s3.amazonaws.com/i/00r78c5dgllp0yxu65o1.JPG)
   
### Description
ex10 Volleyball Club Portfolio Website is based on Next.js, [React- Chrono Timeline](https://github.com/prabhuignoto/react-chrono), NoCodeAPI and hosted in DigitalOcean's App Platform. 

The objective of this portfolio website is to showcase the ex10 Volleyball Club's active members, the latest tournament participated and the achievement details. 

This portfolio supported both Desktop and Mobile view. Please refer the screenshots above.

### Link to Source Code: 
https://github.com/zettatips/ex10-website

### Permissive License: 

The project is licensed under the **MIT** License.

## Background

ex10 Volleyball Club wanted to have a simple portfolio to showcase the club achievements and its active members.

### How I built it 

I wanted to learn Next.js framework. I did the tutorial on Next.js website, and I picked up some good samples from github repo to get started. Finally, I could understand the Next.js structure. 

Furthermore, the club's data already existed in the Excel format. Hence, I used NoCodeApi to convert the google sheet data as JSON format.  

In conjunction with Dev.to's Hackathon, I used DigitalOcean's App platform to deploy the website. In the beginning, I encountered some problems to deploy it using Static Website. After researching it further and raising a technical issue ticket, I chose Web Service to deploy the app.

I purchased the custom domain from [Porkbun](https://porkbun.com/). It offered the cheapest price for .club domain. Although, I encountered some hiccups on configuring it, I managed to link it on App's Platform custom domain. 

Last but not least, the Portfolio website was successfully deployed on DigitalOcean's App Platform.  

### Additional Resources/Info 
This site is in Malaysian/Indonesian language. Translation is required.