teleren/devto huggingface dataset:
Graph data structure
Published: 2021-05-03 03:15:59

Today I will like to discuss graphs and a little bit about how they work. Graphs are similar to trees, what makes them different is that trees are not allowed to have cycles, so if a graph have a cycle, then it's not a tree. Also, the tree nodes is connected in some way to another node. However, for graphs it is possible to not fully be connected.

Social networks is a good example of where a graph is used most frequently. Graphs are good with keeping track of the connections amongst each user. Graphs are also able to display when the user does not have any connections with a specific user.

Graphs have their own jargon each node is called a vertex. The lines between nodes are called edges. This is the basics about graphs. Once I learned that graphs are used in social networks I saw how powerful they are and how much you can do with them.

I plan on continuing to learn about the various data structures and in what ways they are implemented in real applications. Seeing data structures in action is very fascinating.

Happy coding!
Anime App
Published: 2021-05-03 03:14:00

To start things off my project was initially suppose to be an app that gives the viewers some information about different types of anime genres. Initially I started off by asking different people how they felt about the topic and if they were willing to learn more about anime. I got a lot of different opinions and actually learned a few things that even I didn't know. With all the information I gathered along with some personal research of my own I came up with a game plan for how I wanted the app to be structured. Unfortunately I didn't get a chance to finish it before it could do exactly what I wanted it to do before it was due but I will finish it for it to be viewed publicly.
Project portfolio 
Published: 2021-05-03 03:10:51

I enrolled in Flatiron School program for one month. as a project at the end of phase 1, we asked to build a website using only Html, CSS, Javascript by calling an external API.
I always asked a friend to suggest me a movie to watch then an idea came to me to build a website that suggests to me a movie to watch, and also I can see all movies and read the full description and see the rate.
What is an API?
	Technically, API stands for Application Programming Interface. At some point or another, most large companies have built APIs for their customers, or internal use.
In other words, I would define it as an online database that interacts with a remote server. 
One week to build a website ...
	The project wasn't easy as I excepted. following instructors' advice and good organization are helpful to achieve my goal.
And here are some steps I used during my project
Plan out your features
The basic story of your application
Describe/sketch your ideas (use diagrams!).
Creating Html
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2t72o8qor2rf4ds1j6c.jpg)
After planing out my project I started converting my mockup to an Html file by adding the Title insert <Div>, plan where to add my images and other features. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82ijvfbgxr1v9fb89igf.jpg)
But nothing display yet
Creating Javascript
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sfxqa5fh1kj81052h39.jpg)
It is the part where you convert your ideas to functions and interacting with API using "fetch", also interact with the DOM to create HTML elements.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gfs85g3a78nj2ep1xym.png)
Creating CSS
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cotuezha8zcja98iv6bm.jpg)
here is the funniest part of my project, I feel like a painter who's doing adding the final touches to his portrait.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mac5a5odejgmvkt4etsn.png)
Here is the result :
https://suggestamovie.netlify.app/
and if you want to see the whole code :
https://github.com/mezianefraga00/phase-1-javascript-project-mode
Search transaction in Algorand with Go
Tags: go, algorand
Published: 2021-05-03 03:08:32

## Search Transaction with Golang

```go

package main

import (
	"context"
	"encoding/json"
	"fmt"
	"os"
	"strings"

	"github.com/algorand/go-algorand-sdk/client/v2/common"
	"github.com/algorand/go-algorand-sdk/client/v2/indexer"
)

// here we use purestake api, 
const (
	APIEndpoint string = "https://testnet-algorand.api.purestake.io/idx2"
	APIToken    string = "<your token>"
)

func main() {
	client, _ := common.MakeClientWithHeaders(
		APIEndpoint,
		"X-API-Key",
		APIToken,
		nil,
	)

	if len(os.Args) < 2 {
		fmt.Println("Missing txn id parameter")
		return
	}

	// get the txnid to search from command line
	txnId := os.Args[1]
	indexerClient := indexer.Client(*client)
	txnFinder := indexerClient.LookupTransaction(txnId)
	resp, err := txnFinder.Do(context.TODO())
	if err != nil {
		fmt.Println(err)
		return
	}
	sender := resp.Transaction.Sender
	recver := resp.Transaction.PaymentTransaction.Receiver
	note := resp.Transaction.Note
	fmt.Println("Sender:", sender)
	fmt.Println("Recver:", recver)
	fmt.Println("Note:", string(note))
	fmt.Println(strings.Repeat("=", 20))
	txn, _ := json.MarshalIndent(resp.Transaction, "", "  ")
	fmt.Println(string(txn))
}
```

