teleren/devto huggingface dataset:
Make git faster in WSL2
Tags: wsl2, git, performance, productivity
Published: 2020-10-08 15:18:30

For quite some time I wondered why my prompt was so slow in my Linux environments under WSL2. After some digging I finally figured it out: not only has my prompt tool an issue, but also in general the filesystem performance of WSL2 is not great.

On my blog I tell you the full story and provide you a solution on [how to speed up git for you within WSL2][mtt].

I came not up with the fix, so I'm very grateful for the work of others. Writing it down and provide some explanations is my way of contributing back to the community.

[mtt]: https://markentier.tech/posts/2020/10/faster-git-under-wsl2/
How to Center in CSS with flex?
Tags: css, center, flex
Published: 2020-10-08 15:27:32

---
title: How to Center in CSS with flex?
published: true
date: 2020-10-08 15:14:54 UTC
tags: css, center, flex
canonical_url: https://blog.murtajaziad.xyz/how-to-center-in-css-with-flex/
---

To wrap an item using `div`, just set `display: flex;` and `justify-content: center;`.

```html
<div class="parent">
  …
</div>
```

```css
.parent {
  display: flex;
  justify-content: center;
}
```

If you’re using TailwindCSS, just add `flex` and `justify-center` classes:

```html
<div class="flex justify-center">
  …
</div>
```

or using Bootstrap, just add `d-flex` and `justify-content-center` classes:

```html
<div class="d-flex justify-content-center">
  …
</div>
```
Re-indenting with Notepad++ regex replace
Tags: tips, regex
Published: 2020-10-08 20:41:14

---
title: Re-indenting with Notepad++ regex replace
description:  "A silly way to tighten up code indentation"
published: true
date: 2020-10-08 15:00:00 UTC
tags: tips, regex
canonical_url: https://katiekodes.com/regex-replace-indent/
---

