teleren/devto huggingface dataset:
(Late) Hacktoberfest 2021 x Monstarlab Prague
Tags: hacktoberfest, opensource, meetup
Published: 2021-11-14 18:47:11

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqml0jxm42bnsebu4g3i.png)

COVID19 made IT conferences and meetups virtual. It feels still more natural to me to meet people, exchange ideas and socialize. Surprisingly, an e-mail landed to my inbox one day:

> Hello Fridolín!
> 
> My name is Tiago, I'm organizing once again the Hacktoberfest in Prague and I found your profile on GitHub and would like to ask you if you're interested in joining us in the event and maybe do a small talk (around 20-25min) related to open source.
> %< snip >%

That's how the invite to "[(Late) Hacktoberfest 2021 x Monsterlab Prague](https://www.meetup.com/Monstarlab-Prague/events/281441439)" looked like. The conversation with [Tiago](https://www.linkedin.com/in/taraujodesouza/) resulted in an accepted talk titled "[Full-time Open Source](https://www.youtube.com/watch?v=-Kcrx3ASbaw&list=PLokviu1ft5w3HupZRe2hZK9jG37eEo4YG&index=5)". The whole meetup was in a very friendly atmosphere with different topics from various areas of open-source (... of course, the pizza was tasty! 😋🍕).