Run it:
```bash
$ go run main.go <txnid to search>
```

Result:
```
Sender: ZJHG3Z4CRJ4DOEPA5UYFMDWWYY6MA2VSMRM5DHUEQJBNPO2FP2PEKYA43Y
Recver: BOF4NLVXWDKIE7M27BYTKGE76SK26HGOMX7F6RMZIFEBL3VDVUDHIWPPMI
Note: sha256 hash
====================
{
  "application-transaction": {
    "global-state-schema": {},
    "local-state-schema": {}
  },
  "asset-config-transaction": {
    "params": {}
  },
  "asset-freeze-transaction": {},
  "asset-transfer-transaction": {},
  "confirmed-round": 13904215,
  "fee": 1000,
  "first-valid": 13904212,
  "genesis-hash": "SGO1GKSzyE7IEPItTxCByw9x8FmnrCDexi9/cOUJOiI=",
  "id": "<txnid>",
  "keyreg-transaction": {},
  "last-valid": 13905212,
  "note": "c2hhMjU2IGhhc2g=",
  "payment-transaction": {
    "receiver": "BOF4NLVXWDKIE7M27BYTKGE76SK26HGOMX7F6RMZIFEBL3VDVUDHIWPPMI"
  },
  "receiver-rewards": 15219,
  "round-time": 1619979036,
  "sender": "ZJHG3Z4CRJ4DOEPA5UYFMDWWYY6MA2VSMRM5DHUEQJBNPO2FP2PEKYA43Y",
  "sender-rewards": 49484,
  "signature": {
    "logicsig": {
      "multisig-signature": {}
    },
    "multisig": {},
    "sig": "jHbHlhrIhDoOBe59Lw9jKxbs98D6Tc+an47RAd9EfsIYZlqFvnWeiwAdm1RMO2cQDeu0LAwiBvTutFW26IFjDA=="
  },
  "tx-type": "pay"
}
```
CSRF Tokens and You
Published: 2021-05-03 02:56:49

##Cross-site request forgery

CSRF deals with a web security vulnerability that would allow an attacker or unauthenticated third party to manipulate data in malicious ways to exploit unprotected web applications. 

Largely the stakes are not particularly high in our cushy environment at flatiron, but dealing with CSRF in the professional world is going to be expected. Depending on what market you're dealing with, the stakes can certainly go sky high if a malicious party manipulates financial information. 

Lets go through the basics. The CSRF token will be a unique token embedded in your sites HTML. When a user makes a POST request, the token is sent along with the request. In a rails environment, the token will be compared with the one stored in cookies for the authenticity. 

Lets go to our <strong>application_controller.rb<strong>. Where we are going to enable this functionality. 

```
protect_from_forgery with: :exception
```
Let's get our meta tags in order on our <strong>application.html.erb<strong>
 ```
<%= csrf_meta_tags %>
```
bear in mind, if you're using bootstraps or copying in an existing template, your tags may be already within the header section.

You won't see the actual token contents in your IDE when its running. Instead go to your localhost http://127.0.0.1:3000 and right click and hit "Inspect". Now we're in our DevTools, in the header section you'll see the actual contents of the generated token. This can be relevant to debugging when you're getting invalid POST errors. Next up on our POST view forms, inside the
```
<form> 
<%= hidden_field_tag :authenticity_token, form_authenticity_token %>
</form>
```
along with the rest of your form code, you'll want this, you'll in-fact need this. Largely you're all set-up, there's way more stuff going on under the hood, but this is a great place to start. 
Caveat! if you're doing a 
```
form_with(model: url: exmaple_path) do |f|
```
Rails is magically taking care of that hidden field token for you.
Promise & await & resolve & reject & then & catch
Tags: node, javascript, beginners
Published: 2021-05-03 02:51:14


