teleren/devto huggingface dataset:
Setting.json - VSCODE.
Published: 2020-10-10 13:46:05

Here is my setting.json of my VSCODE, I hope you like it, it is the best way and the best configuration for VSCODE.

{
  "terminal.integrated.fontSize": 14,

  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "newUntitledFile",

  "editor.tabSize": 1,
  "editor.fontSize": 13,
  "editor.lineHeight": 25,
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,

  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "node_modules": true
  },

  "explorer.compactFolders": false,
  "editor.renderLineHighlight": "gutter",
  "workbench.editor.labelFormat": "short",
  "extensions.ignoreRecommendations": true,

  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "never",

  "breadcrumbs.enabled": true,
  "editor.parameterHints.enabled": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,

  "editor.rulers": [80, 120],

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  "files.associations": {
    ".sequelizerc": "javascript",
    ".stylelintrc": "json",
    ".prettierrc": "json"
  },

  "window.zoomLevel": 0,

  "emmet.syntaxProfiles": { "javascript": "jsx" },
  "emmet.includeLanguages": { "javascript": "javascriptreact" },

  "gitlens.codeLens.recentChange.enabled": false,
  "gitlens.codeLens.authors.enabled": false,
  "gitlens.codeLens.enabled": false,

  "git.enableSmartCommit": true,
  "terminal.integrated.shell.osx": "/bin/zsh",
  "liveshare.featureSet": "insiders",

  "typescript.tsserver.log": "verbose",
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,
  "liveServer.settings.donotShowInfoMsg": true,
  // "material-icon-theme.activeIconPack": "nest",
  "screencastMode.onlyKeyboardShortcuts": true,

  "material-icon-theme.folders.associations": {
    "infra": "app",
    "entities": "class",
    "schemas": "class",
    "typeorm": "database",
    "repositories": "mappings",
    "http": "container",
    "migrations": "tools",
    "modules": "components",
    "implementations": "core",
    "dtos": "typescript",
    "fakes": "mock",
    "websockets": "pipe",
    "protos": "pipe",
    "grpc": "pipe"
  },

  "material-icon-theme.files.associations": {
    "ormconfig.json": "database",
    "tsconfig.json": "tune",
    "*.proto": "3d"
  },

  "workbench.colorTheme": "Omni",
  "editor.formatOnSave": true,
  "colorize.languages": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "json",
    "html",
    "css"
  ]
}
Write API tests for HTTP DELETE method
Tags: testing, javascript, api, tutorial
Published: 2020-10-10 15:27:51

The HTTP DELETE method is pretty straightforward, it deletes an existing resource and if the resource is already deleted it will most likely throw a 'not found' error.

Let's take a look at an example - 

```javascript
  it('DELETE /users/:id', () => {
    return request
      .delete('users/2')
      .set('Authorization', `Bearer ${TOKEN}`)
      .then((res) => {
        expect(res.body.data).to.be.eq(null);
      });
  });
```
This will likely return the body similar to this- 
```javascript
{ code: 204, meta: null, data: null }
```
And, upon hitting the same request again, you will see a `not-found` error - 
```javascript
{ code: 404, meta: null, data: { message: 'Resource not found' } }
```
#### Check out this video to see a detailed explanation on how to work with the HTTP DELETE method:

{% youtube HUT9-lAmWHI%}