Check [Hacktoberfest 2021 @ Monsterlab Prague playlist on YouTube](https://www.youtube.com/playlist?list=PLokviu1ft5w3HupZRe2hZK9jG37eEo4YG) with talks recorded. Big thanks to Tiago and other meetup organizers. I would definitely recommend watching interesting talks and hopefully seeing everyone who is interested in open-source joining this meetup next year.

If you are not familiar with Hacktoberfest, [visit their homepage](https://hacktoberfest.digitalocean.com/) to change the world with open-source and win a cool t-shirt or (newly) [plant a tree](https://tree-nation.com/profile/digitalocean)! 👕🌲
Learning Svelte Part #4
Tags: svelte, javascript, webdev, beginners
Published: 2021-11-14 18:44:14

## Props and Components

Hello developers, welcome back to my series of articles about my journey to learn Svelte, this is my 4th post about it, and so far it’s very helpful for my learning, writing down my steps make it public make a good contribution to my knowledge.

Today I am writing about Props and Components.

Normally, a Svelte website is made with of many different components: App.svelte, Header.svelte, Content.svelte, Footer.svelte and so on. 
All this components will be structured to make up the full page, the root component it’s the App.svelte, this component will be directly deployed in the Dom by the main.JS file.

We will nest all the others components with it.

![Svelte components structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikujhpxpf5hked6f6dnm.png)

The question is: why we need to split our webapp in so many different pieces and not write all the code in the App.svelte root component?
The main reason is to keep your code easy to read, tidy and modular.
 Imagine we put everything in one module, the chances that our code will be disorganized are very high.

Another reason to split in different modules is that with this method we can easily reuse it, we can create components to use whenever we need.

We can easily import our components in the App.svelte  using the syntax import

![Script hero](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5je3lsnog2qy3xmc0cmf.png)

And then we will display it in our  HTML like in the follow example:

![hero](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyzubw0y8283hlo6bq6n.png)

If we want to change any data in the reused component, we can do that, using props.

How can we pass props to a component?

We need to declare the props we want to pass in, in the component itself, we can call it how we like it and we need to set it to a value that ca be: a string, an object, could be an integer. When the components it’s created it will read the props and the value

![properties ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5mxcy99yy3w8iu77c2r.png)

To access the prop inside the Footer component we need to declare that we are going to use that variable called “prop” (you can name it how you like most) 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsbtde7r3rf66x2xwp4y.png)

We declare the variable “prop”,  and set to “export” , so now this way we can access the value outside the component.

That’s it for my contribution today, it’s difficult for me write in English but I will keep going, please feel free to leave a comment and roast my explanation.
Binary/Hex Conversion in Linux Shell with xxd [RE#13]
Tags: article, shell, linux, productivity
Published: 2021-11-14 19:01:44

---
title: Binary/Hex Conversion in Linux Shell with xxd [RE#13]
published: true
date: 2021-11-14 18:30:00 UTC
tags: article, shell, linux, productivity
canonical_url: https://babakks.github.io/article/2021/11/14/re-013-binary-hex-convertion-in-linux-shell-with-xxd.html
series: Regular Encounters
---

It’s not that unusual to need to see/check/verify the binary output of a shell command in HEX format. Clearly, I mean without picking up a HEX editor or something like that. Last time, it happened to me a few days ago when I was to inspect the content of a base64-encoded string. The tool to the rescue is (of course not limited to) `xxd`. 🏅

Using `xxd`, to get the HEX representation for some binary content you just need to call it with no argument:

```sh
echo -n 'Computer says: "Hello World!"' | xxd
```

Depending on the case it could be more insightful to also have the ASCII values column. That’s simply done by calling `xxd` with `-C` option:

```sh
echo -n 'Computer says: "Hello World!"' | xxd -C
```

Which results in such a neat output:

```text
00000000: 436f 6d70 7574 6572 2073 6179 733a 2022 Computer says: "
00000010: 4865 6c6c 6f20 576f 726c 6421 22 Hello World!"
```

Also, `xxd` can do things the other way. For instance, may you need to turn a HEX string into a binary content, just call `xxd` with `-r` option, like this:

```sh
echo -n "0x48656c6c6f20576f726c6421" | xxd -r
```

Which would result in:

```text
Hello World!
```

There are more `xxd` options which you can find by checking:

```sh
xxd --help
```

or

```sh
man xxd
```

* * *

**_About Regular Encounters_**  
_I’ve decided to record my daily encounters with professional issues on a somewhat regular basis. Not all of them are equally important/unique/intricate, but are indeed practical, real, and of course,_ **_textually minimal._**
How To Combine Flows In Kotlin
Tags: kotlin, coroutines, programming, flows
Published: 2021-11-14 18:23:41

Coroutines provides **combine**, **zip** and **flattenMerge** operators is used to combine emissions from multiple flows

### Combine

Combine   operator takes the latest emission from two flows and gives result 

```kotlin
import kotlinx.coroutines.*
import kotlinx.coroutines.flow.*

fun main() = runBlocking<Unit> {
   // gives 1..3 in every 300ms 
    val f1 = flowOf(1,2,3).onEach { delay(300) } 
    val f2 = flowOf("x", "y", "z").onEach { delay(400) }
    val startTime = System.currentTimeMillis() 
    f1.combine(f2) { num, str -> "$num -> $str" }
    .collect { result ->
        println("$result at ${System.currentTimeMillis() - startTime} ms from start")
    }
}
/**
1 -> x at 424 ms from start
2 -> x at 627 ms from start
2 -> y at 826 ms from start
3 -> y at 927 ms from start
3 -> z at 1226 ms from start
*/
```

### Zip - 
Let's take an example as above.  Each time emission occurs, zip operators waits for emission from other flow , when it occurs zip provide results in lambda expression as numbers and letters

```kotlin
import kotlinx.coroutines.*
import kotlinx.coroutines.flow.*

fun main() = runBlocking<Unit> {
    val f1 = flowOf(1,2,3).onEach { delay(300) } 
    val f2 = flowOf("x", "y", "z").onEach { delay(400) }
    val startTime = System.currentTimeMillis() 
    f1.zip(f2) { num, str -> "$num -> $str" }
    .collect { result ->
        println("$result at ${System.currentTimeMillis() - startTime} ms from start")
    }
}
/*
1 -> x at 437 ms from start
2 -> y at 837 ms from start
3 -> z at 1239 ms from start
*/
```
it will  stop execution when one of the flow is completed

```kotlin
import kotlinx.coroutines.*
import kotlinx.coroutines.flow.*

fun main() = runBlocking<Unit>{
    val f1 = (1..4).asFlow()
    val f2 = flowOf("Hi", "Hello", )
    f1.zip(f2){ a,b -> "$a -> $b"}
    .collect{
        println(it)
    }
}
/*
1 -> Hi
2 -> Hello
*/
```

### flattenMerge
It executes them as single flow ,it doesn't combines , it will not stop execution when one of the flow is completed (But **zip** operator does) 

```kotlin
import kotlinx.coroutines.*
import kotlinx.coroutines.flow.*

fun main() = runBlocking<Unit> {
    val f1 = flowOf(1,2,3,4).onEach{ delay(200)}
    val f2 = flowOf("H","O","L","A").onEach{ delay(400)}
     val startTime = System.currentTimeMillis() 
    flowOf(f1,f2).flattenMerge().collect { 
    println("$it at ${System.currentTimeMillis() - startTime} ms from start")
    }
}
/**
 * 1 at 238 ms from start
H at 438 ms from start
2 at 438 ms from start
3 at 639 ms from start
O at 838 ms from start
4 at 839 ms from start
L at 1239 ms from start
A at 1640 ms from start
 */
```
Resumen
Tags: node, netcore, programming
Published: 2021-11-14 18:19:01

Hola Amigos y bienvenidos a este vs entre dos tecnologías, en esta ocasion haremos un resumen de los que hemos venido Hablando.

## ¿NodeJS o .Net Core?
Como lo hemos dicho anteriormente, hablar de cada una y confrontarlas no es que queramos hacerte usar una o la otra, por el contrario, que tengas un panorama más amplio sobre cada una y los proyectos que pueden realizar en cada uno para que así completes el proyecto sin problemas, cada una tiene sus bondades para un proyecto en específico que la otra no posea y viceversa, queda a tu elección cual usar. Solamente ten en cuenta que para el lado web, tanto a nivel de cliente como servidor NodeJS es bastante rapido lo que lo hace un gran candidato y ganador es ese ambito, mientras que en proyectos transaccionales .Net Core se lleva el premio.

## Ventajas
|.Net Core|NodeJS|
|---------|---------|
|Es Multiplataforma| Es multiplataforma|
|Sistema de almacenamiento en cache confiable|Base de Código única y potente|
|Implementacion y mantenimiento flexible y sencillo|Escalabilidad e implementación seguras|

## Desventajas
|.Net Core|NodeJS|
|---------|---------|
|Soporte relacional de objetos limitado|Bloqueo de E/S|
|La brecha entre el lanzamiento y la estabilidad|Estandarización de librerias.|

## Tipos de Proyectos
|.Net Core|NodeJS|
|---------|---------|
|Web, mismas que pueden ser desplegadas en Windows, Linux o Mac OS|Aplicaciones de chat en tiempo real|
|Aplicaciones con Docker, en cualquiera de las nubes ya sea (Azure, AWS o GCP)|Aplicaciones web|
|Aplicaciones de Escritorio UWP lo que permite que tus apps sean ejecutadas en Windows 10, XBOX y HoloLens|Servicios de API Rest|
|IoT|IoT|
|IA|Streaming de datos|
|Desarrollo de juegos|Aplicaciones complejas de una sola Página|

En resumen, cada una de ellas está en continuo desarrollo para el soporte de distintos proyectos y arquitecturas, queda de tí implementarlos de la mejor forma.

Me despedido, y espero les agrade este vs, espero sus comentarios.

Imagen por [Marius Niveri](https://unsplash.com/@m4r1vs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/@m4r1vs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
My Experience with GitHub copilot
Tags: vscode, github
Published: 2021-11-14 18:11:30

Last week, I got my access to GitHub copilot. I was slightly skeptical about how much will this be useful before I started to use it.

Today I had installed my vs-code extension and logged into the account. Then started working on my personal project. Spent most of my time on refactoring my code today. There were suggestions which I felt not great when I was doing the code refactoring.

Then I had to write a simple utility to get Socket URL and Graphql URL based on the hostname and protocol. If the host is localhost we have to point to a local backend server which is running on different port. This is a very common use-case. When I started to code this utility I was amazed by the amount of code that was generated by copilot. The attached image has code is what we(me and copilot) have come up.

Out of the the 24 lines of code in the file, 11 lines of code was auto generated by copilot. This is close to 50% of the code. I crossed the line numbers which were generated by copilot.

Though at times the code generation is slightly slower, But once the tool matures it would be of great help to programmers. I feel that this will help developers with their productivity and improve the quality of code.

Let us see how these AI for coding will shape the future of application development.
O que é micro front end?
Tags: braziliandevs, webdev
Published: 2021-11-14 17:43:29

Olá pessoal, neste artigo vou explicar um pouco sobre o micro *front-end* e as vantagens que ele proporciona.

Antes de realmente explicar o que é micro front-end, vamos entender alguns outros conceitos como:

* Monolitos
* Separação do *front-end* e *back-end*
* Conceito de microsserviços

---

## Monolitos

Uma aplicação monolítica consiste em um *codebase* centralizado em uma única unidade, ou seja, *back-end* e *front-end* em um único repositório. Não há distinção estrutural de *front-end* pra *back-end* tudo está dentro do mesmo código fonte.

![Exemplo de monolito](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlt2gfnf558nxikix702.jpg)

### Problemas comuns em uma aplicação monolítica
Alguns problemas comuns de uma aplicação monolítica.

* Alta complexidade para corrigir *bugs*
* Dificuldades para implementar novas features
* Alto nível de interdependências no acoplamento de módulos
* Dificuldades na coordenação entre times
* Alto esforço para integração de novos desenvolvedores

## Separação do *front-end* e *back-end*

Com o passar do tempo, o desenvolvimento passou a diferenciar as bases de códigos do *back* e *front*. Isso ajudou a melhorar o cenário caótico de código que aplicações monolíticas traziam. 

![Separação do front-end e back-end](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwteh4eowqoi8kfresdo.jpg)

Isso permitiu que times conseguissem fazer *deploys* sem depender do outro.

## Microsserviços

Ainda neste contexto, surgiu o conceito de arquitetura de microsserviços. Quando falamos em microsserviços nos referindo a uma funcionalidade que pode ser dividida em partes menores. 

![Microsserviços](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0i13msy43uxnlu0psswy.jpg)

---

Depois de entender esses conceitos podemos, finalmente, falar sobre micro *front-ends*!

## Micro *front-ends*

Micro *Front-end* é um estilo arquitetônico que separa uma aplicação de front em várias camadas menores, cada uma sendo responsável por um módulo específico da aplicação, normalmente separadas por domínios ou contextos de uso, permitindo assim, que diferentes times cuidem dessas funcionalidades de forma independente.

![Exemplo micro front ends](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3p2phiwxtfaanw9lldx.png)

Na prática, negócios podem separar produtos web em micro *front-ends* dividindo seus times de acordo com as funcionalidades dos seus sistemas. 

![Exemplo micro front ends](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwwwgr5u09pitwhj1lq1.png)


Por fim algumas vantagens de uma arquitetura *micro front-end*:

* Mais facilidade na correção de bugs
* Facilidade na integração de novas pessoas no projeto
* Mais facilidade de implementação de novas *features*
* Facilidade na coordenação entre times
* Times mais independentes

---

Obrigado por ler esse artigo até aqui!

Este artigo foi escrito com a ajuda do **Vinicius Morellato**, siga ele no [Linkedin](https://www.linkedin.com/in/viniciusmorellato/)

Me siga nas redes sociais! https://links.jpres.dev

Até o próximo artigo!
Video: Trying Ubuntu Web OS with Intel Atom
Published: 2021-11-14 17:37:41

Over the weekend I tried Ubuntu Web OS after I saw Ubuntu Web OS over the last few days over the web especially the Tech Republic article. I had to try it, so here is my quick video trying it out on my 2GB Intel Atom Acer 2in1 Laptop.
Please check the video [here](https://www.youtube.com/watch?v=GoUA4Mr91To)

{% youtube GoUA4Mr91To %}

A full blog will follow soon....
Installing Git for version Control
Published: 2021-11-14 17:32:41

![git logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p69fe79asjw1d4bbigsz.png)
Git is a Version Control System commonly abbreviated as VCS, It can be used by GitHub, GitLab and Bitbucket
To install git head over to [git](https://git-scm.com/downloads) and choose your operating system to download.
After Installing open your command prompt and check your version by typing following command
``` 
git --version 
```
To configure git for version control with GitHub you need to login from the terminal by typing 
```
git config --global user.name "Your GitHub username"
git config --global user.email "Your GitHub email"
```
To initialize a new local repository use 
```
git init "your project name without the quotes"
```
To install a project from a remote repository i.e. from GitHub
```
git clone "paste the repository link"
```
Role of JAVA in Future
Published: 2021-11-14 17:29:42

Download the power of JAVA in your Pocket PC or Personal Computer.

Java is an object-oriented programming language which was designed to be platform independent. The idea behind Java was to not require any additional emulation layer on top of it to make it work on different operating systems.

Java has become one of the most popular programming languages used today. With the rise of cell phones, Java has found a new purpose. It began as a toy language for programmers to play with and now it is being used in the programming languages of Android, iPhone and other mobile devices.

Why Java?
Java is a very powerful language which is useful for many types of software development especially those dealing with the Internet, Mobile Devices and Internet of Things. Also, it can be used as a backend system for databases such as MySQL or PostgreSQL which are widely used in today's world.

In this article, we will discuss how to install JAVA on your Pocket PC or Mobile Device. We will also disclose how to develop Android Applications using JAVA programming language.

For More Information: https://tinyurl.com/4z5scw6v/
Password Encryption with Hash Function in Python
Tags: hash, python, cryptography, encryption
Published: 2021-11-14 17:20:00

Securing access to the secured part of applications or devices is commonly achieved by simply authenticating the users by requesting for the username and the password which is stored in the external database (either on the cloud or on local device but separated from the application using the data). The storage of the database in most cases are secured from unauthorised access.

![Sample Database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8lh6ptk5n5gn3zikprd.png)
 






Considering the information above supplied by different users and this is stored in a cloud database (e.g. Google firestore) as it is using the code below. 

**user= input ('Enter Username:')
pasw= input('enter password: ')
bs = db.document('SECURE_APP').collection('USERS').add({
        'Username': user,
        'Password': pasw
    })**    

Authenticating a user after creating the first credentials would follow this code:

**u= userdatabase.get('Username')**
**p= userdatabase.get('Password')**
**user= input ('Enter Username:')
pasw= input('enter password: ')
if pasw == p :
    print('Correct!')
else:
    print('Fail')**


This implies that the database administrator and those who have authority to such database can know the password of every users. That is not the only risk, a potential hacker that gains view only access into such database has won jackpot. This implies that all the users credentials into the application are exposed.

In order to secure the users information when it is stored in the database, some important information such as the password, pin-code etc are encrypted before storing into the database. One of the simplest and secured way of encrypting the data before storing into the database is using hash function. 

**What is Hash Function ?**
It is algorithm used in cryptography for data encryption as it takes data of arbitrary length (as input) and produce the fixed length of encrypted data as output. Hash function is irreversible. This implies that gaining access to the output of an Hash function, it is mostly impossible to get the input data.
As stated earlier, the data supplied for the password field can be hashed before writing to the database. Therefore, the following algorithm will be followed to store and retrieve the user’s detail.

-Take username and password
-Hash the password
-Store username and based password

Python code:

**user= input ('Enter Username:')
pasw= input('enter password: ')
bs = db.document('SECURE_APP').collection('USERS').add({
        'Username': user,
        'Password': hash(pasw)
    })**    


Authentication 
-Retrieve the username and hashed password from the database
-Take the username and password from the input device
-Hash the password 
-Compare the 2 hashed passwords together, if the same

Python Code:

**u= userdatabase.get('Username')
p= userdatabase.get('Password')
user= input ('Enter Username:')
pasw= input('enter password: ')
hp = hash(pasw)
if hp == int(p) :
    print('Correct!')
else:
    print('Fail')**
Authentication, Authorization, and Football 
Tags: beginners, webdev, codenewbie, csharp
Published: 2021-11-14 17:18:38

It’s Sunday fun day, let’s take a casual look at authentication vs authorization. More importantly, what's the difference? Since it’s Sunday and is football season, I’m going to give you a loose analogy.   I think that we need to nail down our idea of both authentication and authorization. So let’s break this down: Authentication verifies who the user is while Authorization determines what resources a user can access. I’m a Las Vegas Raiders fan. Let’s say I’m going to a Raiders home game. I’m at the Allegiant Stadium gate, I show them my ticket. I walk in at that point I become authenticated. The next step is I want to go and see where my seat is located. When I sit down in my seat then I become authorized for this seat. I realize that I have some time before the game so I want to walk around. I’m authorized to get concessions, souvenirs, stores, other permitted areas, and even the restrooms.  I’m only permitted to the men’s restroom or family bathroom. I’m not authorized to go to the women’s restroom.  There are a lot of places that I’m not authorized or permitted to go to. Unfortunately, I don’t have access to the owner’s box. I can’t tell Mark Davis my thoughts about the team and what he should do next. I think though I’ve played enough Madden that I think I would be an amazing general manager or at least an offensive coordinator. There are a lot of places that I can’t go to, locker rooms, sidelines, and various locations.  When you think about authentication this verifies who the user is. Think this is my login. I have access to this website. Authorization determines what resources a user can access. I hope everybody's prospective team wins, except the The Chief they are paying the Raiders. It’s Raider Nation For Life over here.

Until the next time #KeepBringingThatFullStackEnergy

BK