The other day I came up with a ridiculously inefficient regex replace for Notepad++ to re-indent some code from 3 spaces per indent _(my team's standard for a certain codebase -- no idea how they settled on 3)_ to 1 _(for tight display on this blog)_.

* **Search** -> **Replace** _(ctrl+H)_
* **Search Mode:**  Regular expression
* Start with **Find what** of:

```
^   ([^ ])
```

* Start with **Replace with** of:

```
 \1
```

*  Repeat, adding 3 spaces at a time after the `^` to **Find what** and 1 space at a time to the beginning of **Replace with**, until the following replace _(and the one before it)_, at 6 & 7 levels deep of indenting, both had 0 results

* Stopped at **Find what** of:

```
^                     ([^ ])
```

* Stopped at **Replace with** of:

```
       \1
```

I'm sure I could have done better, but it got the job done.

What do **you** do to quickly change the indentation of code?
Find sum of all the elements of an array using reduce()
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-10-08 14:59:55

```js
const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce((previousSum, element) => {
  const newSum = previousSum + element;
  return newSum;
}, 0); // Initially the sum is set to 0

console.log(sum); // 15
```
Which is best for beginners, Angular 1, Angular 2 or Angular 4?
Tags: angular, computerscience, career
Published: 2020-10-08 14:54:29

So first of all Angular 1 is called AngularJS and Angular 2 and onwards ware called Angular (so i will be addressing the same). OK now that’s out of the way so as long as your question is concerned for beginners, if you don’t know JS like at all I would recommend to do that first but even you know JS basics and fundamentals of functions, arrays (not advanced but fundamentals) then its ok for you to start angular.

Since AngularJs came out I wanted to learn it, and I did like very minimal but then Angular 2 came out (initially as it was called back then). I jumped on to it right then and i had no angularJS knowledge nor I knew javascript that well back then. So when angular 4 came out I went all in and started working on a project (you actually learn a lot while doing a project no matter if you don’t understand everything you can do it while implementing).

Typescript is nothing more that typed JS. So that won’t be a problem. I have been there and I have done it so talking from the experience.

You can learn it as a beginner no issues, Just have some basic JS knowledge like i mentioned earlier. My first framework was Angular and it has a steeper learning curve and that’s because its actually a framework in its true sense.

I’m learning React now and I am enjoying it as well. React is a library so obviously its learning curve isn’t that steep. But Angular isn’t difficult at all trust me its just pretty diverse.

Now is the good time to learn it btw since Major breaking change came with Angular 9 (The Angular IVY). I think it will get more traction now.

Meet the Experts : https://nareshit.com/angular10-online-training/
Angular Component and Selector
Tags: typescript, angular, html
Published: 2020-10-08 14:44:35

#Component

Angular is all about components. Components are a subset of directives, always associated with a template. I call them the view defined in a template. A component consists of the following: 

*Template* − This is used to render the view layout for the application. This contains the HTML that needs to be rendered in the application. This part also includes the binding and directives use to power up the view.

*Class* − This is created with TypeScript and it contains the properties and data element for use in the view. This is like a class defined in any language such as C that contains properties and methods. 

*Metadata* − This has the extra data defined for the Angular class. It is defined with a decorator.

When we create a new component using Angular CLI, the newly created component looks like this.

```
import { Component } from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'example-app';
}
```
#Selector

Before looking at the selector, we need to first know what a Decorator is. A decorator is used to identify the class as a component in Angular, it provides informational metadata that defines the kind of properties that can be used by the existing component.

The @Component function here is the decorator that we pass objects to.
```
@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

```

A Selector specifies the component directive name, it is one of the properties of the object that we use along with the component configuration. In the app.component.ts, notice that we have one property called selector along with the unique name used to identify the app component in the HTML DOM tree once it is rendered into the browser.

#How to Use a Selector

```
@Component({
  selector: 'app-component',
  templateUrl:`
  <div><h1>{{pageTitle}}</h1>
      <div>My First Component</div>
  </div>
  `
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  pageTitle: string = 'Example App';
}

```
Recall that the *selector* is the name of the component when we use it as a directive in the HTML, And the *template* defined the HTML that we want to display. 

# Index.html
```
<body>
 <app-component></app-component>
<body>

```
Here in the index.html file, we simply add the selector where we want our template to be displayed. In the template, we call this a directive. A directive is basically a custom element. As soon as the app is loaded by *running ng serve --open* on your integrated terminal, the code will compile. When the compilation is complete, the HTML defined in the *template* will be inserted between the selected element tag and then appear on the page.
Hacktoberfest at ES4X 
Tags: hacktoberfest, opensource, community
Published: 2020-10-08 14:06:28

---
title: Hacktoberfest at ES4X 
published: true
description: Status update on ES4X
tags: hacktoberfest, opensource, community
//cover_image: https://direct_url_to_image.jpg
---

Hacktoberfest has started, it has been quite interesting that [ES4X](https://reactiverse.io/es4x) has received some attention by the community. This year I've asked for help to translate the current website.

Currently ES4X has merged PRs for [Russian](https://reactiverse.io/es4x/ru/), [Greek](https://reactiverse.io/es4x/gr/) and [Polish](https://reactiverse.io/es4x/pl/).

Truly a great community help to lower the entry barrier for new users :thumbsup:.

On the other news, we have been working on making the experience smoother. Since the last post, ES4X now supports ESM web modules, has a smaller installer tool and offers true sandbox to applications without sacrificing the performance.

Soon as Vert.x 4.0.0 is out, it will offer the possibility to call `async`/`await` on any Java API so it will make polyglot programing a breeze!
Self Service Real Time Data Integration Without The Headaches With Meroxa - Episode 153
Published: 2020-10-08 14:05:17

<p>Analytical workloads require a well engineered and well maintained data integration process to ensure that your information is reliable and up to date. Building a real-time pipeline for your data lakes and data warehouses is a non-trivial effort, requiring a substantial investment of time and energy. Meroxa is a new platform that aims to automate the heavy lifting of change data capture, monitoring, and data loading. In this episode founders DeVaris Brown and Ali Hamidi explain how their tenure at Heroku informed their approach to making data integration self service, how the platform is architected, and how they have designed their system to adapt to the continued evolution of the data ecosystem.</p><p><a href='https://www.dataengineeringpodcast.com/meroxa-data-integration-episode-153/'>Listen Now!</a></p>
Threading The Needle Of Interesting And Informative While You Learn To Code - Episode 283
Published: 2020-10-08 14:04:26

<p>Learning to code is a neverending journey, which is why it's important to find a way to stay motivated. A common refrain is to just find a project that you're interested in building and use that goal to keep you on track. The problem with that advice is that as a new programmer, you don't have the knowledge required to know which projects are reasonable, which are difficult, and which are effectively impossible. Steven Lott has been sharing his programming expertise as a consultant, author, and trainer for years. In this episode he shares his insights on how to help readers, students, and colleagues interested enough to learn the fundamentals without losing sight of the long term gains. He also uses his own difficulties in learning to maintain, repair, and captain his sailboat as relatable examples of the learning process and how the lessons he has learned can be translated to the process of learning a new technology or skill. This was a great conversation about the various aspects of how to learn, how to stay motivated, and how to help newcomers bridge the gap between what they want to create and what is within their grasp.</p><p><a href='https://www.pythonpodcast.com/steven-lott-learn-to-code-episode-283/'>Listen Now!</a></p>
Cross compilers, native compilation, or some kind of VM (like Java)?
Tags: discuss, desktop, java, go
Published: 2020-10-08 13:54:31

Of course, JavaScript with web browser is also a VM, but it cannot access filesystem, and much less powerful than JVM.

Docker is probably not an option, when distributing desktop apps to end-users.

So, if cross compilation, what is your toolset and language of choice? I realized I can cross-compile Go with [xgo](https://github.com/karalabe/xgo) (which supports all three major platforms), and Rust with [cross](https://github.com/rust-embedded/cross) (which does not support macOS). I have no idea how to do C/C++ directly.

Not sure if Python, how do you link for the different platforms you are not using?

I also realized that it might be possible to compile semi-natively via Docker with [WINE](https://www.winehq.org/), which is again, cannot target macOS. - [Electron Builder can also use this method.](https://www.electron.build/multi-platform-build)

> Don’t expect that you can build app for all platforms on one platform.

Another safe way is to use Java or JVM, but how many (non-dev) people actually installed JRE these days?

Lastly, if you use native compilation, how often do you have to open other OS's. I can open Windows in VirtualBox, but I yet to have access to Hackintosh (i.e. macOS).

And yes, I do realize that I can compile on CI with both Windows (which has Visual Studio) and macOS (which has Xcode) as well; but I don't have much experience on that.
How to verify signatures from Slack incoming requests with Next.js
Tags: slack, api, nextjs
Published: 2020-10-08 13:54:00

---
title: How to verify signatures from Slack incoming requests with Next.js
published: true
description: This post explains how to create a Next.js API route to handle Slack incoming requests (interactive actions, events) with Next.js
tags: slack, api, nextjs
---

Hi there, this is a short blog post for anyone looking to handle Slack incoming requests with Next.js.

When creating a Slack application that will interact with your web application, Slack will call you back on some actions like:
- [events API](https://api.slack.com/events-api)
- any [interactivity action](https://api.slack.com/interactivity) like a button click in a message

Here's an example Slack [`postMessage`](https://api.slack.com/methods/chat.postMessage) call:

```js
import { WebClient } from "@slack/web-api";
const web = new WebClient(token);
web.postMessage({
  channel: "#general",
  // fallback for mobile and email notifications:
  text: "Please visit <https://google.com>",
  blocks: [{
    type: "section",
    text: {
      type: "mrkdwn",
      text: "Please visit https://google.com"
    }
  }, {
    type: "actions",
    elements: [{
      type: "button",
      text: {
        type: "plain_text",
        text: "google",
      },
      url: `https://google.com`,
      action_id: "go_to_google_button",
    }],
  }]
});
```

If you do this, you'll get this result:

![Screenshot of a Slack message with a button](https://dev-to-uploads.s3.amazonaws.com/i/qacxggthtnuk8y266moa.png).

And if you click on the "google" button, it will open Google in your browser. Pretty cool way to link from Slack to your web app for example.

**But**, that's not the end of the story. If you only do this then Slack will complain because a [button](https://api.slack.com/reference/block-kit/block-elements#button), even if it only open a new url, is still an interactive element from Slack point of view.

So Slack will try to call the URL defined in your application "Interactivity & Shortcuts" Slack settings.

And it will fail because you've not defined a route for that.

Now to solve that, if you're using Next.js, you have to define a route as follow:

```js
// pages/api/slackInteractiveEndpoint.js

import { createMessageAdapter } from "@slack/interactive-messages";

// you can find this secret in your app "Basic information" tab
const slackInteractions = createMessageAdapter(slackSigningSecret); 

slackInteractions.action(
  { type: "button", actionId: "go_to_google_button" },
  // no need to reply, it's just a button to a url
  () => {},
);

export default slackInteractions.requestListener();

export const config = {
  api: {
    bodyParser: false,
    externalResolver: true,
  },
};
```

Then add this route in your Slack application "Interactivity & Shortcuts" tab. Test one message, click on the button and .. _voilà!_

Because the Slack SDK is responsible for parsing the body and replying to the request, we tell Next.js to let it go via:
- `bodyParser: false`
- `externalResolver: true`

Hope this helped you! Post a comment otherwise :)
Developers Experience on Deployment of SmartContracts.
Published: 2020-10-08 13:50:19

Some time we restrict ourselves just being lazy and justifying our laziness by sticking to old #technology.

For Example: #Devs of #Blockchain stick to #Ethereum when their are lots more network with multiple functionalities. 

I have started exploring #XinFin XDC Network these day and tried to deploy a small #smartcontract on XinFin Apothem Network, also deployed another smartcontract on XinFin Mainnet today : https://explorer.xinfin.network/tx/0x82f37f34f8b9b0e5daaa0b23c038598ad5ddda57f0384e07733abf23144ba667

To be honest, while trying 1st time it took 15 minutes using the tutorial video: https://youtu.be/XvzxHs6_EOQ & just 5 minutes 2nd time without any tutorial. Looking forward to explore more on #XDC Network.

#blockchaintech #developercommunity #developertools
Best VisualStudio Code extensions to work for Azure
Tags: azure, webdev, tutorial, vscode
Published: 2020-10-08 13:38:54

#### 📺 037 - Brian Clark 🎙️ Frank Boucher

{% youtube ANFaaqRSQ1A %}


#### 📺 046 - Brian Clark 🎙️ Frank Boucher

{% youtube rTAWOxr210Y%}


---

The challenge was great: do a review of the Best VisualStudio Code extensions to work for Azure. In this episode of All Around Azure, Brian Clark is joining me to introduce VisualStudio Code and review the best extension when it's time to code, build, deploy, search "stuff" on Azure.

We will start with the extension included in the extension pack Azure Tools: Azure App Service, Azure Storage, Azure Functions, etc. There is so much great extensions that we couldn't finish... Stay tune for part 2.

---


### Useful Links

🔗 [Visual Studio Code](https://code.visualstudio.com/)

🔗 [VS Code Extension: Azure Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack&WT.mc_id=allaroundazure-devto-brcl)  

🔗 [VS Code Extension: Azure App Service](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice?WT.mc_id=allaroundazure-devto-brcl)  

🔗 [VS Code Extension: Azure Functions](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions&WT.mc_id=allaroundazure-devto-brcl) 

🔗 [VS Code Extension: Azure Databases](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-cosmosdb&WT.mc_id=allaroundazure-devto-brcl)  

🔗 [VS Code Extension: Azure Pipelines](https://marketplace.visualstudio.com/items?itemName=ms-azure-devops.azure-pipelines&WT.mc_id=allaroundazure-devto-brcl)  

🔗 [VS Code Extension: Azure Resource Manager](https://marketplace.visualstudio.com/items?itemName=msazurermtools.azurerm-vscode-tools&WT.mc_id=allaroundazure-devto-brcl)   

🔗 [VS Code Extension: Azure Storage](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestorage&WT.mc_id=allaroundazure-devto-brcl)  


### Learn more about Brian Clark

🔗 [@_clarkio](https://twitter.com/_clarkio)

🔗 [Bio](https://developer.microsoft.com/en-us/advocates/brian-clark)

### Find Us On

📺 [Twitch](https://www.twitch.tv/microsoftdeveloper)

🔗 Twitter [@allaroundazure](https://twitter.com/allaroundazure)

☁️
Learn what a product roadmap is & why you need it
Tags: webdev, productivity, startup, roadmap
Published: 2020-10-08 13:37:29

Check the UI Bakery blog to find out what a product roadmap is, who in your team needs it, and what for.
Read about the key elements to include in a product roadmap, learn how it helps you ensure transparency over your product development for clients, stakeholders, users.

Check it out -> https://uibakery.io/post/what-a-product-roadmap-is-why-you-need-it?utm_campaign=ui_bakery%20-%20article%20-%20roadmap%20-%20cacq%20-%20xx%20-%20traffic&utm_source=DevTo&utm_medium=webdev&utm_content=article_release
How to Start a Career as a web developer?🤔
Tags: career, html, css, webdev
Published: 2020-10-08 13:34:26

Hi there 👋, 
Lots of you might be thinking 🤔, should I go in this coding field or not (I also used to think😜) but after some outer motivation I chosen this path and started to learn HTML, CSS, JAVASCRIPT. I took many online courses and watched lots of YouTube videos and scrolled thousands of webpages and finally, now I find myself at a good position of web development. But still I am learning new things about web development everyday, I also created some fun projects by taking help from YouTube.
But if someone wants to get into this field then I would suggest him that:
1. Don't take it too seriously 😡(in starting it will definitely give you a little bit of pain)

2. Don't 😶hesitate to ask

3. Don't try to learn whole things at once

4. Build fun😄 projects (this will improve your skills a lot)

5. Keep learning🙄 everyday (even for one hour)

6. You should build your own portfolio (as you should have something to showcase your skills)

7. You can learn programming for free of cost if you don't have good budget (even better than a paid course)
Real-time liquidations monitor for top crypto exchanges in Node.js
Tags: cryptocurrency, trading, tradingbots, node
Published: 2020-10-08 12:31:55

![preview](https://user-images.githubusercontent.com/51779538/95463703-5ebbf080-0979-11eb-9228-7733985810b2.gif)
#### Step 1.
```sh
npm install tardis-dev
```

#### Step 2.
[Try it live on RunKit](https://runkit.com/thad/real-time-liquidations-monitor-for-top-crypto-exchanges-in-node-js) or run snippet below locally

{% gist https://gist.github.com/thaaddeus/39211703e378a1f16d65ad05c049939f %}

[Typescript version](https://gist.github.com/thaaddeus/cbc8fbd19caf22cbd2dcb8ba8adbb230)

#### Step 3. 

Enjoy watching the blood!

If you'd prefer standalone CLI version of that or trying to use it but from different language, please reach out in comments! Thanks.

##### Resources:

1) tardis-dev lib https://github.com/tardis-dev/tardis-node
2) not sure what the liquidation is? See https://blog.bybit.com/academy/what-is-liquidation/
 or https://academy.binance.com/en/glossary/forced-liquidation