teleren/devto huggingface dataset:
Cpp Solution: N-ary Tree Preorder Traversal (leetcode 589)
Tags: algorithms, cpp, programming
Published: 2021-04-20 09:54:07

This is part of a series of Leetcode solution explanations ([index] (https://dev.to/thangarajn1992/leetcode-solutions-index-2ad6)). If you liked this solution or found it useful, please like this post and/or upvote my solution post on Leetcode's forums.

[LeetCode Problem #589 Link] (https://leetcode.com/problems/n-ary-tree-preorder-traversal/)

###Problem:
Given the root of an n-ary tree, return the preorder traversal of its nodes' values.

N ary-Tree input serialization is represented in their level order traversal. Each group of children is separated by the null value (See examples)

|Example 1| |
|-----:|------|
|Input | root = [1,null,3,2,4,null,5,6] |
|Output| [1,3,5,6,2,4] |
|Visual| ![alt text]( https://raw.githubusercontent.com/thangarajn1992/leetcode/main/Challenges/500_600/589_N_ary_Preorder_Tree_Traversal/589_Example1.png "Example1")|
 
|Example 2 | |
|-----:|------|
|Input |root = [1,null,2,3,4,5,null,null,6,7,null,8,null,9,10,null,null,11,null,12,null,13,null,null,14] | 
|Output|[1,2,3,6,7,11,14,4,8,12,5,9,13,10] |
|Visual| ![alt text](https://raw.githubusercontent.com/thangarajn1992/leetcode/main/Challenges/500_600/589_N_ary_Preorder_Tree_Traversal/589_Example2.png "Example2")|

######Constraints:

>The number of nodes in the tree is in the range **[0, 10^4]**.
>**0 <= Node.val <= 10^4**
>The height of the n-ary tree is less than or equal to **1000**.


###Idea/Approach:

Pre-order traversal is one type of Depth-First Search (DFS) algorithm. We can solve this problem by using the recursive DFS option. ( add the root(parent) to the result and call DFS recursively for each child)

###C++ Solution:

```
class Solution {
public:
    vector<int> result;
    void preorderutil(Node * root) {
        result.push_back(root->val);
        int size = root->children.size();
        for(int i = 0; i< size; i++)
            preorderutil(root->children[i]);
    }
    vector<int> preorder(Node* root) {  
        if(!root)
            return {};
        preorderutil(root);
        return result;

    }
};
```
Create Float labels with few lines of CSS only
Tags: css, label
Published: 2021-04-20 09:46:49

When it has to create stylish form, we always want to style our input tags to give the best look and feel,

Let's write few lines of code to make this magic happen,

```
<div class="group">
  <input type="text" required>
  <label>Name</label>
</div>

```
This is all for our markup,

Simple and easy, one div tag wrapping our input tag and label, 

**Important** use `required` attribute on `input`, and make sure `label` goes under `input` tag, for the best practices I am using the `label`, it could be anything `span` etc,

so far so good, let's wrap up with adding few styles to make it stand out

```
.group{
  position:relative;
  margin:20px;
 }
.group input {
  padding:12px;
  width:300px;
  border:1px solid #ddd;
  outline:none;
  font-family:inherit;
  font-size:16px;
}
.group label{
 position: absolute;
 top:13px;
 left:12px;
 font-size:16px;
 pointer-events:none;
 transition: all 0.3s ease;
}
input:focus + label, input:valid + label{
 top: -11px;
 background-color: #fff;
 padding: 2px 4px;
 color: #54565d;
 font-size: 13px;
}
```
 >That's it no javascript, simple and easy...

Let's understand what we did here, 

For the `.group` class we have added position to relative and some spacing around it, 

For the `input` tag we did some basic styling which is self-understood,

For the `label` we have added position to `absolute` so that it can move relative to parent `group` class, and set position from left and top, 

`pointer-events:none;` is used to prevent click on label part, & we have used `transition` to allow smoothness,

> `input:focus + label`, `input:valid + label`
when we click on `input` we are adding `label` to float our label upside using `top: -11px`, 
and if the `input:valid` label styles will remain as it is,

If you have covered till now, then I must say you have got good patience ;) 

https://codepen.io/imaknoo/pen/GRrYqwE
Add Twitch-like hover effect to a picture
Tags: css, styling, hover, html
Published: 2021-04-20 09:45:31

I based this code on the CodePen link by [Arnaud Delante](https://codepen.io/Axiol), but I thought it might be handy to make an article of this.

It's pretty straight forward and you can change stuff to your liking.

### 1. HTML

Import a stylesheet, show some pictures and write out the HTML code. 

For every picture that needs the hover effect, we have to wrap it in a separate container div, like this: 

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img class="picture" src="picture.jpeg" alt="picture">
    </div>
    <div class="container">
        <img class="picture" src="picture2.jpeg" alt="picture">
    </div>
</body>
</html>
``` 


### 2. CSS

Use your class names and use this CSS code:

```css 
body {
    text-align: center;
}

.container {
    display: inline-block;
    margin: 50px;
    background-color: red;
  }
  
.container:before,
.container:after {
    display: block;
    background-color: red;
    width: 8px;
    height: 8px;
    position: absolute;
    transition: all .15s ease;
}

.container:before {
    top: 0;
    left: 0;
    transform-origin: top left;
    transform: rotate(-45deg) scale(0);
}

.container:after {
    right: 0;
    bottom: 0;
    transform-origin: bottom right;
    transform: rotate(45deg) scale(0);
}

.picture {
    height: 300px;
    display: block;
    transform: translate(0, 0);
    transition: all .15s ease;
    z-index: 10;
}

.container:hover .picture {
    transform: translate(6px, -6px);
}

.container:hover:before {
    transform: rotate(-45deg) scale(1);
}

.container:hover:after {
    transform: rotate(45deg) scale(1);
}
```

I just used a simple red background color. Of course, you can add any color you like. Or tweak any other of these variables.

#### Live demo

![hover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tl0li0lkolju2r3t71s.gif)
How to import CSV data to PostgreSQL Database using Spring Batch Job
Tags: springbatch, springboot, csv, postgres
Published: 2021-04-20 09:34:48

https://grokonez.com/spring-framework/spring-boot/how-to-import-csv-data-to-postgresql-database-using-spring-batch-job

How to import CSV data to PostgreSQL Database using Spring Batch Job

Spring Batch is a powerful module to implement a batch process for tons of data conveniently.
This tutorial guide you how to import CSV Data to PostgreSQL Database using Spring Batch Job.

Related Articles:
- <a href="https://grokonez.com/spring-framework/spring-boot/start-spring-batch-using-spring-boot">How to start with Spring Batch using Spring Boot</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/how-to-use-jdbc-template-with-spring-boot-for-postgres-database">How to use Spring JDBC Template for Postgres Database</a>

<!--more-->
<div id="tuttoc" class="jsa-toc"></div>

<div id="tutcontents">
<h2>I. Technology</h2>
- Java 1.8
- Maven 3.3.9
- Spring Tool Suite – Version 3.8.1.RELEASE
- Spring Boot: 1.4.0.RELEASE
<h2>II. Overview</h2>
<h3>1. Goal</h3>
To build a simple application that expresses how we can use Spring Batch with Job Step (including <strong>ItemReader</strong>, <strong>ItemProcessor</strong>, <strong>ItemWriter </strong>and <strong>JobExecutionListener</strong>) to read Customer Data from CSV file, then put them to PostgreSQL Table named 'customer'.
<img src="https://grokonez.com/wp-content/uploads/2016/09/batchcsvsql-architect.jpg" alt="batchcsvsql-architect" width="694" height="358" class="alignnone size-full wp-image-1478" />
- Reader: reads content of CSV file, then maps the read data to fields of DataModel <strong>Customer</strong>.
- Processor: converts each Customer record's content to new content (for example, get Random ID and uppercase Name String) which will be written to Database Table.
- Writer: writes batch of records to PostgreSQL Database using DAO.
- Listener: handles after Step, read data from Database Table to verify and show LOGs.

- RestController: runs Job using JobLauncher, then return Complete String to Client.
- DAO: interacts with Database.
<h3>2. Project Structure</h3>
<img src="https://grokonez.com/wp-content/uploads/2016/09/batchcsvsql-structure.jpg" alt="batchcsvsql-structure" width="750" height="408" class="alignnone size-full wp-image-1466" />
<h3>3. Step by step</h3>
- Create Spring Boot project
- Configure application properties
- Create a DataModel
- Create a DAO
- Create Job Step: Reader, Processor, Writer, Listener
- Create Batch Configuration
- Create a WebController
- Run Spring Boot Application &amp; Enjoy Result
<h2>III. Practice</h2>

More at:

https://grokonez.com/spring-framework/spring-boot/how-to-import-csv-data-to-postgresql-database-using-spring-batch-job

How to import CSV data to PostgreSQL Database using Spring Batch Job
Centring the item with two lines of code
Tags: css, webdev, frontend, grid
Published: 2021-04-20 09:33:03

Do you remember centring the item on the screen horizontally and vertically *the old way*? Before flexbox and CSS grid that was really hard to do it. I usually either relied on the numbers (so defining margin or padding for the item - which is not good idea cause it looks different on different screens) or used floating. There was also a way with creating tables and putting your content there. I won't give any examples in code here not to misguide anyone looking for the solution to that. These *old ways* are really outdated.

When flexbox came around couple years ago it was like a miracle. Finally being able to center the item with three lines of CSS code felt like a dream to me. It was simple:

```
  display: flex;
  justify-content: center;
  align-items: center;
```

I used this way very often. Till recently when I discovered simplest way thanks to [Chris' Ferdinandi Daily Developer Tips]('https://gomakethings.com/articles/').

Brace yourself, here it comes:

```
  display: grid;
  place-content: center;
```

That's it. Isn't it awesome? I found it [on this site](https://smolcss.dev/) that Chris shared. That's a really cool project done by Stephanie Eckles. She shares short and simple CSS code snippets. I highly recommend to check it out.
✔||🤢 Commit or Vomit | checks.some()
Tags: javascript, programming, webdev, discuss
Published: 2021-04-20 09:13:41

## It's Tuesday! 
Time for a new ✔||🤢 Commit or Vomit! This time it is about using [].some(check ⇒ !check). What do you think of the following code?
```Typescript
const checks = [
	data.age > 18,
	data.username.length > 6	
];
if(data.isNewUser) {
	checks.push(data.email !== undefined)
} else {
	checks.push(data.deleted === false)
}

const isInvalid = checks.some(check => !check);
```

#### [].some(true) ✔||🤢?

❤: Commit (I'd commit something like this)
🏷: Vomit (we all know unicorns don't vomit)
🦄: Like your post please continue this series!

Let's vote! 😊

> Photo by <a href="https://unsplash.com/@tjump?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Nik Shuliahin</a> on <a href="https://unsplash.com/s/photos/sick?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Make remove column a reversible migration
Tags: todayilearned, ruby, rails, activerecord
Published: 2021-04-20 09:05:17

Today I learned in order to make a `remove_column` migration reversible (which I need often when tinkering in development with the perfect database setup) we need to add the the type which is not required for migrating the database.

    remove_column :table, :column, :type

For just a few more characters, the investment definitely pays off in case of the need to reverse the migration (even if it's not only in development).
Array Rotation
Tags: twopointerapproach, reversearray
Published: 2021-04-20 08:53:32

Use **array reversal** for array rotation .
Use two pointer for array reversal.

public class Solution {
    public void Rotate(int[] nums, int k) {
        k=k% nums.Length;
              k=k% nums.Length;
        reverse(nums, 0, nums.Length-1);
        reverse(nums,0, k-1);
        reverse(nums,k,nums.Length-1);
    }
    
    void reverse(int[] nums, int start , int end)
    {
        while(start<end)
        {
            int temp=nums[start];
            nums[start]=nums[end];
            nums[end]=temp;
            start++;
            end--;
        }
    }
    
}
Financial data and accounts handling App Develop for 724.one
Tags: reactnative, android, ios, hybridapp
Published: 2021-04-20 08:39:59

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wb8vkvntx4lv63132gz6.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8zqov062siyzyab75cg.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfjdeznbe0wz1ll4vteu.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uovr5hmhr4hi7ilzbky.jpg)
Project description
Hi this is an "Account handling app" that help the user to maintain his/her account. through this app user can check all the history detail of his/her transactions moreover control budget and plan things according to his daily, monthly and yearly budget
We're usually talking about the "worst case"
Published: 2021-04-20 08:35:20

 We're usually talking about the "worst case"

Often this "worst case" stipulation is implied. But sometimes you can impress your interviewer by saying it explicitly.

Sometimes the worst case runtime is significantly worse than the best case runtime:

```python
  def contains(haystack, needle):
    # Does the haystack contain the needle?
    for item in haystack:
        if item == needle:
            return True
    return False

Here we might have 100 items in our haystack, but the first item might be the needle, in which case we would return in just 1 iteration of our loop.

In general we'd say this is O(n)O(n)O(n) runtime and the "worst case" part would be implied. But to be more specific we could say this is worst case O(n)O(n)O(n) and best case O(1)O(1)O(1) runtime. For some algorithms we can also make rigorous statements about the "average case" runtime.
Migrating Firebase RTDB to Belgium : 4 Steps Guide
Tags: firebase, privacy
Published: 2021-04-20 08:34:59

Did you know that WeLoveDevs.com jobboard is custom-made and built over Firebase ?
The clear benefit of it was a reactive application, easy to build with a small team. And this since 2016.
The downside is that the users data would be located in the US. So when Firebase released a new location in europe we jumped in this train even if it was beta.

Changing a firebase project location is not that easy as you think. First of all because you can't upload a backup of more than 256mb. And our backup is 1Gb. 

Also, you have to depreciate the former location and move all of your services to the new location in the same migration. This mean you will have to be down (or at least read-only for a consecutive time frame).

We also use 250 Firebase Cloud Functions and you have to deploy them against the new location also.

Well, this quick and easy to read article is your guide if you want to move your Firebase location to Europe and you may want to bookmark it.

If you have any question please ask them on this post. We love the Dev.to community and would be very happy provide insight or answer questions.

Read full post : https://welovedevs.com/articles/migrating-firebase-rtdb-from-us-to-belgium-4-steps-to-do-it/
Clean & Speed Up Your Local Git Repo With Three Commands
Tags: git, github, productivity, tips
Published: 2021-04-20 08:27:37

Sometimes ya gotta force push or rebase and leave some commits behind. On a large repo with many commits and remotes, your git commands could actually slow down with too many objects floating around. Consider running these commands to help keep things in tip top shape.

### [git gc](https://git-scm.com/docs/git-gc)

Compresses and removes orphaned objects, thus speeding up commands in your local repo. Nice!
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb5hr4zezeppwg87c6s8.png)

### [git fsck](https://git-scm.com/docs/git-fsck)

Yes, I misread that too. `git fsck` shows you all orphan or dangling objects in your local repo. I cleaned up recently so mine isn't too bad.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3i5l2hitr5xw5u6sn0dv.png)

### [git prune](https://git-scm.com/docs/git-prune)

If you don't plan on doing anything with the objects you saw using fsck, run `git prune` to clear them out. If you'd like to see what would be cleaned out without actually deleting them, run `git prune -n` for a dry-run.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evk0n3wrxhjgtajsbmtk.png)
 
In theory, cleanup happens somewhat regularly when running some of git's main commands. I haven't noticed, or is it just good at its job. In any case, I hope this helped!

I learned about these commands from the amazing [Git Internals pdf](https://github.com/pluralsight/git-internals-pdf). Every dev should read it.
How to handle multiple ssh keys for gitlab
Tags: gitlab, ssh, bash
Published: 2021-04-20 08:17:52

When you have multiple account of the gitlab.com (ex: private and company), the gitlab.com will reject your key if you want to use same key for each account.

How to handle it?
I can propose 2 ways.

# 1. use `~/.ssh/config`

　1. Open or create ~/.ssh/config

　2. You can add an entry like below.
```
host gitlab_company
     HostName gitlab.com
     IdentityFile ~/.ssh/company_id_rsa
     User git
```
* The first line is as your preference. 
* `HostName` and `User` are fixed for the gitlab.com.
* `IdentityFile` is your private key. 

　3. Also you can add another entry for your private account or something.
```
host gitlab_private
     HostName gitlab.com
     IdentityFile ~/.ssh/private_id_rsa
     User git
```

　4. Open `.git/config` in your repository.

Let's move to your local git repository.
Then open `.git/config`, you can see like below.
```
 [core]
     repositoryformatversion = 0
     filemode = true
     bare = false
     logallrefupdates = true
 [remote "origin"]
     url = git@gitlab.com:company/something.git
     fetch = +refs/heads/*:refs/remotes/origin/*
 [branch "main"]
     remote = origin
     merge = refs/heads/main
```
Please look **url** under `[remote "origin"]`.
You can change `git@gitlab.com:...` to `git@gitlab_company:...` or `git@gitlab_private:...` like below.
```
url = gitlab_company:company/something.git
```

Finally, git client uses your ssh key which defined in configuration files automatically.

# 2. make command for switching ssh keys

When you have multiple ssh keys like below.
```
$ ll ~/.ssh/
total 4
-rw------- 1 m me 3243 Aug 31  2021 company_id_rsa
-rw-r--r-- 1 me me  746 Aug 31  2021 company_id_rsa.pub
-rw------- 1 me me 3243 Sep 29  2021 private_rsa
-rw-r--r-- 1 me me  746 Sep 29  2021 private_rsa.pub
```
You can add below function into a bash configuration file, such as `.bashrc` or `.bash_aliases`.
```bash
function switch_ssh() {
    rm ~/.ssh/id_rsa ~/.ssh/id_rsa.pub
    ln -s ~/.ssh/$1_id_rsa ~/.ssh/id_rsa
    ln -s ~/.ssh/$1_id_rsa.pub ~/.ssh/id_rsa.pub
    ls -laF ~/.ssh/id_rsa
    ls -laF ~/.ssh/id_rsa.pub
}
```
Then you can execute like below
```bash
switch_ssh company
```
Above command makes 2 symbolic links like below.
```
$ ll ~/.ssh/
total 6
-rw------- 1 ryo ryo 3243 Aug 31  2021 company_id_rsa
-rw-r--r-- 1 ryo ryo  746 Aug 31  2021 company_id_rsa.pub
-rw------- 1 ryo ryo 3243 Sep 29  2021 private_rsa
-rw-r--r-- 1 ryo ryo  746 Sep 29  2021 private_rsa.pub
lrwxrwxrwx 1 ryo ryo   32 Apr 20 16:22 id_rsa -> /home/ryo/.ssh/company_id_rsa
lrwxrwxrwx 1 ryo ryo   36 Apr 20 16:22 id_rsa.pub -> /home/ryo/.ssh/company_id_rsa.pub
```
This command will make or remake symbolic link named `id_rsa` from `company_id_rsa`. Of course, `switch_ssh private` makes `id_rsa` from `private_id_rsa`. `id_rsa` is default key name git client normally use.

Let's enjoy your git life!
Everything you need in One Repo
Tags: showdev, codenewbie, javascript, react
Published: 2021-04-20 08:05:59

Hello friends, after writing so many free resource posts, I decided to put them together on a website, you can check it out. 

Github: https://github.com/hulyak/a-to-z-coding-resources
Website: https://a-to-z-coding-resources.vercel.app/docs/

For now, I have included:

- Free resources for learning how to code
- Free images/videos and tools
- Free React.js resources
- Free CSS Resources
- Free Javascript resources
- Free Next.js resources
- Job hunting resources
- BONUS: Career resources (Resume Builders, Linkedin tips, portfolio tips, career advice)

You can clone, fork, or download the code, and add your own resources. It is really handy with a good navigation system. I have used Docusaurus, I didn't want to write it on a Markdown page, because I find it hard to navigate. 

I look forward to hearing your feedback and don't forget to give it a star ⭐️ so that other developers also can see it. 

If you like this post, share it on your Twitter account to support me writing more, also you can support me by [buying  a coffee.](https://www.buymeacoffee.com/hulya)

<a href="https://www.buymeacoffee.com/hulya" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" height="40" width="170" ></a>

You can follow me on [Twitter](https://twitter.com/hulyakarkya), and [Github](https://github.com/hulyak). We can connect with each other.
Stop the data mess with the data mesh
Tags: programming
Published: 2021-04-30 13:46:45

---
title: Stop the data mess with the data mesh
published: true
date: 2021-04-20 08:00:00 UTC
tags: Programming
canonical_url: https://domenicoluciani.com/2021/04/20/stop-the-data-mess-with-the-data-mesh.html
---

One of the hottest topics of the moment in Big Data is undoubtedly the Data Mesh, but what is it? Why is this better than the solutions we had before? Do we need it? Should we adopt it?

Read the [article](https://domenicoluciani.com/2021/04/20/stop-the-data-mess-with-the-data-mesh.html)!