teleren/devto huggingface dataset:
Mongock: Ferramenta para migração de dados Mongo e Java/Kotlin
Tags: java, kotlin, mongodb, database
Published: 2022-09-30 14:19:04

Mongock é uma ferramenta de migração baseada em Java como parte do código do seu aplicativo para ambientes distribuídos. Ele permite que os desenvolvedores executem migrações mais seguras tendo propriedade e controle sobre as migrações de dados durante o processo de implantação do aplicativo, pois as alterações de código e dados são enviadas juntas.

As ferramentas de migração de banco de dados são essenciais em aplicativos onde você precisa migrar dados para um banco de dados, alterar um esquema, atualizar um registro/documento em todos os ambientes e onde é tedioso fazer isso manualmente ( quase sempre? ). Isso também pode ajudá-lo a acompanhar as alterações feitas, assim como o controle de versão.

Com Java, existem várias bibliotecas que você pode usar para esse propósito. Há **Liquibase , Flyway , Mongock** e talvez mais.


Para usar o mesmo com um Java, você precisaria das seguintes dependências (além dos dados do Mongo Java Driver/Spring Mongo que você usaria para configurar o aplicativo de qualquer maneira):

- [Mongock BOM](https://mvnrepository.com/artifact/com.github.cloudyrock.mongock/mongock-bom)
- [Mongock runner](https://mvnrepository.com/artifact/com.github.cloudyrock.mongock/mongock)
- [Mongock driver](https://mvnrepository.com/artifact/com.github.cloudyrock.mongock/mongock-spring-v5)
- [MongoDB driver sync](https://mvnrepository.com/artifact/org.mongodb/mongodb-driver-sync)

Ao importar o acima, tudo o que você precisa fazer é:

- Anote a classe do aplicativo com`@EnableMongock`
- Especifique o(s) pacote(s) onde você localizaria suas `Changelog`aulas no seu `application.yml`ou `application.properties`sob`mongock.change-logs-scan-package`

Com isso, o aplicativo deve estar pronto para ser executado, sem problemas.

Ai segue um exemplo de `changelog`


```java
@ChangeLog(order = "001") 
public class Changelog { 
    @ChangeSet(order = "001", id="001", author = "pradipta") 
    public void dummyChangeSet() { 
        System.out.println("Dummy changeset" ); 
    }
    @ChangeSet(order = "002", id="criar coleção", autor = "pradipta") 
    public void createCollection(MongoDatabase db) { 
        MongoCollection<Document> mycollection = db.getCollection("dummycollection"); 
        Documento doc = new Document("k1", "v1").append("k2", "v2"); 
        minhacoleção.insertOne(doc); 
    }
    @ChangeSet(order = "003", id = "inserir documento", autor = "pradipta") 
    public void insertDocument(MongockTemplate mongockTemplate) { 
        User user = new User("Nome", "Email", "Telefone"); 
        //Usuário é uma entidade com uma coleção já definida 
        mongockTemplate.save(user); 
    } 
}
```



E ele trabalha também com o **repository** do **Spring**

```kotlin
@ChangeLog(order = "1")
class Cookie02CreateCollection() {

  @ChangeSet(order = "1", id = "init_database", author = "name")
  fun initDatabase(myRepository: MyRepository) {
      myRepository.saveAll({.....})
   
  }
}
```


[https://docs.mongock.io/index.html](https://docs.mongock.io/index.html)
Being a Developer Advocate: Week Four
Tags: devrel, learninpublic
Published: 2022-09-30 14:18:41

Already one month as a Developer Advocate... time flies 🥰

This week was all about preparation and documentation. Next week will be the first two conferences where I give the talk **Challenges in UI Automation and How to Solve Them**.

So I spend two days solely on refining the slides to give them a more playful and joyful style. My graphic designer helped me there and I really like how they turned out!

The talk also includes demos of three products for UI automation including our own one.

Learning new things is always a struggle for me but it gets better the more you do it.

## Documentation
After getting to know our product a little bit more I moved on to improving our documentation which is lacking according to our users.

The following things were added/modified:

- Search bar
- Getting started optimised
- Improved the troubleshooting page and added links to it were needed
- Made sure consistent wording is in place where necessary

There is still more to go to reduce friction. What really helps is that our product manager and me share the same goal. Making an awesome user experience!

## User Interviews
Also we talked to a lot of participants of our Hackathon. That was some of the most valuable feedback we can get. They were extremely honest and gave us so many pointers on what they liked, missed and struggled with.

On a side note. If anyone knows where to host videos to easily integrate in our docs, shoot me a message!
Jovens, documente!
Published: 2022-09-30 14:16:46

Eu tenho conversado com Jovens Aprendizes na Vindi e tenho mostrado para eles o quão importante é a documentação dos aprendizados e processos que eles tem vivenciado.

Conseguir mostrar na prática o que mudaria no tempo de aprendizagem deles caso alguns processos já estivessem documentados tem sido relativamente suave.

Para cada um, em uma determinada janela de tempo, está sendo possível mostrar valor do quanto foi o investido dos mais seniors na transmissão dos processos. Processos esses que poderiam ser uma WIKI, e que com pequenas atualizações já facilitariam demais para os aprendizes.

A base inicial sempre é ambientação, acolhimento, senso de pertencimento e muita conversa com exemplos reais de gente que tem a mesma origem e semelhança de gostos deles.

Ter diversidade e ser inclusivo não é um trabalho corriqueiro, é preciso querer e dar tempo para florescer possibilidades.

Demonstrar o quanto é importante eles facilitarem o processo de quem vem depois, e que com isso o EU deles do futuro estarão um menos atarefados com atividades que um documento vivo poderá cumprir a função.

Assim a inclusão de pessoas se dará de forma sustentável.
CSS B2EMO from Andor.
Tags: css, art
Published: 2022-09-30 13:59:38

The new Star Wars series Andor introduced us to a new droid, B2EMO or Bee. We haven't seen too much of Bee yet. I wanted to make the new droid with CSS and HTML.

There's not a lot of images or products of him yet but I found a few online. In CSS terms this is a simple set of stacking rectangles. 

## FRAME

The frame is a large div with a white border. Inside the frame are the divs that make the droid's body.

```HTML
<body>

<div class="flex-container">
<div class="main">
  <div class="outer_frame">
    <div class="droid"> </div>
  </div>
</div>
</div>
</body>
```

```CSS
.flex-container > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  background: var(--Black);
      justify-content: center;
  align-items: center; 
  position: relative;
}


.main {
   height: 100%;
   width: 100%;
   display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.outer_frame {
  width: 950px;
  height: 330px;
  border: 4px white solid;
  display: flex;
  justify-content: center;
  align-items: center; 
  flex-direction: row;
  background-color: #333;
}
```
## BODY

The red is the outer shell which expands and contracts the gray is his interior. I called the outer shell, plates and the insides are I named insides. 

The top is trapezoid with the same colors as a plate. CSS trapezoids are made out of a square built using borders. Three sides are transparent and the side you want to show has a color.


![small droid looks like a stack of boxes.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41ypp12p2jftlujqwxci.jpg)


```HTML
    	<div class="droid">
    		<div class="top"></div>
    		<div class="inside"></div>
    		<div class="plates torso1"></div>
    		<div class="inside2"></div>
    		<div class="plates torso2"></div>
    		<div class="inside2"> </div>   		
    		<div class="plates bottom"></div>		
	</div>	

```

```css
.top {
	border-bottom: 35px solid var(--DarkRed);
	border-top: 40px solid transparent;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
		filter: drop-shadow(0 0 .5rem black);
 	border-radius: 4%;
}



	.inside {
		background: linear-gradient(to right,
		var(--Gray) 33%, 
    	var(--DarkGray)
    	);
		height: 36px;
		width: 160px;
		border-bottom: 2px solid var(--DarkGray);
		border-right: 1px solid var(--DarkGray);
		border-left: 1px solid var(--DarkGray);
		margin-left: 20px;
		z-index: 11;
	}

		.inside2 {
		background: linear-gradient(to right,
    	var(--Gray) 33%, 
    	var(--DarkGray)
    	);
		height: 10px;
		width: 160px;
		border: 2px solid var(--DarkGray);
		margin-left: 20px;
	}

```
The body is made of rectangles. alternating between plate divs and insides divs. The feet are more rectangles.


## Wrap up
This was a quick build to see if I could make something that was just released. The show first streamed a week ago so I feel good that I made something in a short time.


```
-$JarvisScript git push
```


{% twitter 1575910829404217344 %}
Collect useful logs in production using Crashlytics, File logging and Timber
Tags: android, kotlin, crashlytics, firebase
Published: 2022-09-30 13:30:32

Learn how to collect useful logs in production using Crashlytics, File logging and Timber in android project?

In this  post, you will learn how to use the Firebase Crashlytics tree and File logging tree to track bugs and errors as soon as possible.

Firebase Crashlytics is a real-time crash reporting tool. It helps in automatically collecting, analyzing, and arranging crash reports. It also helps us identify which issues are most important so that we can fix them in priority.

File logging is basically the concept of adding a log file while any user reports any kind of crash or error.

Here’s what you will learn Today.

- Collect logs using the Firebase Crashlytics tree
- Collect logs using a File logging tree

For detailed implementation, [visit our blog.](https://blog.canopas.com/collect-useful-logs-in-production-using-crashlytics-file-logging-and-timber-f4b38f3f0de3)
Javascript event mouseover or hover
Tags: javascript, webdev, programming
Published: 2022-09-30 13:17:44

Hi friens, i am new by and have a little question.
I have this html block with many itemid's ! It repeats several times with other itemid's.
Now i want to have a mouse hover event on this to show more details to this itemid. 

How should i declare the event ?

<div class="kb-card kb-card-draggable" itemid="AU72667">
<div class="card-header" style="background:lightblue"></div>
<div class="card-content">
<p class="title"></p>
<div class="colorBD">
<span class="middle">Kundenauftrag</span><br>(0)[335.000] <br>Haustechnik Kloos<br> B:<br> E:<br> </div>
<p></p>
</div>
</a>
</div>
useState Best Practice
Tags: react
Published: 2022-09-30 13:04:40

let's see in this post how we can apply best practice for `useState()`

suppose we have many inputs and we need to make state for each input, normal way to make this will be like : 

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

This is avoidable because it will consume more time and the code will be un-readable; so the another way and best practice to make  is to create state as object and every key is the name of each input such as 
`const [inputs,setInput] = useState({
name : "" ,
email : "" ,
password : ""})`

`<input name="name" />
<input name="email" />
<input name="password" />
`

and there is full code with only one function called handleChange that can handle all inputs 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdalwy5d5xad9ec1pig2.png)
selection sort algorithm
Tags: algorithms, dsa, programming, career
Published: 2022-09-30 13:03:58

Selection sort algorithm is a simple sorting algorithm. Selection sort algorithm is an in-place comparison-based algorithm in which the list is divided into two parts, the sorted part at the left end and the unsorted part at the right end. Initially, the sorted part is empty and the unsorted part is the entire list.

The algorithm maintains two subarrays in a given array.

- The subarray which already sorted. 
- The remaining subarray was unsorted.

**Flowchart of selection sort algorithm**

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


## How it works?

- Set minimum value(min_index) to location 0.
- Traverse the array to find the minimum element in the array.
- If any element smaller than (min_index) is found then swap both the values.
- Increment (min_index) to point to the next element.
- Repeat until the array is sorted.


**Algorithm Implementation in Golang**

```golang
package main

import (
    "fmt"
)

func selectionSort(arr []int) {
    var i, j, min_index int
    for i = 0; i < len(arr)-1; i++ {
        min_index = i
        for j = i + 1; j < len(arr); j++ {
            if arr[j] < arr[min_index] {
                min_index = j
            }
        }

        // if min_index is not equals to i then swap the indexes
        if min_index != i {
            arr[i], arr[min_index] = arr[min_index], arr[i]
        }
    }
}

func main() {
    arr := []int{12, 23, 34, 43, 4, 34, 24, 3, 53, 25454, 64}
    fmt.Println("before selection sort", arr)
    selectionSort(arr)
    fmt.Println("after selection sort", arr)
}
```


If you find this article helpful you can also checkout my blog.

[Programming Geeks Club](https://programmingeeksclub.com)

if anyone require any help please don't hesitate to leave comment.

Thanks for reading
Hacktobefest 2022: My Repo
Tags: hacktoberfest, programming, opensource, github
Published: 2022-09-30 13:02:36

*Dear developer 👋🏻,*

*I am pleased to announce my participation in the hacktoberfest 2022 as a maintainer!*

As a developer and Hacktoberfest partecipant you can contribute to my project and get involved in the community of Open Source Developer and get my communities bigger and bigger.

My main project, that partecipates for the second year to the Hacktoberfest, is the **CXXGraph**:

*Header-Only C++ library for Graph Representation and Algorithms with a simple interface.*

{% github ZigRazor/CXXGraph %}

Then I have some side projects someone that partecipate to the Hacktoberfest for the first time. The projects are in C++ and Python, but you can contribute also with documentation Pull Request or other things that gives values to the projects.
The project are the followings:

*A C++ Library that give microservice framework ( Server / Client ) upon 0mq framework.*

{% github ZigRazor/CXXMicroservice %}

*A Python implementation of simply configurable State Machines.*

{% github ZigRazor/PyStateMachine %}

*A library in C++ to manage multi threading and parallel applications.*

{% github ZigRazor/MTL %}

*A C++ Library to which implements the structures and algorithms for finite automata, pushdown automata, and Turing machines.*

{% github ZigRazor/CXXAutomata %}

You can visit the issues pages of each projects to see the open issues and you can ask me all you need to understand the project goal, the issue problem, or anything you need to contribute.

In the next days I will open some other issues on the projects, that can be important to improve the projects and give the possibility to get involved also to the novice of the Open Source.

For any info you can contact me at zigrazor@gmail.com
If you want open an issue on the projects feel free to do it.
**All contributiuons are appreciated.**

Happy Coding! 💻
and Happy Hacktoberfest!
Smart City and Smart Street Lighting IoT Platform
Published: 2022-09-30 13:01:25

To streamline the installation and monitoring processes for one of our clients, Anblicks developed an [automated installation and server monitoring solution](https://www.anblicks.com/insights/success-stories/smart-city-smart-street-lighting-iot-platform/). If you are facing a similar problem or want to develop an application. Click to read more.
What is SSR and when should you use it.
Tags: javascript, webdev, beginners, react
Published: 2022-09-30 12:42:36


## What is Server Side Rendering (SSR)?

When creating a dynamic webpage using Single Page Application (SPA), the server sends the entire web application in javascript files to the client, the browser will then make the api calls to the server to fetch the content from the server and render our page.  With Single Server Rendering (SSR) the page is rendered on the server and the browser will receive an HTML page ready to be displayed.
![Server Side Rendering Steps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xwqgu5s6vhrs52pam4d.png)

## Ok, so why is that better?

The benefits of using SSR boil down to a better user experience (UX) and better SEO

Improve UX. With SSR you get a faster time-to-content,  now that we don’t need to wait till we download all of the JS files and then execute them a user with slower internet speed will get to see the webpage content much quicker.  Another benefit is that the data on the initial load is loaded on the server as well which is likely a faster connection to the database than most client connections.
These benefits tend to result in better [Web Vitals](https://web.dev/vitals/) as well which brings me to the next bug benefit of SSR.

Better SEO. Because we are loading a fully rendered page the search engine crawlers will see the fully rendered page.

## There must be some tradeoffs to using SSR?

Yes, there are tradeoffs and they should be taken into account.

Development constraints. This is a big one and might need a post of its own to get into more detail but the general idea is, since we are rendering the page on the server any browser specific code needs to be called in the correct lifecycle hooks.

Server-side load. There is more load on the server now and that does need to be taken into account when  it comes to scale.

Build setup and deployment are more involved. We now require a Node.js environment to build and deploy our app.

## So when should I use SSR?

If time-to-content and better SEO are important to your web application and you have a large amount of dynamic content then SSR could help you improve your web application and may even help improve conversion rates.

### Great how do I get started?

Here are some great resources to get you started with setting up your webapp with SSR.
For **react** check out the [Next.JS](https://nextjs.org/).
For **vue** check out the [Nuxt.JS](https://nuxtjs.org/).
For **angular** check out [Angular Universal](https://angular.io/guide/universal).
Best Embroidery Digitizing Services in USA
Published: 2022-09-30 12:27:10

We are offering the best quality [embroidery digitizing](https://www.embpunch.com/embroidery-digitizing), embroidery services and vector art services at the lowest prices with a super fast turnaround. We also provide many features. We can transfer any logo, design, picture, drawing, screenshot or other design information to your embroidery machine information.
Checklist for designers. Directed by front-end and mobile developers
Tags: beginners, tutorial, design, mobile
Published: 2022-09-30 12:16:23

😿If you are a developer who has suffered from designers, [this checklist](https://medium.com/@dev.family/checklist-for-designers-directed-by-front-end-and-mobile-developers-53fa835dfc06) is for you. :point_left: Send it to those who forget to draw all the inputs, components, screens and UIkits!!
Pre Order Traversal
Tags: javascript, leetcode
Published: 2022-09-30 11:53:29

```js
var preOrderTraversal = function (root) {
  // preOrder Traversal ->
  //  1. Visit current node
  //  2. Recursively traverse through the left subtree
  //  3. Recursively traverse through the right subtree

  // Initialize array of values
  let result = [];

  // Recursive function to traverse through subtrees
  travel(root, result);

  return result;
};

const travel = (node, result) => {
  if (node === null) {
    return null;
  }
  result.push(node.val); // Visit node
  travel(node.left, result); // Traverse through left subtree
  travel(node.right, result); // Traverse through right subtree
};


```
Post Order Traversal
Tags: javascript, leetcode
Published: 2022-09-30 11:52:52

```js
var postOrderTraversal = function (root) {
  // post Order Traversal ->
  //  1. Recursively traverse through the left subtree
  //  2. Recursively traverse through the right subtree
  //  3. Visit current node

  // Initialize array of values
  let result = [];

  // Recursive function to traverse through subtrees
  travel(root, result);

  return result;
};

const travel = (node, result) => {
  if (node === null) {
    return null;
  }
  result.push(node.val); // Visit node
  travel(node.left, result); // Traverse through left subtree
  travel(node.right, result); // Traverse through right subtree
};


```
Inorder Traversal
Tags: javascript, leetcode
Published: 2022-09-30 11:52:10

```js
/**
 * Definition for a binary tree node.
 * function TreeNode(val) {
 *     this.val = val;
 *     this.left = this.right = null;
 * }
 */
/**
 * @param {TreeNode} root
 * @return {number[]}
 *

  /**
   * The goal is to maintain a stack of nodes to visit as we traverse
   * down the tree. As we traverse down, We go left and push all the
   * left nodes first in the stack. Once we reach to the bottom, we
   * store the node value and traverse right.
   *           1
   *         /   \
   *        2     3    preorder traversal: 4 -> 2 -> 5 -> 1 -> 6 -> 3
   *       / \   /     (left -> root -> right)
   *      4   5 6
   */
var inorderTraversal = function (root) {
  // In-Order Traversal ->
  //  1. Recursively traverse through the left subtree
  //  2. Visit current node
  //  3. Recursively traverse through the right subtree

  // Initialize array of values
  let result = [];

  // Recursive function to traverse through subtrees
  inorder(root, result);

  return result;
};

const inorder = (node, result) => {
  if (node === null) {
    return null;
  }
  inorder(node.left, result); // Traverse through left subtree
  result.push(node.val); // Visit node
  inorder(node.right, result); // Traverse through right subtree
};


```
How do you pass a string to a component?
Tags: javascript, react, discuss
Published: 2022-09-30 11:51:22

---
title: How do you pass a string to a component?
published: true
description: 
tags: javascript, react, discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6bsjcqcnncbbcakt2nt.png
# Use a ratio of 100:42 for best results.
---

If you think about it, there are five different ways to pass a string to a prop.

```javascript
<Component label="Hello!" />
<Component label='Hello!' />
<Component label={"Hello!"} />
<Component label={'Hello!'} />
<Component label={`Hello!`} />
```

I looked through my code and found that I tend to use `label="Hello"` and `label={'Hello!'}` and sometimes ``label={`Hello!`}``. I have the feeling that I should commit to one of the five in case it is just a string.

I like `label={'Hello!'}` as I can more easily change it to ``label={`Hello ${name}!`}`` or `label={variable}`. And also the other way around: If I have `label={variable}` I double click `variable`, hit `'` and start to write.

What do you think? Does anyone have an opinion on that?