```javascript
function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  await new Promise(resolve => {
    setTimeout(() => {
      console.log("test")
      // resolve(10);
    }, 2000);
  });
  console.log(10); // the line will not be execute
}

f1();

async function f2() {
  await new Promise(resolve => {
    setTimeout(() => {
      console.log("test")
      resolve(10);
    }, 2000);
  });
  console.log("the f2 line will be executed"); // the line will be executed
}

f2()

async function f3() {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("test")
      reject(10);
    }, 2000);
  });
  console.log("the f3 line will not be executed"); // the line will not be executed, and an unhandled error occurs.
}

f3()

async function f4() {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("test")
      reject("reject content");
    }, 2000);
  }).catch((reject)=>console.log(reject));
  console.log("the f4 line will be executed"); // the line will be executed.
}

f4()
```
'Fugettaboutit!' and 'Yes!'
Tags: javascript, creativity, codenewbie
Published: 2021-05-03 02:06:33

Here comes my first app I created from scratch, sort of...
Anytime I work on any project, there's a fighting match between my ideals and objectives of the project in my mind.  This time was no exception but I was successfully able to let the objectives win, or I wouldn't be able to make it to the deadline. 

###Keep it simple
So what my little simple app does is to find a lyrics of the song by entering any keyword into search box, returns a list of 'suggestions', then a user clicks on one of the 'Get lyrics' buttons, it displays a lyrics. Then 'Clear search' button let a user to clear search results. 
Even with this simple user story, there were few obstacles that I knew I would have to tackle. so I said 'Fugettaoutit' to myself already have started wanting to make my app fancier, adding another fetch functions to display youtube videos of the songs.
![First app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3izb3c9kjnrbg6cxrfp.png)

###Obstacles
To get my JavaScript right is the biggest hurdle of all.
First, need my API source site to return the data in the way I wanted. I asked a question to my instructor promptly before getting myself into a tunnel of try-fail. Thanks to my instructors guidance for time frame to keep up to speed. I said 'yes!' when I saw those tiny letters of data strings proceeded by a word 'promise' in my dev tool of Chrome.

Second, finding code and constructing them into function to get my app to work.  I did good planning and made a list of objectives before starting to write my code.  However since I was still not sure what words in what order exactly I can use, none of my code seems working. I got into my mix-and-match game of keywords, reserved words, methods and expressions... Not a good state.  So I started to look into my past lecture videos and forked repos of lab.  Then started feeling each one of the code pulling me in further study. 'Fugettaboutit! With all these days of juggling classes and work hours dragging my not-so-young body, there's no way at the point I magically understand and memorize them all by cramming them.'
Again thanks to my instructor's advise and Google, I somehow stumbled onto code I can reference and modify to my app. Then I studied and compared to my materials from lectures each code and changed parts to make more sense to myself. Then came the 2nd 'yes!' moment when my Live server displayed 'suggestions'!

##Learning curve
I can't seem to point to what problem I had to get project to work.  In my case problem resided in managing time.  I love learning new things however I tend to overwhelm myself by try to learn more than I can absorb or needs for time being. Tackling one issue leads to another and blocks the flow.  'Fugettaboutit!  Why can't you just copy what you've learn and move on?  Stop deep digging..'
After all, reviewing through my code writing this, I noticed slight change in my way to read the code.  They actually started growing into symbolic state and making sense to me.
HackerRank Series #1: Simple Array Sum
Tags: algorithms, hackathon, hackerrank
Published: 2021-05-03 02:00:54

#### Problem Statement
Given an array of integers, find the sum of its elements.

For example, if the array `$ar = [1,2,3]`, 1+2+3 =6, so return 6.

#### Function Description

Complete the simpleArraySum function in the editor below. It must return the sum of the array elements as an integer.

simpleArraySum has the following parameter(s):

ar: an array of integers

```
Sample Input : 1 2 3 4 10 11
Sample Output : 31
```
#### Explanation
In our text editor on HackerRank, we already have the `simpleArraySum()` function declared with the parameter `$ar` which can be any given array. All you need to do is write a set of instructions in the function that will calculate the sum of all array elements so whenever the function is called, it can calculate the sum of the array elements of any simple array.
 For example in our Sample Input [1, 2, 3, 4, 10, 11], we expect an output of 31 seeing 1 +2+ 3+ 4 +10 +11 = 31.

#### Solution

> Ponder: How do we get all the elements of an array🤔? A loop should work fine!😎

##### Psuedocodes

Let's try to solve this problem without using codes.

- Initialize `sum` to 0.
- Loop through the array and get the array elements and add the value to `sum`.
- At each loop `sum` is updated with the latest sum value after the previous array element has been added.
- After the loop, return `sum`.

