teleren/devto huggingface dataset:
Dist::Zilla @Starter - Revision 2
Tags: perl
Published: 2021-03-10 20:41:13

I recently released revision 2 of the [@Starter](https://metacpan.org/pod/Dist::Zilla::PluginBundle::Starter) plugin bundle for Dist::Zilla. This revision brings small improvements to the default behavior, as well as the option to set a different installer plugin. In order to use the new revision, you must set the option "revision = 2" when using the bundle.

Revision 2 uses [[Pod2Readme]](https://metacpan.org/pod/Dist::Zilla::Plugin::Pod2Readme) instead of [[ReadmeAnyFromPod]](https://metacpan.org/pod/Dist::Zilla::Plugin::ReadmeAnyFromPod) to generate the text README file. [ReadmeAnyFromPod] is a great and flexible plugin, but [Pod2Readme] is much simpler for the specific purpose of generating a text README. For any additional README files in other formats, I still recommend using [ReadmeAnyFromPod].

This revision also sets the option ["inherit_version" in [MetaProvides::Package]](https://metacpan.org/pod/Dist::Zilla::Plugin::MetaProvides::Package#inherit_version) to 0 by default. This makes no difference if your distribution contains uniform module versions, or for modules which have no version (they are still marked as having the distribution version unless you set "inherit_missing" to 0 as well), but if you have modules with different versions hardcoded, this will reflect that in the "provides" metadata.

The new "installer" option allows you to swap out the default [[MakeMaker]](https://metacpan.org/pod/Dist::Zilla::Plugin::MakeMaker) installer plugin. The primary reason to do this is to use [[MakeMaker::Awesome]](https://metacpan.org/pod/Dist::Zilla::Plugin::MakeMaker::Awesome) when you need to customize portions of the generated "Makefile.PL". There is also the option to use [[ModuleBuildTiny]](https://metacpan.org/pod/Dist::Zilla::Plugin::ModuleBuildTiny) or [[ModuleBuildTiny::Fallback]](https://metacpan.org/pod/Dist::Zilla::Plugin::ModuleBuildTiny::Fallback) if your distribution is simple enough to use [Module::Build::Tiny](https://metacpan.org/pod/Module::Build::Tiny) as your installer.

I recommend upgrading to Revision 2 if you are currently using `@Starter` or `@Basic`. Check out the documentation for details, and come visit [#distzilla on irc.perl.org](https://kiwiirc.com/nextclient/#irc://irc.perl.org/#distzilla) if you have any questions or issues.

*Since the original publication of this post, `@Starter` has reached revision 5 and the [@Starter::Git](https://metacpan.org/pod/Dist::Zilla::PluginBundle::Starter::Git) variant bundle has been added for additional convenience. I will be republishing my other posts on `@Starter` in the coming week.*
State Management with Vanilla JavaScript
Tags: vanilla, javascript, redux, context
Published: 2021-03-10 20:36:51

# TL;DR
| *Check [this Codepen](https://codepen.io/ChristosMr/pen/JjbwoxV) out.*
_____
# Intro
After reading [this article](https://dev.to/vijaypushkin/dead-simple-state-management-in-vanilla-javascript-24p0) on how to create a state management library using Vanilla JS I was intrigued to do something similar but in a more developer-friendly manner.

We basically want something that makes it easy for us to update the state, without having to invoke functions like `setState` and without having to trigger a UI refresh manually. This means that we should be able to do something like `App.state.count++;` and that should be enough for the UI to be refreshed.

For this reason, we will be using [JS Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).
Basically, a Proxy is like a middleman between you (the developer) and the object you are trying to read or edit. It allows us to *intercept and redefine fundamental operations for that object*, which is a fancy way of saying that we know every time someone tries to edit or read a property from that object.

____

# Code
Now in order for us to create a basic state management system, we need to create the following things:
1. The **App** returns the UI that encapsulates the app state.
1. The **App State** encapsulates
  * the `actual state object`
  * and the `middleware proxy`.

### The App
| *All we want from the app is to return a UI that basically displays the state.*
```js
const App = function _App() {
  return `
    <h1>Vanilla State Management</h1>
    <button onClick='App.state.count++;'>You pressed me ${App.state.count} ${App.state.count === 1 ? 'time' : 'times'}!</button>
  `;
};
```

### The App State
| *The State Object in combination with the Middleware Proxy that updates the UI every time something in the state object is changed.*
```js
const handler = {
  set: function(obj, prop, value) {
    obj[prop] = value;
    document.getElementById('app').innerHTML = App();
  },
};
    
App.state = new Proxy({ count: 0 }, handler);
```
____
# Wrap Up
| *This is what the complete thing looks like.*
```js
<body>
  <div id="app">loading...</div>
  <script>
    const App = function _App() {
      return `
        <h1>Vanilla State Management</h1>
        <button onClick='App.state.count++;'>You pressed me ${App.state.count} ${App.state.count === 1 ? 'time' : 'times'}!</button>
      `;
    };
    
    const handler = {
      set: function(obj, prop, value) {
        obj[prop] = value;
        document.getElementById('app').innerHTML = App();
      },
    };
    
    App.state = new Proxy({ count: 0 }, handler);
    
    // Initial Loading of the App
    document.getElementById('app').innerHTML = App();
  </script>
</body>
```
Autenticação em Single Page Applications
Tags: react, spa, authentication
Published: 2021-03-10 20:34:27

Nesse artigo será explicado como funciona a autenticação em SPAs. 
Diferente de páginas web comuns SPAs não recebem uma session do servidor ao enviar dados os dados de autenticação (e-mail /senha por exemplo).
Tipicamente, quando se usa SPAs no front é utilizada uma API restful para autenticação. O servidor não se importa com diferentes clients se conectando a ele, por isso não é utilizada uma session. 
Em vez disso, é utilizado um token, um objeto JSON. JSON Web Token (JWT) é a forma mais comum de token que se recebe. Trata-se de uma string codificada em Base64.
Exemplo de JWT:
````
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
```
Essa string pode ser dividida em três partes:
1. Header que descreve o token
2. Um payload que contém a parte do json codificado 
3. Um hash de assinatura que pode ser usado para verificar a integridade do token

A segunda parte (payload) carrega os dados que te permitem saber quem é essa pessoa, o que ela pode acessar (escopo) e quando esse token expira. A API usará essa informação quando verificar seu token

E então, ao receber esse objeto deve-se armazena-lo no local storage ou session storage. Com esse objeto armazenado pode-se utilizá-lo para enviar requests para o servidor, para que este saiba que o request está sendo realizado de uma fonte autenticada.
Walkthrough of GitHub Codespaces Using VS Code Remote Containers
Tags: github, vscode, docker
Published: 2021-03-10 20:33:36

Hey folks, I whipped together another YouTube video covering one of my new favorite things, GitHub Codespaces!

This is a lengthy walkthrough of going from using VS Code Remote Containers to Github Codespaces.

{% youtube tp9BhxiZW6o %}
Money Mule Huge Scam Targeting Web developers and freelancers!!
Tags: webdev, programming, codenewbie, 100daysofcode
Published: 2021-03-10 20:30:31


## Be aware developers this is serious and they can target you next.
##### It all started two weeks ago when a person named "Bill Cook" contacted me via Facebook saying that their new charity organization need a website and asked me to send an estimate.That is what I did next day.
Scammers know their job and they do it very professionally giving a lot of details about design and functionality they need.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67p539znz47s4sxe4f6b.png)
After few days I received the check in the mail but it was not for the amount i have estimated this project,instead three times more,it followed by couple emails.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipnyel1z46rdqiakutrj.png)
Well who does not make mistakes? everyone right ? especially when it comes to a 75 years old man.
The check looked real to me so I deposited it in my acc check looked real to the bank too because i had the funds available next day.
They provided the name and address for their private consultant i wrote a check for the remaining amount and i was ready to sent it out but the right next email they sent me stopped me. It stopped me because they asked for cash only no check no money order nothing but cash.I said no to myself that will not happen i can not send cash money via fedex.I have send them back couple emails to provide more info about the project and there was no answer.You probably will say, it was obvious,agree it was obvious for me too but a lot of people can fall for it and lose their hard earned money.
Bank told me is not a real check but the funds are in my acc after three days depositing it online.Their security issue make this criminals real.
Asynchronous or not?
Tags: javascript, programming
Published: 2021-03-10 20:19:57

We know that javascript is single threaded and synchronous language so, how is it possible to make asynchronous calls in javascript?

Before we get into details let's clarify some definitions:

**Single Threaded**: One command at a time.

**Synchronous**: One at a time in order.

Asynchronous means, more than one at a time. Not in javascript but in some other programming languages like GO, with goroutine, you can execute a function which executes another function and another function which all of them executes at the same time but, javascript is synchronous and it executes code, "one line at a time, in order". 

In javascript we have click events or fetch api where you can define a callback function which will execute right after a certain event. 

Here is the thing: Even though javascript is synchronous and single threaded, browsers are not. Browsers are not just javascript interpreters. They have rendering engine, networking component and many more. Javascript engine itself is synchronous but for example when we add an event listener to a button other parts of the browser are looking for, if the condition to fire that event is fulfilled. 

Let's take a look at this example: 
```js
function waitThreeSeconds() {
  var ms = 3000 + new Date().getTime();
  while(new Date() < ms) {}
  //1st
  console.log('I am side effect of this function');
}
function clickHandler() {
  //3rd
  console.log('click event!');
}

document.addEventListener('click', clickHandler);

waitThreeSeconds();

//2nd
console.log('interpreter read all the code');
```
In this example we can understand that javascript interpreter reads the code one line at a time. The reason why browser will log 'I am side effect of this function' first is simply because waitThreeSeconds function executed before `console.log('interpreter read all the code');`. If we would execute waitThreeSeconds after `console.log('interpreter read all the code');` We would immediatly see 'interpreter read all the code' in the browser console.

But here is one thing, no matter when you click to the screen,'click event!' will be always final log because browser checks event queue only after execution stack is empty.
C# 9.0 Feature - Omit New Expression
Tags: csharp, webdev, dotnet, vscode
Published: 2021-03-10 19:46:43

---
title: C# 9.0 Feature - Omit New Expression
published: true
description: C# 9.0 Feature - Omit New Expression
tags:  csharp, webdev, dotnet, vscode
---

With .NET 5.0, Microsoft has released new version of C# and It got some cool new features. So I'm creating a video series about those new features and this is video is second of them. In this video,  We are going to learn how we can omit the new expression and we have to write less code when we know the type of object we are creating. 


In this video, I have created an simple console application and explained how we can omit the New Expression in C# 9.0. If we know the type and if we don't know the type i.e. we use var keyword then its giving errors.


For more details please do watch my video.

{% youtube mt2t-qd6CQ4%}

Here is a complete list of video series:

Part 1: C# 9.0 Feature - Top New Level Statement
http://bit.ly/CS9TopLevelStatement​

Part 2: C# 9.0 Feature - Omit New Expression
http://bit.ly/CS9OmitNewExpression

If you like this video and wanted to see a similar kind of video then, please subscribe to my you tube channel at - https://bit.ly/codewithjv.

Also, Please comment about what content you want to see in my YouTube channel.
5 practices to take Hashicorp Vault in Kubernetes to production readiness
Tags: kubernetes, vault, architecture, gcp
Published: 2021-03-10 19:22:33

Are you setting out to deploy Hashicorp Vault in Kubernetes? There are a variety recommended practices documented out there, however, many of them won't give you an overarching picture of what it takes to do so securely and reliably in production.

Follow these practices to guide you on the path from prototype to production-readiness:

https://expel.io/blog/production-readiness-hashicorp-vault-kubernetes
¿Por qué deberías usar un Sistema de Control de Versiones? 💡
Tags: scv, controldeversiones, flujodetrabajo, colaboracion
Published: 2021-03-10 19:19:13

## ¿Qué son los SCV?
Son herramientas que ayudan a equipos de software en la **administración de cambios** al código fuente **a través del tiempo**. 🕒

## Ventajas de usar un SCV
👉🏽 Realiza cambios mientras mantienes el **flujo de trabajo**.
👉🏽 **Olvídate de perder líneas de código** o la totalidad del proyecto.
👉🏽 Un SCV mantiene **Historial** y **Respaldo** de todos los cambios que realices en tus ficheros **línea por línea** para saber exactamente de donde provienen. 🔍
✅ Realiza respaldos.
✅ Mantén un historial.
✅ Realiza revisión de cambios.
✅ Experimenta realizando modificaciones sin afectar al código.
✅ Permite la colaboración.

## Tipos de SCV
Centralizados vs Distribuidos

**Centralizados**
El proyecto completo **almacenado en un servidor central** y cada colaborador envía sus cambios al servidor.

**Distribuidos**
Cada colaborador mantiene una **copia del proyecto** y su historial en su computadora.

*¿Y tú, ya utilizas un Sistema de Control de Versiones?* 🤔
How to Scrape Websites Using Python
Tags: python
Published: 2021-03-10 19:13:24

1) Create a Python virtual environment
```
C:\Users\Owner> cd desktop
C:\Users\Owner\desktop> py -m venv scrap
C:\Users\Owner\desktop> cd scrap
C:\Users\Owner\desktop\scrap> Scripts\activate
(scrap)C:\Users\Owner\desktop\scrap>
```

2) Install scrapy
```
(scrap)C:\Users\Owner\desktop\scrap>pip install scrapy
```

3) Create a scrapy project
```
scrapy startproject myproject
```

4) Create a basic spider
Create a file named spider1.py in the myprojects > spiders folder.
Add the subclass, name, start_urls, and get all of the text in the `.readmore` `<p>` tag.
```python
import scrapy
class ReviewSpider(scrapy.Spider):
    name = "quicken"
    start_urls = [
    "https://www.creditkarma.com/reviews/mortgage/single/id/quicken-loans-mortgage/",
    ]
    def parse(self, response):
      reviews = response.css('.readmoreInner p::text').getall()
      yield {"text" : reviews}
```

5) Run the spider
```
(scrap) C:\Users\Owner\Desktop\code\scrap\myproject\myproject\spiders>scrapy crawl quicken
```

6) Save the data
```
(scrap) C:\Users\Owner\Desktop\code\scrap\myproject\myproject\spiders>scrapy crawl quicken -o reviews.json
```


[Beginner's Guide to Scrapy for Python](https://www.ordinarycoders.com/blog/article/beginner-guide-scrapy)
Multiple fetches + params
Tags: javascript, promise, fetch, requests
Published: 2021-03-10 19:02:02

Suppose we need get data from multiple endpoints and proccess all toghether when all requests are finished.
Together with the request we need to pass other parameters to identify them or do something else.

In order to make a requests adding parameters, we'll create our own function that will contain the fetch.

```javascript
const ownFetch = async (url, params) => {

    const res = await fetch(url)
    const data = await res.json()

    return { data, params }
}
```
Now we can create an empty array of requests (promises), I'll use jsonplaceholder to get fake info and test code.
Suppose we want to take somethings todos, and each todo has its respective id and thus its own endpoint.

```javascript
let requests = []
let todos = [1, 3, 5, 10]

todos.forEach((id, i) => {
    requests.push(ownFetch(`https://jsonplaceholder.typicode.com/todos/${id}`, `Request #${i+1}`))
})
```

The final step is to run all the requests through the Promise.all() function and get results:

```javascript
const run = async () => {
    const results = await Promise.all(requests)
    results.forEach(result => {
        console.log(result)
    })
}
```

The result:

```shell
{
    data: {
        userId: 1,
        id: 1,
        title: 'delectus aut autem',
        completed: false
    },
    params: 'Request #0'
}
{
    data: {
        userId: 1,
        id: 3,
        title: 'fugiat veniam minus',
        completed: false
    },
    params: 'Request #1'
}
{
    data: {
        userId: 1,
        id: 5,
        title: 'laboriosam mollitia...',
        completed: false
    },
    params: 'Request #2'
}
{
    data: {
        userId: 1,
        id: 10,
        title: 'illo est ratione...',
        completed: true
    },
    params: 'Request #3'
}
```

You can use Promise.allSettled() instead of Promise.all(), the differences is explained by Victor in this post:
{% link https://dev.to/viclafouch/promise-allsettled-vs-promise-all-in-javascript-4mle %}


I leave you the complete code:

```javascript
const ownFetch = async (url, params) => {
    const res = await fetch(url)
    const data = await res.json()
    return { data, params }
}

let requests = []
let todos = [1, 3, 5, 10]

todos.forEach((id, i) => {
    requests.push(ownFetch(`https://jsonplaceholder.typicode.com/todos/${id}`, `Request #${i}`))
})

const run = async () => {
    const results = await Promise.all(requests)
    results.forEach(result => {
        console.log(result)
    })
}

run()
```

👋🏽
Fetch Data in React Cheat Code 
Published: 2021-03-10 18:58:29

API credit goes to :  johnsmilga (https://www.johnsmilga.com/)

1)  fetch data using fetch api :
```javascript
import { useState, useEffect } from 'react';

const url = 'https://course-api.com/react-tours-project';

function App() {
  const [tours, settours] = useState([])
  const [loading, setloading] = useState(true)

  // fetching data
  useEffect(() => {
    fetch(url)
    .then(response => {
      if(response.ok){
        return response.json()
      }
      throw response;
    })
    .then(tours => {
      settours(tours);
    })
    .catch(error => {
      console.error("Error Fetching",error);
    })
    .finally(()=>{
      setloading(false)
    })
  }, [])

if(loading){
    return(
      <main>
        <Loading/>
      </main>
    )
  }

  return (
    <div className="App">
     <Tours/>
    </div>
  );
}

export default App;
```

2) using Axios. 
firstly install axios using this command "npm install axios
"
```javascript

import { useState, useEffect } from 'react';

const url = 'https://course-api.com/react-tours-project';

function App() {
  const [tours, settours] = useState([])
  const [loading, setloading] = useState(true)

  // fetching data
  useEffect(() => {
  axios(url)
  .then(response =>{
    settours(response.tours)
  })
  .catch(error => {
    console.error("Error Fetching",error);
  })
    .finally(() => {
      setloading(false)
    })
}, [])

if(loading){
    return(
      <main>
        <Loading/>
      </main>
    )
  }

  return (
    <div className="App">
     <Tours/>
    </div>
  );
}

export default App;

```

2) using async/ await

```javascript

import { useState, useEffect } from 'react';

const url = 'https://course-api.com/react-tours-project';

function App() {
  const [tours, settours] = useState([])
  const [loading, setloading] = useState(true)

  // fetching data

const fetchTours = async () => {
  setloading(true)
  try{
    const response = await fetch(url)
    const tours = await response.json()
    setloading(false)
    settours(tours)
  }catch(error){
    setloading(false)
    console.log(error)
  }
}

useEffect(() => {
  fetchTours()
}, [])

if(loading){
    return(
      <main>
        <Loading/>
      </main>
    )
  }

  return (
    <div className="App">
     <Tours/>
    </div>
  );
}

export default App;

```
A Simple and Effective Guidance System for Crowd Simulation
Tags: webdev, gamedev, javascript, html
Published: 2021-03-10 18:14:10

Simulating a large crowd has always been a challenging task. It is especially true for browsers using WebGL, for harnessing the full, native power of CPU is still impossible. It is therefore imperative that an effective automatic Level-of-Detail (LOD) system, Frustum Culling, Skinned Instancing must all be implemented to reduce unnecessary communication between GPU and CPU and boost performance.

Even after all that, animators are still facing the challenges on how to move each instance to create seemingly nature movement of a crowd. In this series of tutorial, we will take on this challenge. First off, how to guide instances to a set of predetermined points in space?

Readers can access this tutorial at any time at https://www.otakhi.com/petridish?load=15856​ and see how it is done.

{% youtube vmsF6VGuNCY %}

Behind the scene, a figure-8 path animation is added to a cockroach which also has a Walk skeletal animation. The skeletal animation is baked into a texture which is then used to drive its material in real time.

We generate many copies of the same cockroaches using skinned instancing technique. Our automatic Level-of-Detail system will make sure distance cockroaches has fewer vertices than the near ones.

On start-up, each cockroach is randomly placed and made to follow the figure-8 path at a random starting point. This gives the crowd a random walk appearance. On mouse click, each instance is steered toward a fixed point in space. A direction-blending technique will make sure no sudden change of direction happens. A callback function added to each instance will notify us when that cockroach has arrived at the final destination.

Another callback function installed on each instance is called after each update. This gives us another opportunity to control each instance's movement… such as global repulsion and attraction force.

We will use this callback to add obstacle avoidance and other neat features in next episode.