teleren/devto huggingface dataset:
How to integrate Git Bash with Visual Studio Code on Windows
Tags: vscode, windows
Published: 2019-08-09 07:05:06

Many clients will require me to work on a Windows laptop for access to their networks. Fortunately, I can change the settings within VS Code to use Git Bash as the built-in terminal. I can then get the same developer experience on a Windows laptop that I get at home on my mac. 

First type "Ctrl+Shift+P" to open the command search and type/select "Open User Settings". If this display a settings search page you will need to hit the ”{}” at the top right to get to the raw JSON. Merge the following settings ensuring to use paths that match where you installed the "bash.exe" and "git.exe" binaries: 

```json
{
"terminal.integrated.shell.windows": "C:\\whereever\\Git-2.17.1\\bin\\bash.exe",
"terminal.integrated.env.windows": {
"CHERE_INVOKING": "1"
},
"terminal.integrated.shellArgs.windows": [
"-l"
],
// optional add git-path to use this version of git for built in visual studio model
"git.path": "C:\\whereever\\Git-2.17.1\\bin\\git.exe"
}
```

Note that you don't have to use the last setting which is telling VS Code to use the git that came with Git Bash for its built-in git features. 

The great thing about this approach is that you don't have to switch to a separate Bash Windows. The embedded terminal runs inside of VS Code and starts in the correct folder on disk. VS Code will filter the terminal output looking for file paths like `./server.js` and it will turn them into hyperlinks. Ctrl+Click on them and it will open the file within the main editor panel! That is great when your build or unit tests you are running in the terminal throw an error logging the file to open. 

Git Bash comes with all your favourite coreutils goodies like find, awk, sed, ssh, and more. You can also capture output to the windows clipboard with `cat whatever | clip`. You can read the windows clipboard with `cat /dev/clipboard | awk -f mega_skills.awk`. You can bash the heck out of any problem and be winning all day long.

Enjoy!
Class Abstraction in angular reactive forms
Tags: rxweb, angular
Published: 2019-08-09 06:27:04

While using model driven approach in angular reactive forms, we might be in need to use the properties of base class into derived class.

Here is a way to access properties of base class into derived class and also hide the complexity of inherited classes.