**Now, let's go coding!**
> I will be using the `for` method in `Javascript` and  `foreach` method in `PHP` to loop through the array and solve this problem. This isn't static so you can use any valid method to loop through the array in your preferred language.

Now, we can write the `Javascript` code as follows:
```javascript
function simpleArraySum(ar) {
   
   let sum=0;
   for( let i=0;  i<ar.length;  i++ ){
       sum+=ar[i];
   }
    return sum;
}
```

Now, we can write the `PHP` code as follows:

```php
function simpleArraySum($ar) {

   $sum=0;
   foreach($ar as $value){
       $sum+=$value;
   }
    return $sum;
}
```

#### Conclusion
This would return an output of the sum of the array as a single integer. When using the `for` method,  we are fetching the array elements based on their index so be careful not to do ` i<=ar.length;` in your condition statement. Avoid this common error because an array starts at index [0].

Congratulations!🎉🎈 You completed your first warmup challenge on HackerRank.

>P.S: This is the beginning of a series on the warmup algorithm challenges from HackerRank so stay tuned for more amazing challenges.
Angular: font-size e acessibilidade
Tags: angular, typescript, acessibilidade, fonte
Published: 2021-05-03 01:52:33

Diante do requisito para uma feature que possibilite alterar o tamanho da fonte em todo o projeto de forma dinâmica, como conseguir essa façanha em projetos Angular?

Bom, após procurar muito e não encontrar nada a respeito, eis a solução que compilei:

1) Torne explícito um valor font-size default para todo o seu projeto. Faça isso no arquivo style.scss ou .css, ou ainda, de acordo com o pré-processador utilizado no projeto.

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

2) Para todas as tags que possuem texto, atribua o valor de font-size utilizando a unidade de medida rem (cada 1 [rem](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) equivale 16px, valor definido por você no style.scss).

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

*Obs.: Esse tipo de atribuição de estilo inline não é o mais adequado, pois desta forma nosso html fica poluido e também não conseguimos aplicar estilos em cascata, reaproveitando o código. Aqui fiz assim somente para exemplificar a atribuição do font-size com rem.*

3) Crie um componente que será responsável por exibir essa e outras features de acessibilidade (normalmente se utiliza uma barra que fica no topo da header, conforme imagem que ilustra esse tutorial).

4) No template html declare 3 botões que invocam uma função e passam como parâmetro uma string.

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

5) No componente.ts implemente a função que será responsável por aumentar, diminuir ou resetar o tamanho da fonte.

Antes disso, declare a variável font_size que será responsável por armazenar o tamanho da fonte default que é o mesmo valor do estado atual.

Na implementação da função o primeiro passo é verificar qual dos botões foi acionando e com base nisso atribuir um novo valor à variável font_size.

Na sequência criamos uma variável local htmlRoot do tipo HTMLElement que recebe uma instância do DOM referenciando a tag html. No caso do Angular, é necessário informar que queremos referenciar a primeira declaração de html e fazemos isso adicionando [0] ao final da invocação do método getElementsByTagName().

Por fim, verificamos se a variável recebeu a referência do html, se sim, então atribuímos um novo valor ao font-size default do projeto, o mesmo que declaramos lá no style.scss.

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

Shazam! Nossa feature está pronta! Ao clicar no btn A+ o tamanho da fonte será acrescido de 1px, ao clicar em btn A- decrescido de 1px, e assim por diante.

Vale resaltar que a ação se propaga em todas as páginas, por tanto,não há necessidade de se implementar a função em outros componentes.

Para um Ctrl+c o código está no no meu [GitHub](https://gist.github.com/Karytonn/93dde46b048fea690efb5a0c201ef986).

É possível que esta não seja a solução mais adequada ou performática, mas funciona. ;)
NSX-T Edge Transport Node Packet Captures
Tags: datacenternetworking, homelab, nsxt, vmware
Published: 2021-05-03 16:40:52

---
title: NSX-T Edge Transport Node Packet Captures
published: true
date: 2021-05-03 01:36:00 UTC
tags: DatacenterNetworking,HomeLab,NSXT,VMWare
canonical_url: 
---

# NSX-T Edge Transport Node Packet Captures