You can also clone the [GitHub repo](https://github.com/automationbro/JavaScript-API-Automation-Tests) to access this code

***

#### To learn more about API testing, check out my free tutorial series here - 
https://www.youtube.com/watch?v=ZSVw3TyZur4&list=PL6AdzyjjD5HDR2kNRU2dA1C8ydXRAaaBV&ab_channel=AutomationBro
***

I hope this post helped you out, let me know in the comments below! 

Happy testing! 😄 

...

Subscribe to my [YouTube](https://www.youtube.com/channel/UCjugV5pnY6WjvTGYm7U1ucg?sub_confirmation=1) channel
Support my work - https://www.buymeacoffee.com/automationbro
Follow [@automationbro](https://twitter.com/automationbro) on Twitter
[Tutorial Linux] Terminal: Excluindo usuário
Tags: linux, terminal, userdel, womakerscode
Published: 2020-10-10 15:19:03

Para excluir um usuário do sistema, digite:

```
$ sudo userdel -r <nome_do_usuário>
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

- **sudo** serve para pedir permissões de administrador temporariamente.

- **userdel** para a remoção do usuário.

- **-r** para remover também o diretório home desse usuário e seus arquivos.

- digite o nome do usuário a ser removido sem os sinais **< >**.
11ty (Eleventy) Sass Skeleton Starter
Tags: showdev, webdev, css, 11ty
Published: 2020-10-10 15:15:05

After [CSS](https://moderncss.dev), 11ty (Eleventy) is my favorite thing to talk about and create resources for. I'd like to share my new starting point for kickstarting an 11ty static site with Sass.

This starter is an evolution from my other projects that use 11ty and Sass, including:
- A more full-featured 11ty starter, the [11ty Netlify Jumpstart](https://11ty-netlify-jumpstart.netlify.app/)
- My in-depth CSS tutorial site [ModernCSS.dev](https://moderncss.dev)
- The CSS community site [StyleStage.dev](https://stylestage.dev)
- And my portfolio/freelance site, [ThinkDoBeCreate](https://thinkdobecreate.com)

This new Sass Skeleton starter features absolutely nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside 11ty.

It also includes minifiying and autoprefixing of styles during `postbuild`.

You can immediately start using it by [generating a new repo](https://github.com/5t3ph/11ty-sass-skeleton/generate) from the template.

## Resources to extend this and learn 11ty

**Learn to build an 11ty site in 20 mins** with my [egghead video course](https://5t3ph.dev/learn-11ty) and see how to add a blog and custom data.

**Add auto-generated social media images** by following [my tutorial](https://dev.to/5t3ph/automated-social-sharing-images-with-puppeteer-11ty-and-netlify-22ln)

**Explore advanced setup of custom data** through my [tutorial on building a community site](https://css-tricks.com/a-community-driven-site-with-eleventy-building-the-site/)

**For a more full-featured starter** check out my [11ty Netlify Jumpstart](https://11ty-netlify-jumpstart.netlify.app/) (also works for hosts other than Netlify).

> Follow [@5t3ph](https://twitter.com/5t3ph) for more posts about CSS, 11ty, and other front-end topics
Deploy Outline in Civo Kubernetes Cluster
Tags: kubernetes, civo, outline, vpn
Published: 2020-10-10 14:38:07

---
title: Deploy Outline in Civo Kubernetes Cluster
published: true
description: 
tags: #kubernetes #civo #outline #vpn
//cover_image: https://direct_url_to_image.jpg
---


# Steps to Deploy Outline in Civo Kubernetes Cluster

Create kubernetes cluster in CIVO

Spin up a kubernetes cluster in your civo cloud, note down the cluster name you have provided while creating the cluster. Also get the API Key of your account from Security Section
Spin up Outline

After the cluster is functional(it may take upto 5 mintues), run the following snippet in terminal

```curl -L -s https://git.io/JUVkD | bash -s <api_key> <cluster_name>```

replace `<api_key>` and `<cluster_name>` with your account's api key and cluster name that you have provided.

make sure you have satisfied the following dependencies before running the snippet:

    kubectl
    git
    curl
    openssl

After the script is completed copy the installation output

```{"apiUrl":"https://xxx.xxx.xxx.xxx:8081/xxxxxxxxxxxxx","certSha256":"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"}```

and make sure to check all containers are up and running before pasting the output to outline manager application.

To check container status change directory to /tmp/civo-outline and run

```kubectl get pods --all-namespaces --kubeconfig config```

If all containers are running then copy paste the installation output to outline manager.

More at : https://github.com/rejahrehim/kubernates-outline-civo
vue-typed-emit
Tags: typescript, vue
Published: 2020-10-10 14:27:25

## Introduction

A half a year has already passed since I wrote the [Vue.js Typed events](https://dev.to/3vilarthas/vue-js-typed-emits-2h87) article. During all this time I was searching for a solution, which doesn't require from a developer to change the way how one is used to emit events in Vue.js components (`this.$emit('event', payload)`). Finally I've found one, and that's resulted in [`vue-typed-emit`](https://github.com/andrewvasilchuk/vue-typed-emit) library creation.

## Features

The main feature of the library is that it doesn't require from a developer any typed wrappers over a `this.$emit` invocation. It only requires a simple type which describes names of events your component is supposed to emit along with corresponding payloads.

Here is a trivial example:

```ts
import Vue from 'vue'
import { WithEvents } from 'vue-typed-emit'

interface Events {
  foo: string
  bar: [string, number]
  baz: undefined
}

export default (Vue as WithEvents<Events>).extend({
  name: 'Component',
  methods: {
    method() {
      this.$emit('foo', 'foo')
      this.$emit('bar', 0)
      this.$emit('baz')
    },
  },
})
```

`vue-typed-emit` verifies that component emits only declared events with valid payloads.

If a developer tries to emit invalid event or invalid payload, one gets an error from TypeScript.

![TypeScript error](https://dev-to-uploads.s3.amazonaws.com/i/3s2sjxi24xwrpplztc5s.png)

![TypeScript error](https://dev-to-uploads.s3.amazonaws.com/i/5f2m6e89ula0u1p4ppx8.png)

You can find `vue-type-refs` on [GitHub](https://github.com/andrewvasilchuk/vue-typed-emit) and [NPM](https://www.npmjs.com/package/vue-typed-emit). Feel free to contribute.
Pillars Of Productivity and Tools that Strengthens them
Tags: productivity
Published: 2020-10-10 14:22:19



Entrepreneurs are busy people, hustling from one task to another, jumping between tasks and meetings. These kinds of constant work switching drains their energy faster and leaves them unproductive for a long period of time, Time they dont have that much. **In a Quartz’s magazine article[1] Olivia Goldhill mentions a research done by University of California Irvine, when people are interrupted, it typically takes 23 minutes and 15 seconds to return to their work, and most people will do two intervening tasks before going back to their original project**.Thus the works that needed to be done should be planned in a proper way.

In today’s self help trend many productivity guru’s mention lots of ways to become productive but most of those hacks, tricks are based on few pillars that are the base of being productive in what we do. Without a good base no high rising building can stand like that without proper investment of effort and energy in proper places being productive becomes much harder.

Pillars Of Productivity:
All the productivity systems are rising high based on these 4 pillars. 

    1.Time Management
    2.Task Management
    3.Task Prioritization
    4.Focus / Concentration Management 


I will be discussing tools that will help you to use these pillars to have strong and productive works. 


[Trello for Task Management](https://trello.com/):
Trello is a kanban style application that gives you a complete overview of all the tasks that are needed to be done. Gives a broad view on where the tasks are currently and what’s the progress.

[Toggl for Time Management](https://toggl.com/):
Toggl is an app you can use to track time spent on tasks, as well as manually add entries. Keep your entries organized by team, client, project, or tag. Add notes to the description so you can recall what you were doing at a later date.

[Task Prioritization Matrix](https://www.eisenhower.me/eisenhower-matrix/):
Instead of pointing to any app I would introduce to you if you haven’t seen it already and that is Eisenhower Matrix. Here Eisenhower explains a framework to choose a task to work on which is both urgent and important first then urgent and not important then not urgent but important and then neither urgent nor important.


[Forest for Focus Management](https://play.google.com/store/apps/details?id=cc.forestapp&hl=en_US):
Here I am going to introduce an app named Forest. With sleek and simple UI and functionalities this app offers the most important feature and that is managing your focus using Pomodoro technique. Which is basically a system of working for a certain period of time and taking a short break. This helps to sustain mental energy to do long periods of focused works.

These 4 pillars along with the tools to practice and implement them, will help you become more productive in most forms of work that requires intense focus and task and time management skills. 

References:
1.https://qz.com/722661/neuroscientists-say-multitasking-literally-drains-the-energy-reserves-of-your-brain/
Renaming File Names That Contains Date
Tags: bash, linux, tips, trick
Published: 2020-10-10 14:05:30

Hi there. I have a lot of files contains date format in their name. I wanted to remove that dates from that files. I wrote the bash script belove. You can use this script. It works 🙂

My files was like that;

**2020-10-08-example.md**.

Btw, customize it for yourself.

```bash
#!/bin/bash

# description: Your files should be like that; 2020-10-08-example.md

for i in *.md
do
	mv $i $(echo $i | sed -E 's/([0-9]{4}-[0-9]{2}-[0-9]{2}-)//')
done
```

What would your approach to this be? How would you solve it?
Storing JavaScript as QR Code
Tags: javascript
Published: 2020-10-10 14:01:40

<center>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nstyqkddpjj2fu40m8s4.jpg)</center>

So this is interesting, I posted about totally serverless impractical websites a while ago, but it turns out you can encode them into qr codes. A whole websites data in bytes store on a physical medium.

Here's the post this idea comes from.
https://dev.to/adam_cyclones/client-side-only-how-far-can-we-go-ljb

Note that the size limit of this qr version, but I have heard of whole games being stored on larger format qr codes.

If anyone wants a qr tattoo, I suspect this might be a fun one. But I don't know if you can still play it when your old and wrinkled?
Dynamic readme: Tic-tac-toe
Tags: readme, webdev, github, php
Published: 2020-10-10 13:44:51

It was a very boring saturday...

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

### Premise
Usually, you are used to see a readme file as something static (actually, they are thought to be static). You can add a bit of dynamic information with badges, but nothing that you can interact with.

### Action
So, as I sad, the saturday morning was very boring, so I decided to challenge myself with something new, and the idea I had was to try to create interactive readme. My first thought was about a minesweeper game, but it was to much to make in a morning, so I decided for something easier: tic-tac-toe.

### Development
Obviously, it requires a bit of tricks in order to work.

#### Initial failure
My original idea was to use a single svg image with links around different shapes. Each link will call a server with X and Y, server will update the game state, and new image will be served the next time. This idea failed instantly: github wrapps hole image inside a link to open it, so you cannot use internal links.

#### Second idea
At this point I started thinking on how to workaround this behaviour. Actually it was very easy: instead of having only one image, I will display a table, where each cell is a game cell with link inside of it. And it worked!

### How it works
The whole project consists of 3 parts:
- Readme
- Server
- Database

#### Readme
This one is very simple: 3x3 table with a footer row for some additional functionalities (restart, whose turn). Each cell contains a link that wraps around the image:
```html
<td>
    <a href="url_to_php?x=1&y=1&action=move">
        <img src="url_to_php?x=1&y=1&action=view">
    </a>
</td>
```
Both image and link are pointing to the same file, but they have different action:
- if action is move, it will update the game state and reload the page.
- if action is view, it will fetch the image with value saved for X and Y position.

#### Server
This is where the business is done. It runs php (I don't know which version).

Once it receives request, it will update the database with new data or serve the image based on a value saved in DB for X and Y.

#### Database
Nothing special here. Database is MySQL. It has two tables:
- board: saves board;
- game: saves game information (next turn, was board generated, etc...);

### Last words
If you want to give it a shot, you can find it here: https://github.com/OleksandrDemian/readme-tic-tac-toe
JavaScript Optional Chaining
Tags: javascript, babel
Published: 2020-10-10 13:42:50

I love 💓 “syntactic sugar” and I have been waiting to use this for a long time. Finally, optional chaining is Stage 4 ([read more about JS stages](https://ghalex.com/2019/12/04/javascript-tc39-process-and-stages/)) and more importantly it is available in **TypeScript** from ([3.7](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining)).

# What is optional Chaining

Optional chaining is a process for querying and calling properties, methods on an optional that might currently be null or undefined.

Let me give you an example.

```javascript
// Let's say we have this object
const person = { name: undefined }

// This will give you an error
// TypeError: Cannot read property 'fname' of undefined
const fname = person.name.fname
```

To be safe that person exists and person.name exists we would use logical expressions like this:

```javascript
const person = { name: undefined }
const fname = person && person.name && person.name.fname
```

But as you can see you need to write a lot of code and if the property you need to access is even deeper in the object your logical expression will be even longer.

The optional chaining operator aims to solve this problem. All you need to write is 👇👇👇

```javascript
const fname = person?.name?.fname
console.log(fname) // undefined
```

This will check `person` and `person.name` and if one of them is undefined will return undefined.

If you want to learn more about it the [proposal page](https://github.com/tc39/proposal-optional-chaining) is a great place to start.

# How to use the Operator

The operator does not work with Node.js out of the box just yet but you can use it with Babel ([setup Babel](https://ghalex.com/2019/12/10/getting-started-with-babel/)), add this plugin @babel/plugin-proposal-optional-chaining to .babelrc plugins and you are good to go.

# Thank you so much for reading!

If there is anything I can do to help, please reach out. Check out my [blog](https://ghalex.com/) for more articles.

Have a nice day!
NATS for .net developers - Part I
Tags: dotnet, beginners
Published: 2020-10-10 13:08:28

Nats is a high-performance message system developed by Derek Collison. It's built right from the ground up as a cloud-native service. And it's been graduated to a Mature project with the CNCF community, Alongside with kubernetes, Prometheus, Grpc. 

https://www.cncf.io/blog/2018/03/15/cncf-to-host-nats/ 

If you are on the path to move towards microservice and looking for a high reliability and performance messaging System, this should be your choice. 

Nats, at its core, is a Publish/Subscribe system. A PubSub-Model essentially means the System can communicate with each other without knowing a great deal about other endpoints. Clients become subscribers by registering their interest in the subject, and whenever the publisher sends the message system will deliver to all the available clients.

Here the transmitting of the message from producer to consumer is done Via Nat's server component. 

#### Delivery Guarantees or QoS
Nats by default provide At-Most once delivery guarantee and with the help Nats streaming At least once

* At-Most once - Message will be delivered to the client if the client is alive; 

* At-least once  - Message will be delivered to the client at least come. In this config, the Nats streaming server maintains a commit log of messages.

> Nats don't support exactly-once delivery like Kafka. These are 
 some of the choices to make NATS a reliable and straightforward 
 messaging platform.

#### Performance
Nats designed for ultralight and performance-minded modern messaging middleware. In my laptop with other programs like Visual studio and chrome with 9 tabs(Yikes), I was able to bench 18 million messages per second.

#### Installation
Installing Nats is a Breeze, and it supports multiple platforms with different variants. In this case, I want to use docker. 

```
docker run -d --name nats-main -p 4222:4222 -p 6222:6222 -p 8222:8222 nats
```
Will look at the usage from .net library in the next part.
Monetizing Code Test Coverage - PayID BlockSprint Hackathon Submission
Tags: payid, xrp, github, hackathon
Published: 2020-10-10 13:03:50

One of the hardest things in Open Source software is encouraging testing and documentation. 

So I've developed a Github action that can be used to analyse the coverage of tests on a codebase and then make a payment to the pull-requester when their pull request is merged into the main branch.

When you open a pull request it looks at the persons bio on Github and scans it for any PayIDs:

![Put your PayID in your Github bio](https://dev-to-uploads.s3.amazonaws.com/i/v01nu5q4kv8cxyvu1t8n.png)

It then creates a comment in the PR showing how much will be paid out to that person. The admin can amend or edit that comment and when the PR is closed the payment is automatically paid to that PayID via XRP / Xpring.

![A comment is added letting you know what will be paid](https://dev-to-uploads.s3.amazonaws.com/i/whjnfvqncyvwrpfu9gnt.png)

When the branch is merged then the action will scan the PR comments to find the comment about payment and make the actual payments:

![Payment complete](https://dev-to-uploads.s3.amazonaws.com/i/wqz6a6a2ultkapvxdl0i.png)

And within seconds the payment will appear in their XRP wallet:

![Payment in wallet](https://dev-to-uploads.s3.amazonaws.com/i/q4tsvspr92xse7dlx78d.png)

By using PayIDs this approach can be extended to work with any cryptocurrency or payment mechanism. 

You can get the code, and have a look at an example workflow for using it in the Github repo:

{% github hammertoe/payid_xrp_pr_coverage_action %}
POO - Revisando o princípio da inversão de dependência (DIP)
Tags: oop, braziliandevs, solid
Published: 2020-10-10 13:01:07



Eu sempre entendi o princípio da inversão de dependência (DIP) como dependender de abstrações (interfaces e classes abstratas), essa visão veio do contato que tive com esse princípio no meio do aprendizado da injeção de dependência, que é incentivada com abstrações para seguir o principio DIP. Só que essa visão era limitada e focada em um só lado do conceito.

Além depender de abstrações (usando a injeção de dependência), existe um outro lado na inversão de dependência que é mais conceitual e consiste em módulos de alto nível (mais próximos no usuário) que dependem de módulos de baixo nível (mais próximos do computador/máquina). Módulos, nesse contexto, se referem ao código (classes, interfaces e etc).

O lado que eu abordava não estava errado, porém o meu foco restrito fez eu não ver o outro lado desse princípio, ou seja, a visão que eu tinha era incompleta. Antes eu não tinha me atentado e percebido essa relação entre código de alto nível e o código de baixo nível, **essa é mais uma das revisões em orientação a objetos que me mostram que quando mais estudo, mais vejo que não sei nada.**

Usar camadas como Domain e Infrastructure me fizeram perceber mais ainda como é a aplicação completa do princípio DIP, pois a primeira camada é alto nível e não depende da segunda, já a segunda é baixo nível e depende da primeira. Ou seja, módulos de alto nível não dependem de módulos de baixo nível, mas sim o contrário. É justamente isso que a definição clássica do princípio DIP diz.