teleren/devto huggingface dataset:
Entrega ágil com Scrum
Tags: scrum, agilidade, agile
Published: 2021-06-30 11:38:24

Pessoal, hoje vou "falar" um pouco sobre [metodologia ágil](https://agilemanifesto.org/iso/ptbr/manifesto.html). Vantagens, motivação e aplicação. Mais especificamente sobre o Scrum. Vamos direto ao ponto.

O Scrum é um framework gestão de projetos, fundamentalmente construído com base em experiências adquiridas durante o próprio processo de desenvolvimento. Ou seja, as demandas, pessoas e prioridades são construídas com base em decisões passadas e aprendizado.

![Ciclo Scrum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zv2toqc1oa1zv6uhugui.png)

Esta característica é marcante devido ao foco de aplicação do scrum em projetos com incerteza ou pouco conhecimento do produto final. Sendo assim, a equipe scrum deve estar sempre apta a trabalhar em um ambiente de constante mudança.

O scrum também sugere a participação constante do cliente na construção do produto desde o início, fornecendo feedbacks constantes em ciclos previamente definidos.

## Cerimônias e Termos

São vários os termos utilizados no Scrum. Dentre eles, podemos destacar alguns principais. Como dito anteriormente, o scrum trabalha em ciclos definidos e estes ciclos são compostos de etapas recorrentes.

Tudo começa com a definição de tempo de ciclo de tarefas, conhecidas como Sprints. A cada Sprint é definido a lista de atividades a serem desenvolvidas e entregues no ciclo (o Sprint Backlog), numa reunião chamada Product Planning.

![Daily Scrum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wmydokt14gtyxb5mo9v.png)

Durante a fase de desenvolvimento, em cada ciclo, é feita uma reunião diária conhecida como Daily, na qual a equipe fica de pé e cada integrante comenta de forma breve sobre o status do andamento da suas atividades.

Logo ao final da Sprint, é realizada uma reunião que reune dois conceitos do scrum (Sprint Review e Sprint Retrospective) com a finalidade de revisar o que foi feito, entender o que deu certo ou errado e fazer alterações no Backlog de atividades do produto, se necessário.

## Papéis

As equipes que trabalham com o Scrum são pequenas e tem papéis bem definidos. Existe o Product Owner, que é o responsável pela entrega do produto ("Dono do produto"). Já o Scrum Master lida com a manutenção do Scrum, reuniões e comunicação e fluidez de trabalho do time. Por fim, a equipe também conta com os desenvolvedores do produto.

![Scrum master](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zlqdbss31tae2uiweesj.png)

O Product Owner (PO) também é responsável pela gestão do Product Backlog e priorização do que é mais importante. 

O Scrum é amplamente utilizado em ambientes de desenvolvimento de software, porém, ele pode ser adaptado para desenvolvimento de produto em geral, principalmente em projetos de alta complexidade, pelo fato de fazer entregas rápidas, baseadas em feedback do cliente e aprendizado constante.

---

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀
Automating your Web Profile using React JS
Tags: react, javascript, html, css
Published: 2021-06-30 11:16:42

As a Lazy Developer, I used to feel that we’re writing too much code, but getting only peanuts in terms of output. Why not we change this by automating a lot of things? Welcome to the world of scripting & automating based on data. 🔥

Today, we’re going to look at how we can automate a Personal Portfolio data. The first thing is that we need to capture the contents of the person, then we need to use some mapping techniques to create HTML & CSS out of it. ⚙

To do this, we’re going to create a React JS based User Interface and this is going to generate a JSON data based on the forms that we fill in. This JSON data will be used to convert the data into a beautiful website that you can flaunt! 😁

---

Haven’t you got much time to spend? ⏰ No worries, check out this one-minute trailer here:

[![Trailer](https://i.imgur.com/282kvqhl.png)](https://youtu.be/6FNWuWY76vY)

Or, if you’re interested in the full workshop, the primer of the series, check this out. Wait for more, BTW! 🔥

[![Full Picture](https://i.imgur.com/282kvqhl.png)](https://rb.gy/tnmysh)
Angular Material Responsive Sub Navigation Menu
Tags: angular, material, webdev, uiweekly
Published: 2021-06-30 10:09:15

Navigation Menu has multiple links to show categories with a click/hover more sub category’s. So here we made Responsive Sub Navigation Menu in Material Angular with CSS.

In this Navigation Menu, we used Angular Material components and also modify CSS classes. Here we used a menu with and ripple effects on clicks. Also, we used a responsive side Expansion Panel. To show all sub-links in expandable details views. To make a clickable toggle we used material icons and functions. These fully responsive and mobile-friendly elements.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/angular-material-responsive-sub-navigation-menu/)
Similarity Search: Measuring Meaning From Jaccard to Bert
Tags: machinelearning, python, deeplearning, datascience
Published: 2021-06-30 09:45:23

[Semantic Search: Measuring Meaning From Jaccard to Bert](https://www.pinecone.io/learn/semantic-search/)

I put together this article covering six of the most popular similarity search techniques. Three *traditional*, and three *vector-based*. Which are:

**Traditional**:

* Jaccard Similarity

* w-shingling

* Levenshtein distance

and **Vector-based**:

* TF-IDF

* BM25

* Sentence-BERT (SBERT)
How to navigate and switch components with BrowserRouter
Tags: react, question, browserrouter, navigation
Published: 2021-06-30 09:41:08

I want to switch between components after the user entered the requested info. 
<br> Components that will be shown to user by this order:
1. {MobileNum } Enter mobile number
2. {IdNumber } ID number
3. {CreatePassword } Create Password
 
When all these steps are completed the browser will switch to the home page.
The first time user must **not be able** to move between pages until he filled each request.

Without using `*React Router*` I used to switch only two components with a conditional rendering  

Now I definitely want a better way with `BrowserRouter` as if I had 3-4 components inside `Login`.


    import React, { Component } from 'react';
    import {
      BrowserRouter as Router,
      Redirect,
      Route,
      Switch,
    } from 'react-router-dom';
    import MobileNum from './MobileNum.jsx';
    import IdentNumber from './IdNum.jsx';
    import CreatePassword from './createPassword .jsx';

    class Login extends Component {
      constructor(props) {
        super(props);
      }

      render() {
        return (
          <div>
            <Router>
              <Switch>
                <Route path='/'  component={MobileNum} />                                                
                <Route path='/'  component={IdNum} />
                <Route path='/'  component={CreatePassword } />
              </Switch>
            </Router>
          </div>
        );
      }
    }

    export default Login;


I searched the web in *reactrouter.com* and many others as here for a clean solution but found no answer.
<br> **Any Idea what's the best way to do it ?**
 
**Thanks**
What is Blazor WebAssembly
Tags: blazor, webassembly, webdev, component
Published: 2021-06-30 09:39:37

In this video, we will understand what is Blazor WebAssembly, but before that, let's first understand how are web applications developed today.

https://www.pragimtech.com/blog/blazor-webAssembly/what-is-blazor-webassembly/

Syncfusion Website: https://bit.ly/2TiIEnC

Syncfusion Blazor Components:https://www.syncfusion.com/blazor-components

{% youtube 15qgIEbMkQY %}
Creando una API Gateway en .NET Core con Ocelot
Tags: architecture, netcore, microservices, apigateway
Published: 2021-06-30 09:20:51

¿Tienes muchas APIS/microservicios y no quieres exponer los endpoints publicamente por temas de seguridad? ¿Tus apps externas necesitan hacer múltiples llamadas entre tus microservicios para poder obtener todo lo que necesitan? Un API Gateway te puede ayudar a solventar estos problemas.

En este video con @rogervinas te enseñaremos a como crear un API Gateway desde cero usando .Net Core y Ocelot y te explicaremos sus principales ventajas y como poder aplicarlo en tu trabajo.

YouTube: {% youtube zklBV7_7Nao %}


[0:00](https://www.youtube.com/watch?v=zklBV7_7Nao)  Presentación
[1:55](https://www.youtube.com/watch?v=zklBV7_7Nao&t=115s)  ¿Crees que repites mucho código en cada nuevo microservicio?
[3:27](https://www.youtube.com/watch?v=zklBV7_7Nao&t=207s)  ¿Haces sufrir a tus frontends o quieres ser su backend favorito/a?
[4:34](https://www.youtube.com/watch?v=zklBV7_7Nao&t=274s)  Flujo de llamadas sin Api Gateway
[6:16](https://www.youtube.com/watch?v=zklBV7_7Nao&t=376s)   Flujo de llamadas con Api Gateway
[7:28](https://www.youtube.com/watch?v=zklBV7_7Nao&t=448s)   ¿Que es una Api Gateway?
[8:03](https://www.youtube.com/watch?v=zklBV7_7Nao&t=483s)    Api Gateways del mercado
[9:07](https://www.youtube.com/watch?v=zklBV7_7Nao&list=PLaZLZgOTnV42vfA4zGnNmw_ZCeoHaA8-G&index=6&t=547s) ¡Demo time!
[10:40](https://www.youtube.com/watch?v=zklBV7_7Nao&list=PLaZLZgOTnV42vfA4zGnNmw_ZCeoHaA8-G&index=6&t=640s) Añadimos Ocelot al proyecto
[16:10](https://www.youtube.com/watch?v=zklBV7_7Nao&list=PLaZLZgOTnV42vfA4zGnNmw_ZCeoHaA8-G&index=6&t=970s) Rutas simples
[22:28](https://www.youtube.com/watch?v=zklBV7_7Nao&list=PLaZLZgOTnV42vfA4zGnNmw_ZCeoHaA8-G&index=6&t=1348s) Rutas con wildcard
[28:42](https://www.youtube.com/watch?v=zklBV7_7Nao&list=PLaZLZgOTnV42vfA4zGnNmw_ZCeoHaA8-G&index=6&t=1722s) Agregación
[46:25](https://www.youtube.com/watch?v=zklBV7_7Nao&list=PLaZLZgOTnV42vfA4zGnNmw_ZCeoHaA8-G&index=6&t=2785s) Autenticación
[55:34](https://www.youtube.com/watch?v=zklBV7_7Nao&list=PLaZLZgOTnV42vfA4zGnNmw_ZCeoHaA8-G&index=6&t=3334s) Autorización
[1:00:35](https://www.youtube.com/watch?v=zklBV7_7Nao&list=PLaZLZgOTnV42vfA4zGnNmw_ZCeoHaA8-G&index=6&t=3635s) Rate Limiting
[1:03:12](https://www.youtube.com/watch?v=zklBV7_7Nao&list=PLaZLZgOTnV42vfA4zGnNmw_ZCeoHaA8-G&index=6&t=3792s) Lógica Custom
[1:11:15](https://www.youtube.com/watch?v=zklBV7_7Nao&list=PLaZLZgOTnV42vfA4zGnNmw_ZCeoHaA8-G&index=6&t=4275s) Resumen

Y aquí tienes el código en Github (quitando la parte del bearer token en la configuración de ocelot)

{% github jhonmarmolejo/apigatewayNetCoreOcelot no-readme %}

Hasta la próxima!


[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4lwacmmgrq68jx08b96.png)](https://careers.adevinta.es/ofertas/?search=backend&stc=aff-blog%20dev.to-creando%20una%20api%20gateway%20en%20.net%20core%20con%20ocelot)
Nodejs or PHP for the backend
Tags: node, php, beginners
Published: 2021-06-30 08:41:25

For a self-thought developer like myself who basically dabbled into backend development, php was probably a more welcoming language. A great community and an easy to digest syntax. I’m pretty sure when you wrote your first program that worked on the browser you felt pretty badass. 

Going on as you advance, from an absolute beginner to a beginner (lol), you probably start to get erky with the amount of extra software to run a server. Database management and server maintenance which comes with apache pretty much helps a lot in reducing the difficulty with setting up and maintaining a database. 

So if you are a frontend developer looking to learn backend technologies, php might be a great start, but if you are conversant with JavaScript, to reduce the extra time spent learning new syntax, it might be better to stick with Nodejs. 
Nodejs is a JavaScript framework that gives you more control in managing the backend of your web based application. 
I wish you the very best in your learning activity!
Easy Way to Access Dom Using Vue 3 Refs Example
Tags: vue, vue3, ref
Published: 2021-06-30 08:35:41

Using Vue's ref property, you can easily read files from <input>. By specifying input type to file and giving the <input> tag a ref property, you can pull the file into your methods and manipulate it as you deem fit. Here is the code to preview the selected image.

[Easy Way to Access Dom Using Vue 3 Refs Example](https://www.codecheef.org/article/easy-way-to-access-dom-using-vue-3-refs-example)
A Faster Free Heroku (Kinda) | Quick Hack
Tags: webdev, beginners, cloud, heroku
Published: 2021-06-30 08:27:24

If you've been building stuff on web for a while now, you've probably heard of **HEROKU** and **NETLIFY**

Just-In-Case you haven't heard about it

## Quick Intro on Heroku and Netlify
1. ***Heroku***: A **free** PaaS (Platform as a Service), basically a cloud service that let's you **host** and **share** your web apps.
2. ***Netlify***: A **free hosting service** for **static sites**, basically react, vanilla javascript, etc projects.

> _**NETLIFY** is Usually Used on **Frontend Projects**._
> _**HEROKU** is Usually Used on **Backend Projects**._
![Netlify + Heroku](https://www.fabiofranchino.com/assets/posts/how-to-deploy-webapp-heroku-netlify/cover.jpg)

## The Problem with Heroku
### Pro's:
1. Heroku is Easy to Use. 
2. Heroku is Free.

### Con's:
1. Heroku has Premium

![3 sec](https://www.hostingmanual.net/wp-content/uploads/website-speed-3seconds.png)

Heroku's **free tier** uses dynos (Stuff That Hosts Your Code) that **sleeps** after **30 mins of inactivity**

Once a dyno falls asleep, It takes time for it to awaken.
So the initial response is slow and the damage is already done.

## Work Around

Re-Read This Line
> Heroku's **free** tier uses dynos (Stuff That Hosts Your Code) that **sleeps** after **30 mins of inactivity**

If You Haven't Got It Yet, Re-Read It Again
> Heroku's free tier uses dynos (Stuff That Hosts Your Code) that sleeps after **30 mins of inactivity**

💡Light Bulb💡
> 30 mins of inactivity

All We Need To Do is Do Something Every 30mins.
Nah 15mins to be on the safer side

For node.js dev(s) Out There
```
// Run Every 15 mins => 900 secs => 900000 ms
setInterval(()=>console.log("😂😜🤣🤓"),900000)
```

GGWP,
[@LucidMach](https://twitter.com/LucidMach)
 ✌
ShesReady2.dev
Published: 2021-06-30 07:57:34

what if you worked on a product that excites you? I created a simple website that help product and engineering ladies find jobs in startups https://www.shesready2.dev/ there is also a slack community. This is a personal project that I do in my free time, does not have any corporate sponsors. DM and happy to share the list of 36 jobs, from entry level all the way up to head of product and head of engineering to startups of all sizes. I'm currently in VC, former ML eng and that's how I curate the jobs.Totally a passion project and free.
Schema first workflows for Graphql development using codegen and Typescript
Tags: typescript, graphql, tutorial, workflow
Published: 2021-06-30 07:49:29

## Introduction
A strictly typed schema is one of the great benefits of using Graphql. This schema acts as a contract between the backend and the frontend. When working on products that use Graphql as the backend API layer, I observed 2 types of working arrangements between team members :

1. Same developer owns the backend work and the front end work. In this scenario the graphql schema evolves alongside the front end code and requirements.
2. Multiple (2 or more) developers of same or different teams collaborate on different parts of frontend and backend

This write-up aims to address the second point where developers working on different parts of the app or feature need to do the following things:

1. Understand the UI needs
2. Understand the data needs of the UI
3. Define a Graphql schema that acts as a data contract between frontend and Graphql code.
4. Repeat #3 if there is a change in #1 and/or #2

This way of working is not new. Same can be applied if the API speaks REST (via a Swagger Spec) or gRPC (via ProtoBuf definition). We will focus only for the case where Graphql is the technology chosen.

## Workflow
Lets imagine a simple Graphql Schema that defines data and operation for a Super Hero and Villain catalogue
```GraphQL
enum Affiliation {
  GOOD
  EVIL
  UNDECIDED
}
type Character {
  id: ID!
  name: String!
  affiliation: Affiliation!
  rank: Int!
}
type Query {
   characters: [Character]!
   character(id: ID!): Character!   
}
input NewCharacterInput {
  name: String!
  affiliation: Affiliation!
  rank: Int!
}
input CharacterUpdateInput {
  id: ID!
  name: String
  affiliation: Affiliation
  rank: Int
}
type Mutation {
   addCharacter(newCharacter: NewCharacterInput!): Character!
   updateCharacter(update: CharacterUpdateInput!): Character!
}
type Subscription {
   characterAdded: Character!
}
```
### The front end developer workflow
Lets assume we want to build the front end using React and Typescript. We have chosen to use Apollo as the library to talk to the API.
✨✨✨✨
🦾  Enter [Graphql Code Generator](https://www.graphql-code-generator.com/)

### The API/Backend developer workflow
On the backend it is paramount that we abide by the Graphql schema as the contract and use that contract as the basis for ensuring the type safety of the `request`, `response` and `resolver` types in our graphql code.
✨✨✨✨
🦾  Once again [Graphql Code Generator](https://www.graphql-code-generator.com/) saves a lot of work for us
The Weird Case of Streaming in Safari
Tags: safari, webdev
Published: 2021-06-30 07:36:59

Last week I had the pleasure of having to write some code in order to get Safari to stream video. There are plenty of other valuable blog posts out there explaining how to do it. But the gist of it is to support the [Range](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Range) header, and to make sure the **url ends with an extension**.

## Returning partial content through HTTP
Basically the `Range` header is a way for the browser to tell our server how much of a resource it wants. The server in turn responds with status [206 partial content](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/206), with more headers telling the browser how much content is left to be consumed.

Safari won't render a video unless we support partial content response, in fact we can see that Safari actually tests us.
![Safari network tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug9w1jch4wpyg8ioix1c.png)
You can see that safari splits the request for the video resource into two. The first requests only requests the first 2 bytes, if we fail to respond with 206 Safari will not render the video.

Although my server responded correctly, Safari still won't play the video.

## Content type and Safari
I couldn't figure out what was wrong. The video was obviously formatted correctly, because when I just link to the file locally it would play. The [Content-Type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) was correct, so was the [type attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type).

Then I tried to add a file extension, I was out of ideas, I changed the route from `/video` to `/video.webm` and it worked! Apparently Safari checks three things in order to determine the type of a resource to be a video. The type attribute must match the `Content-Type` header, and the url must end with a matching extension.

## Conclusion
Safari doesn't follow the path of other browsers when it comes to streaming videos, in order to get videos to stream on Safari make sure to follow these guidelines
- Support 206 partial content
- Return the correct `Content-Type` header and `type` attribute
- Add a matching file extension to the video `src` URL

A working WebM example can be found [here](https://github.com/corevo/safari-video-streaming), cheers!
Scroll bottom when message recieve in chat reactjs
Published: 2021-06-30 07:33:49


```javascript
  const messagesEndRef:any = useRef(null) 
const scrollToBottom = () => {
    if (messagesEndRef) {
      messagesEndRef.current.addEventListener('DOMNodeInserted', (event:any) => {
        const { currentTarget: target } = event;
        target.scroll({ top: target.scrollHeight, behavior: 'smooth' });
      });
    }
  }

 <div style={{height:"73vh",overflowY:"scroll",marginBottom:"50px"}} ref={messagesEndRef} >
      {messages &&
        messages.map((message:any) => 
          <ChatItem
            key={message.index}
            message={message}
            email={user.attributes.email}/>
        )}
    
      </div>
```
Perform cross-browser testing quickly and easily with Comparium
Published: 2021-06-30 06:54:10

Live testing is an integral part of web development that's why you want to be confident your site doesn’t have any glitches in functionality. Nowadays testers face the issue of thousands of new devices, browsers and OSes they need to run tests through. One of the best testing tools, Comparium, comes to the rescue.

With Comparium you can test your pages across multiple different browsers, including Firefox, Safari and [Opera browsers emulator](https://comparium.app/opera-emulator.html) as well as plenty of other important options.
Use class mapping to avoid decorating classes and properties with MongoDB specific attributes.
Tags: mongodb, classmapping
Published: 2021-06-30 06:47:56

Let say we are developing a backend server for a game. The backend use c# (asp.net core) and mongodb as the database. One requirement is that WE CAN MODIFY THE DOMAIN MODEL. For example, our costumer uses the Player.cs class below in his game and ask us to save and retrieve it in the database.
We can code it like 
```lang-csharp
public class Player
    {
        public string PlayerId { get; set; }
        public string Name { get; set; }

    }
```

Normally if we have access to the model, we will probably add a lot of attributes to tell the database how to store data and optimize queries.
For example, to let the database know that the property PlayerId should be the primary key, we can simply add the BsonId attribute to the PlayerId property. 
using MongoDB.Bson.Serialization.Attributes;

```lang-csharp
namespace Commons
{
    public class Player
    {
        [BsonId]
        public string PlayerId { get; set; }
        public string Name { get; set; }

    }
}
```

We can achieve the same thing without modifying the player.cs class. For that we can use class mapping feature provided by the mongodb csharp client library.
It is very important that the registration of class maps occurs prior to them being needed. The best place to register them is at application startup prior to initializing a connection with MongoDB.
You can add the following code in program.cs 
```lang-csharp
BsonClassMap.RegisterClassMap<Player>(cm =>
            {
                cm.AutoMap();
                cm.MapIdMember(c => c.PlayerId)
                    .SetIdGenerator(new StringObjectIdGenerator())
                    .SetSerializer(new StringSerializer(BsonType.ObjectId));

                cm.SetIgnoreExtraElements(true);
            });
```


The code `cm.AutoMap();` uses default conventions  to map the class and its members.(http://mongodb.github.io/mongo-csharp-driver/2.0/reference/bson/mapping/conventions/)
the code `cm.MapIdMember(c => c.PlayerId)` tells the database to use the property PlayerId as the primary key.

The primary key of a mongodb document is of type ObjectId (custom type defined by mongodb), but we want our PlayerId to be a string ,  we tell that to the database using the code    `.SetIdGenerator(new StringObjectIdGenerator())` and we use the code 
`.SetSerializer(new StringSerializer(BsonType.ObjectId));` to convert it back to a string when we query the database.

There we go, we are able to specifically tell the database how to work with our domain model, without having to modify it. Very powerful.
There is much more we can do with class mapping in mongo db.
http://mongodb.github.io/mongo-csharp-driver/2.0/reference/bson/mapping/

Thanks