Step 1:
Install [***@rxweb/reactive-form-validators***](https://www.npmjs.com/package/@rxweb/reactive-form-validators) 
> npm i @rxweb/reactive-form-validators

Step 2:
Suppose  you are having two classes `Product` and `Order`, You want to use properties of Product into Order

```js
import {  prop } from "@rxweb/reactive-form-validators"

export class Product{
   
  @prop()
  productId:number;

  @prop()
  productName:string;
}

export class Order extends Product  {
   @prop()
   orderId:number;

   @prop()
   orderType:string;
}
```
Step 3:
Create Component using `formGroup` method of `RxFormBuilder` to use the model Object

```js
import { Component, OnInit } from '@angular/core';
import { FormGroup } from "@angular/forms"

import { RxFormBuilder } from '@rxweb/reactive-form-validators';

import { Order } from './order.model';

@Component({
    selector: 'app-class-complete',
    templateUrl: './class-complete.component.html'
})
export class ClassCompleteComponent implements OnInit {

    userFormGroup: FormGroup

    constructor(
        private formBuilder: RxFormBuilder
    ) { }

    ngOnInit() {
        let order = new Order();
        this.userFormGroup = this.formBuilder.formGroup(order);
    }
}

```
Step 4:
Create form in component HTML
```js
<form *ngIf="userFormGroup" [formGroup]="userFormGroup">
    <div class="form-group">
        <label>Product Id</label>
        <input type="text" formControlName="productId" class="form-control" />
    </div>
    <div class="form-group">
        <label>Product Name</label>
        <input type="text" formControlName="productName" class="form-control" />
    </div>
        <div class="form-group">
        <label>OrderId</label>
        <input type="text" formControlName="orderId" class="form-control" />
    </div>
     <div class="form-group">
        <label>Order Type</label>
        <input type="text" formControlName="orderType" class="form-control" />
    </div>
    <button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
</form>
```

Here is the [working example](https://stackblitz.com/angular/kdmmlrbbynx?file=src%2Fapp%2Fclass-complete.component.ts)

In Case of query/suggestion, Please comment below
Adding arguments to CLI commands
Tags: python
Published: 2019-08-09 05:57:44

Arguments work very similarly to [options](https://wangonya.com/blog/click-commands-options/). If you're familiar with functional programming, then you're familiar with arguments. The concept is the same in Click.

Let's edit our code a bit to see how we can integrate arguments.

```python
# helloworld.py

import click

@click.command()
@click.option('-c', '--case', type=click.Choice(['upper', 'lower']))
@click.argument('person', default='you')
def hello(case, person):
    response = "Hello World! Also, hey {} ☺️".format(person)
    if case == 'upper':
        click.echo(response.upper())
    elif case == 'lower':
        click.echo(response.lower())
    else:
        click.echo(response)
```

Just like with commands and options, Click provides a decorator to add arguments.

```python
@click.argument('person', default='you')
```

We specify that `hello()` should expect an argument `person` to be passed in when it's called, and add a default value so that it's ok to call the command without passing in the argument.

Saving and running the app gives the following results:

```bash
(venv) $ hello  # no argument - default will be used
Hello World! Also, hey you ☺️

(venv) $ hello Meg  # Meg is the argument
Hello World! Also, hey Meg ☺️

(venv) $ hello chris -c upper   # combining arguments with options
HELLO WORLD! ALSO, HEY CHRIS ☺️
```

With options and arguments, you can add a lot of functionality to a single command.
EP21: Industrial IT - Asset Performance Optimization
Published: 2019-08-12 11:05:59

---
title: EP21: Industrial IT - Asset Performance Optimization
published: true
tags: 
canonical_url: https://anchor.fm/code-cast-zm/episodes/EP21-Industrial-IT---Asset-Performance-Optimization-e4sskg
---

On this special episode, Mukuma talks to Paul Flanagan, An OSIsoft Architect/Consultant passionate about Integrating real-time operational data with business intelligence data to provide "Single Source of Truth" insights. We chat about the processes of data extraction to activities such as;  Condition Based Monitoring Regulatory Compliance  Insurance Requirements Troubleshooting and Incident Analysis Reporting Emissions Monitoring and ControlWe discuss business impact scenarios around simple process monitoring in production environments as well as maintenance and efficiency. Identifying problem repeats and logic is key to increasing continuity scenarios in any batch comparison tasks creating an environment for high level business decisions for the good the organization.
Hosts/Guests
Paul Flanagan - Linkedin
Mukuma Musenge- Twitter
Leave us a review on iTunes to let us know what you think about the show.
Join our growing community on Slack for in-depth conversations regarding community and other topics on the podcast.
--- Send in a voice message: https://anchor.fm/code-cast-zm/message
Ctags for Typescript
Tags: productivity, typescript, javascript, googleappsscript
Published: 2019-08-09 03:55:07

Just in case you were wondering, there is support for typescript in ctags and it can be found on [William Casarin](https://github.com/jb55)'s [repo](https://github.com/jb55/typescript-ctags) where he provides all the settings needed for a local `.ctags` file.

Prolific this [jb55](https://github.com/jb55): 448 repos!
The Art of the Technical Interview
Tags: interviewing, communication, collaboration, softwaredevelopment
Published: 2019-08-09 03:32:29

---
title: The Art of the Technical Interview
published: true
description: thoughts and ideas on running an effective interview
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ex8wmlle3sy5lm1ip544.jpg
tags: interviewing, communication, collaboration, software development
---

I helped interview a candidate today, and I had a few thoughts on running an effective interview that I captured in my latest article on Medium:
https://medium.com/@openshift.ninja/the-art-of-the-technical-interview-389f79fa7a8c
What is rel="noopener"?
Tags: html
Published: 2019-08-09 02:14:12

---
title: What is rel="noopener"?
published: true
description: Make links to cross-origin destinations safe
tags: "html"
---

> Original [Post](https://tutorial.tips/what-is-rel-noopener/)

In HTML, link types indicate the relationship between two documents, in which one links to the other using an `<a>`, `<area>`, `<form>`, or `<link>` element.

When you open another page using `target="_blank"`, the other page may run on the same process as your page, unless Site Isolation is enabled. The other page can access your `window` object with the `window.opener` property. This allows other page to redirect your page to a malicious URL - see [About rel=noopener](https://mathiasbynens.github.io/rel-noopener/) for more details. However, as mentioned by [@Jake](https://twitter.com/jaffathecake) in his [article](https://jakearchibald.com/2016/performance-benefits-of-rel-noopener/), the origin security model of the web prevents other page from reading your page.

## Solution
Include `rel="noopener"` for all external links, generally when using `target="_blank"`. The new window will run in separate process and it won't be able to access `window.opener` property of parent page. You may also use `rel="noreferrer"` which also prevents `Referer` header being sent to new page.

## Try it yourself
- <a target="_blank" href="https://www.google.com">Google</a> - Neither `noopener` nor `noreferrer` 
```html
<a target="_blank" href="https://www.google.com">Google</a>
```
- <a target="_blank" rel="noopener" href="https://www.google.com">Google</a> - `rel="noopener"`
```html
<a target="_blank" rel="noopener" href="https://www.google.com">Google</a>
```
- <a target="_blank" rel="noreferrer" href="https://www.google.com">Google</a> - `rel="noreferrer"`
```html
<a target="_blank" rel="noreferrer" href="https://www.google.com">Google</a>
```

**Steps for verification**

1. Click on link and go to new page/tab
2. Open developer console and check value of `window.opener`
3. While you are in developer console, go to network tab and reload the page to check `referer` under `Request Headers`(Chrome browser). For first & second, it should be `https://gulshansaini.dev/what-is-rel-noopener/` whereas in third case, `referer` property should not be present.

## Is SEO impacted if we use noopener or noreferrer?
Search engines do not consider noopener or noreferrer to rank pages. It is used to improve security of website.

## Benefits of noopener
- Improved security
- Improved performance - if new tab/page is running expensive JavaScript, it won't affect the referring page as it will not run on a separate process.

Link to original post: https://gulshansaini.dev/what-is-rel-noopener/

<iframe width="400" height="200" style="border:none"   src="https://tutorial.tips/promo.html"></iframe>
Auto-reload for Nodejs with TypeScript
Tags: node, typescript
Published: 2019-08-09 01:37:03

I started using TypeScript last August since I joined the team and the team used TypeScript.

My co-worker recommended me to watch one youtube video. I forgot the title... I will put the link if I remember it.

The video was a kind of old one, but it was still useful to understand the overview of `TypeScript`. At the time I was like "Oh okay, seems legit and pretty nice."

Then started using it for the project and immediately I was like what the hell ?????, are you serious ???? I don't like you, TypeScript. 


However, I'm using it because of my job 😂, but I have used it for my personal project. I still need to research when TS says something to me via `Terminal`, but now I kind of like it.


In this post, I will show you how to use hot-reload for nodejs project with TypeScript.


### Step 1 Create a nodejs project with Typescript.
Microsoft has a starter kit
https://github.com/microsoft/TypeScript-Node-Starter

If you think that is too much, you can use my template.
https://github.com/koji/typescript/tree/master/node_typescript

### Step 2 Install nodemon

```zsh
$ npm install -g nodemon
$ yarn add global nodemon
```

### Step 3 Install ts-node

```zsh
$ npm i install -g ts-node # if you prefer npx, you don't need to install it globally
$ yarn add global ts-node
```

### Step 4 Create nodemon.json
We need to create nodemon.json file since nodemon is only working with `.js`.

```
{
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node ./src/index.ts"
}
```

### Step 5 Run `nodemon`  
```zsh
$ nodemon
``` 


### Happy coding with TypeScript!!!


<a href="https://www.buymeacoffee.com/koji"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kA3wM6t6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" height="41" width="174" loading="lazy"></a>
Game of monkeys and ladders, how to learn wrong behavior while being rational.
Tags: linux, productivity
Published: 2019-08-09 01:05:27

So it starts, people disable swap space on their Linux servers and desktops then much later complain about their computers choking when they use up all their preciously guarded memory. "Why would anyone design an OS like this!" they lament, well its simple. Your home computer is a variable load machine and not some static production server with a known workload, and even then disabling swap space if you do not have perfect knowledge of the system is hardly a sin.

There is an anecdote I heard a while back that perfectly describes how these situations happen: Scientists set up an observation room with sprinklers in it and a banana on a ladder. They let three monkeys in the room. Whenever a monkey goes to climb the ladder the scientists turn the sprinklers on till the monkeys learn to keep each other from climbing the ladder. Now the scientists switch out one of the monkeys for a fresh one without any memory of the evil cold sprinklers. This new monkey only sees a delicious piece of fruit right for the picking, however whenever he climbs the ladder the other monkeys will become aggressive and beat him till he learns to do to not do so. The scientists observing this replace another one of the original two remaining with a fresh monkey. The cycle repeats with both the oldest and older monkey joining in the beating and the new monkey learns not the climb the ladder. This is when the scientists replace the final monkey and remove the sprinklers. When the final monkey comes in and tries to climb the ladder the other two will stop him from climbing by beating the shit out of him. None of these monkeys know why but they all understand perfectly that you should not climb the ladder.

Lets think about this, Some credible guy said something and we follow it. This is rational, though its quite likely he gathers his opinions from others (turns out you can only really talk to other people and yourself). Now we should first and foremost go trough the tedious process of asking why he is doing something before we try to do it ourselves. Remember our ability to communicate is about the only thing that sets us apart from the monkeys.
Do You Suffer With Imposter Syndrome?
Tags: discuss
Published: 2019-08-09 00:26:40

---
title: Do You Suffer With Imposter Syndrome?
published: true
description: The age-old imposter syndrome - let's talk about both sides of the coin
tags: #discuss
---

# If you don't have it:
What is something you tell sufferers that they might not already know that allows you to avoid it?

# If you do have it:
What are your personal reason(s)? And then let the DEV community attempt to bury your doubts and give you supreme confidence™.

This one should be interesting...
Superscript And Subscript With Markdown
Tags: remark, html, markdown
Published: 2019-08-12 16:17:57

---
title: Superscript And Subscript With Markdown
published: true
tags: remark, html, markdown
canonical_url: https://stephencharlesweiss.com//2019-08-09/markdown-superscript-subscript/
---

Markdown doesn’t support for superscript or subscript directly. However, there are multiple strategies to adding superscript and subscript to your markdown.

The simplest, and the way I’d been doing it for months, is to use character itself. For example, using the Emoji keyboard on a Mac (or a symbol keyboard in Windows), you can insert the character you want manually.<sup>1</sup> It’s a valid character and so Markdown will honor it.

When writing for the web, however, it’s also possible to use a markdown compiler. Examples of compilers include Remark and Liquid. The will compile the markdown _into_ HTML, which means that valid HTML within the body of the file will be respected.

This is powerful because it allows the blending of Markdown _and_ HTML - which in my case means that I can use a `<sup>` tag to <sup>easily</sup> add words in superscript without needing to select the characters one at a time from a symbols keyboard.

This may not _look_ as pretty as a the actual superscript / subscript when looking at the markdown, but it _is_ mighty handy.

H/t to Sung Kim (again) for asking the question and pushing me to find a better solution.<sup>2</sup>

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Footnotes

- <sup>1</sup> [remarkjs/remark: Markdown processor powered by plugins part of the @unifiedjs collective | Github](https://github.com/remarkjs/remark)
- <sup>2</sup> [https://sung.codes](https://sung.codes)
Windows Vs Linux Vs Mac for Dev
Tags: discuss, productivity
Published: 2019-08-08 23:11:48

Life began with the first computer on Windows 98. Things were rigid but impressive. Time took its toll and heard about linux, what do we do with terminals and command prompt, how do we do it, it must be soo hard, and then came someone shouting,

```
Look at that, thats an expensive MAC
```

Now once, i took the first steps of development or the path of becoming a developer, windows was at play. Things came up, things came down and I started coping with it. The age of viruses came, USBs sprung up, windows corrupted, all that Mambo Jambo was heavy but i survived.

As of Now!

### Windows
I have been using windows as a Gaming System, Playing Fortnite, Neir Automate, Final Fantasy XV. I connected to Playstation 3 Controllers via USB and Tekken 7, Mortal Kombat 11 is Fun. Now when it comes to writing code... Arrrh! its just too pointy, too rigid, getting the Environment Paths is kinda Pain. 

### MacOS
Now when I develop, I use my Macbook, why because, i feel setting up the environment and libraries for MacOS, is smooth. Kinda like tick tick tock and its done. The interface, I enjoy the animations and the way the desktop with the dockbar. Its simply productive.

### Linux
Now once again, reminds me a little about Mac and its workspace, setting up the environment, all good. Now i`d say its an affordable Mac for starters.

## So these are my findings, what do you think about yours?
[Video] Building a culture of learning and growth
Tags: video, career, growth, cascadiajs2018
Published: 2019-08-08 23:05:53

---
title: [Video] Building a culture of learning and growth
published: true
description: From junior dev to C-level executive, continued education and growth are keys to success in today rapidly advancing tech industry. Everyone benefits from a culture built around these ideas that help you and your team not only keep up with the changes, but also share knowledge already gained.
tags: video, career, growth, cascadiajs2018
---
*As we lead up to [CascadiaJS 2019](https://2019.cascadiajs.com), I'm going to share the 24 amazing talks from 2018 here on dev.to. Sit back and enjoy the show!*

# Tre Ammatuna
![Tre Ammatuna](https://2018.cascadiajs.com/speakers/tre.jpg)

From junior dev to C-level executive, continued education and growth are keys to success in today rapidly advancing tech industry. Everyone benefits from a culture built around these ideas that help you and your team not only keep up with the changes, but also share knowledge already gained.

[Watch the talk on YouTube (22:16)](https://www.youtube.com/watch?v=x2jq0lvUu68)
Make a Discord Moderation Bot - Word Filter and Bans
Tags: javascript, webdev, tutorial, beginners
Published: 2019-08-08 22:31:00


In this video tutorial you will learn how to make a Discord moderation bot using the DiscordJS library to allow us to make a customize-able word filter and also allow us to kick and ban users by giving roles to users on the server for moderation capabilities 

If you haven't watched the previous videos in the series, you can see the entire playlist here:
https://www.youtube.com/playlist?list=PL_esswHjNwIc9irEctsTuMXlP7_4M7Qwk

{% youtube 7q_1HHOOHfs %}
Testing Serverless AWS AppSync GraphQL APIs with AWS Amplify - Quick Start
Tags: graphql, javascript, serverless, awsamplify
Published: 2019-08-08 22:26:01

---
title: Testing Serverless AWS AppSync GraphQL APIs with AWS Amplify - Quick Start
published: true
description: Learn how to mock and test entire serverless GraphQL APIs in 2 minutes.
tags: graphql, javascript, serverless, aws amplify
---

This week we released a new test suite built into the Amplify CLI that allows you to test GraphQL APIs, NoSQL databases, storage, and lambda functions. 

Using the new `mock` command, you can mock an entire application or just a single API.

In the above video, I show a quick intro to testing serverless GraphQL APIs using the new testing feature.

---

In the next video (below), I go into more depth showing how to test authorization and searching based on a secondary index.

#### Testing Serverless AWS AppSync GraphQL APIs with AWS Amplify - Authorization and Custom Queries

{% youtube wU27ZrdUpIQ %}