NSX-T Edge nodes have a rudimentary packet capture tool built in to the box. It is important to have a built-in tool here, as GENEVE encapsulation will wrap just about everything coming out of a transport node.

NSX-T's [CLI guide](https://vdc-download.vmware.com/vmwb-repository/dcr-public/cc42e3c1-eb34-4567-a916-147e79798957/8264605c-a5e1-49a8-b603-cc78621eeeab/cli.html#set%20capture%20session%20%3Csession-number%3E) indicates the method for packet captures - from here we can break it down to a few steps:

- Find the VRF you want to capture from
- Find the interface in that VRF you want to capture from
- Capture from this interface!

```
get logical-routersvrf {{ desired VRF }}get interfacesset capture session 0 interface {{ interface-id }} direction dualset capture session 0 file example.pcap
```

The result will be placed in:

```
/var/vmware/nsx/file-store/
```

I do have some notes to be aware of here:

- Be careful with packet captures! This is on an all-CPU router - so isolating the device before capturing packets is a wise choice. We can do that with NSX-T, we just need to remember to.
- It's possible to use tcpdump-based packet filters instead of a wholesale capture - just replace the final line with a command similar to this:

```
set capture session 0 file example.pcap expression port 179
```
React Query: Fetch, cache, and update server data using queries and mutations!
Tags: react, showdev, javascript, beginners
Published: 2021-05-03 01:29:22

---
title: React Query: Fetch, cache, and update server data using queries and mutations!
published: true
tags: react, showdev, javascript, beginners
---

[In this video](https://youtu.be/aLQbVd-2tIo) we discuss introducing React Query to a ReactJS application. React Query provides a hooks API which allows you to fetch, cache, and update data. At first glance it seems like just a simple library, however you'll find out that it is packed with features which pretty much handle most of the server state management concerns that you might have in any client application. This includes things like automatically de-duping requests, background refreshing, caching, optimistic updating, accessing data globally and several others.

If you make React Query manage your server state, you'll find that the remaining client state that requires management becomes VERY small and likely will remove the need for more complex solutions like Redux. This is state management solution that you absolutely should know about if you're a React developer!


{% youtube aLQbVd-2tIo %}
C.A.L.M.S - The DevOps Core Values 
Tags: devops, culture
Published: 2021-05-03 01:19:39

CALMS is an acronym for Culture, Automation, Lean, Measurement, and Sharing. These are the foundational values of DevOps practice. Below are some thoughts on them:

**Culture**
1. Culture is a major factor in DevOps because it is the primary human factor.
2. Notwithstanding technology, the core of our problem is related to people and their behavior.
3. If we have a bad culture, other aspects of DevOps will only enhance and magnify our bad culture.

**Automation**
1. Automation/CI/CD only helps to accelerate and enhance the benefits of DevOps as a whole. It doesn't correct human problems.
2. Here we use CI Toolchains, Test Frameworks, Artifactories, Cloud services

**Lean**
1. Simply, lean means creating more value for customers with fewer resources. The aim is to reduce waste.
2. You should learn to have Minimum Viable Products. Every feature doesn't have to come fully grown...

>
   a. Implement the basics, then from user feedbacks and other necessary inputs, mature the feature
   b. Many times the developers' consent should be consulted in modifying and maturing a feature.

3.Every feature should also be broken down into basic stories so that it can be...

>
  a. Easily built, monitored, and tagged
  b. Easily isolate failures
  c. Easily tested
  d. Easily digested when pushed into the pipeline

**Measurement**
1.In DevOps, progress must be tracked.
2.Some Metrics that can be tracked are...
>
  a. User satisfaction and feedback
  b. MTTR: Mean Time  To Recovery - The time it takes for our 
  c. system to be fully working after a downtime
  d. MTBT: Mean Time Between Failures - The average time 
    between two downtimes
  e. Income
  f. Cost
  g. Deployment Frequency
  h. Release Frequency
Note: _Working software successfully delivered by sound systems is the primary measure of progress._

**Sharing**
1.This basically has to do with communication. Transparency and openness are key here.
2.The Operations and Developers should be able to communicate with utmost good faith.
3.developer should always communicate his architecture with the Team Lead(and team if necessary), PM(Product Manager if need be) before implementing his task. To avoid repeating the task and to reduce WIP(Work in Progress) time
4.Costly faults should be communicated to the team lead or escalated(if need be) to find the best possible ways to mitigate such.