teleren/devto huggingface dataset:
How to structure JSON object
Tags: json, javascript
Published: 2020-06-06 09:47:45

Hello, I have JSON file which look like this

[
  {
    "customer": "A",
    "children": [
      {
        "id": "1",
        "name": "B"
      },
      {
        "customer": "B",
        "children": []
      },
      {
        "customer": "C",
        "children": [
          {
            "id": "4",
            "name": "E"
          }
        ]
      },
      {
        "customer": "E",
        "children": [
          {
            "id": "5",
            "name": "F"
          }
        ]
      },
      {
        "customer": "D",
        "children": []
      }
    ]
  }
]

and I need my output to be like this,  How can I do this using JavaScript

  [
    {
      "customer": "A",
      "children": [
        {
          "customer": "B"
        },
        {
          "customer": "C",
          "children": [
        {
          "customer": "E",
          "children": [
        {
          "customer": "F"
         }
      ]
   }
  ]
 },
       {
        "customer": "D"
        }
      ]
    }
  ]
Mailman: How to add subject prefix and count emails
Tags: mailman, email, server, mailinglist
Published: 2020-06-06 09:34:54

GNU [Mailman](https://www.gnu.org/software/mailman) has an option to add [subject_prefix](https://www.gnu.org/software/mailman/mailman-admin/node14.html) to emails.

<small>\* "Mailman" in this post means __not__ Mailman __3__ __but__ Mailman __2__, because I use [OpenBSD](https://www.openbsd.org).</small>

We can count emails of a mailing list with the command named [`config_list`](https://www.gnu.org/software/mailman/site.html).

Create a file, for examle, named `cfg.py`, and write in it:

```config
subject_prefix = '[list-label %04d] '
```

and `config_list` it for `$LIST_NAME` (replace this with your list's name):

```console
# /usr/local/lib/mailman/bin/config_list -i cfg.py $LIST_NAME
```

It will bring emails with subjects like "[list-label 0001] an actual subject".
How can we fix "UIWebView will no longer be accepted" ?
Tags: react
Published: 2020-06-06 09:24:58

---
title: How can we fix "UIWebView will no longer be accepted" ?
published: true
description: 
tags: react
//cover_image: https://direct_url_to_image.jpg
---

When I publish our React-native App, we get a warning like this.

The solution to this is to delete RCTWebView.

Let's solve this with Fastlane.


```SH
cd ios/fastlane/
touch fix-uiwebview.rb
```

The file **fix-webview.rb** is saved as follows.

**fix-webview.rb**

```rb
require 'xcodeproj'

react_project = Xcodeproj::Project.open("../../node_modules/react-native/React/React.xcodeproj")
react_project.main_group["React/Views"].files.each do |file|
  if file.path.match(/^RCTWebView/) 
    file.remove_from_project
  end   
end   
react_project.save
```

then we open the **Fastfile** file and add the following to the bottom lane.

**Fastfile**
```rb

platform :ios do

  desc 'Deploy to AppStore'
  lane :release do
    fix_uiwebview
    upload_to_app_store
  end

  lane :beta do
    fix_uiwebview
    upload_to_testflight
  end

  desc "Fix deprecated UIWebView"
  private_lane :fix_uiwebview do
    sh("ruby", "fix-uiwebview.rb")
  end 

end
```

Thanks.
Linux Mint is Making a Mistake
Tags: linux, distributedsystems, ubuntu, snapcraft
Published: 2020-06-06 09:10:14

Recent news from the Linux Mint team has made it clear, Linux Mint doesn't like Snap. You should be expecting articles soon on how to enable Snap packages on Linux Mint. Why? Snap packages have a stable future, and more distributions are supporting it. Some key notes to take is Arch Linux, Manjaro, and Fedora. Those three support the installation and use of Snapcraft. Ubuntu ships Snap packages by default.

Snaps are not perfect as they are larger, slower, and can't easily be themed. These are issues within Snap, but others have put claims with Snap based on a fact. The Snapcraft backend is closed-source. There are numerous conspiracy theories. Many Linux users have been comparing Canonical - the company behind both Ubuntu and Snapcraft - to Microsoft. A lot of complaints came when Canonical announced that some APT packages - ones they maintain for Ubuntu - will become Snap packages, and the APT installation command will install the Snap version. Many people disagree with this option, but this option leads to why Linux Mint is making a mistake removing Snap.

Snap packages are better from a developer perspective. I develop applications, and Snap packaging is an astounding solution. Working on projects like Ubuntu Lumina wouldn't benefit from building Snap packages, however applications I have been processing will. When Deb packaging things like the Lumina desktop environment, there is a sense of Kakorrhaphiophobia inside of me. If it doesn't work, I get disconcerted. It often does NOT work. Now I have only packaged a couple of Snaps, but each one of them is leagues easier to build than if I made them Deb packages.

Many people are happy with Snap, but anyone can run a distribution that doesn't include Snap but can install it if they do. Linux Mint is trying to make it impossible to run Snaps. That's an issue, as many developers build Snaps. There are many factors at play with why developers love Snap, including the fact that Snap is available on nearly every Linux distribution, Ubuntu being the most used Linux distribution, Ubuntu builds and supports Snap, and that Ubuntu has Snap preinstalled makes it a more reliable choice for developers. Especially over solutions like Flatpak and in some cases AppImage, Snap is what developers want to use to ship software. Linux Mint making access to Snap difficult only hurts developers and users that like Linux Mint.
Cybersecurity
Tags: security, computerscience
Published: 2020-06-06 09:08:03

Cybersecurity includes the following elements:
Network security
Application security
Endpoint security
Data security
Identity management
Database and infrastructure security
Cloud security
Mobile security
Disaster recovery/business continuity planning
End-user education

further elements that come under the umbrella of cyber security:

Trojans and backdoor attacks
Denial of service
Information security
Cybercrime
Intrusion detection
Spyware, 
phishing
Viruses,
worms, 
man-in-the-middle attacks and passwords
Help needed in figuring out Rails association
Tags: help, ruby, rails, postgres
Published: 2020-06-06 08:40:47

I have two models - `User` and `Network`. In my case, each `User` can have many `Network` and each `Network` can have many `User` and belongs to one `User` (the one who created).

For example, let's say there is `user1` with two networks `N1` and `N2`. The network `N1` has `user2` and the network `N2` has `user3`.

What I want to achieve is the `creator` field of `N1` and `N2` will give me `user1` and the `users` field of `N1` will give me `[user2]` and that of `N2` will give me `[user3]`

So far, it's ok. I can have the `creator` field with `foreign_key`, and I can use a `has_many through` relation to figure out which networks contain which users and which users belong to which networks. 

But in that case, is there a way to quickly tell if there is a relation between two users or not?

For example something like `user2.follows? user1` will return `true` since `user2` belongs to a network of `user1`. I can iterate through all the networks created by `user1` and check if `user2` belongs to it, but is there a better way?
Question: How do freelance developers get work without using platforms like UpWork or Fiverr?
Tags: discuss, help, freelancing, career
Published: 2020-06-06 08:34:02

---
title: Question: How do freelance developers get work without using platforms like UpWork or Fiverr?
published: true
cover_image: https://imgbbb.com/images/2020/06/06/annie-spratt-6UBUOdiLkg8-unsplash.jpg
description: how to get client as a freelance developer
tags: discuss, help,freelancing, career
---
**Hi, all freelance developers or recruiters.**
 
I saw many times that Senior freelance developers don't like the platforms like UpWork or Fiverr because of the price cut and low price works. I also face this problem. 

But, without these kinds of platforms, how can a developer meet or find potential clients? (FYI, I am not asking about local clients). What is the process to get clients?

Thanks in advance.

Cover Photo by Annie Spratt on Unsplash
Windows Keyboard for MacOS
Tags: keyboard, macos, windows, setup
Published: 2020-06-06 08:19:28

I recently purchase Mac Mini and as the first time MacOS user I didn't have Mac keyboard (and no interest of buying). I needed to make my Windows keyboard work with MacOS. It's very simple but for me the biggest challenge was to map them in a way that I remember what the buttons were.

First I needed to figure out what Control, Option, and Command key meant in Mac.

**Control** = This is used in some shortcuts but as far as I know it's not that used.

**Option** = This is kind of like Alt in Windows as it can be used for example to type some hidden characters (e.g. Greece alphabets).

**Command** = This is like Control is Windows which makes it so confusing when there is already one Control key in Mac. Command + w for example closes windows on Chrome.

I mapped the keys this way:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/438utrki1qp8vbqw1ags.png)

There is no reason for this except I want to keep similar functionalities in similar places because I'm going to switch between Windows and MacOS constantly and I know that it would cause mistakes if I need to remember that CTRL is in different place.

### Extra

**Command** (in Windows keyboard CTRL after changing mapping) **+ space bar** = search applications
Lake Tahoe site focus with Box Model css
Tags: css
Published: 2020-06-06 08:18:09

[Lake Tahoe site focus on Box Model DEMO](https://heggy231.github.io/chingu-webdev-speedrun-challenge/frontend/lake-tahoe/)

When setting `max-height` or `min-height` to the each paragraph containers, the content may spill over.

![overflow content](https://dev-to-uploads.s3.amazonaws.com/i/q2nenh2f2gr1jlg1xixl.png)

To render content properly, we set main contents' container  overflow property to scroll.  All children of that container displays overflowing content with a scroll bar!

```html
// parent
#main {
  // set height to limit the expansion of content
  height: 1000px;
  overflow: scroll;
}

// child
p {
  min-width: 200px;
  max-width: 800px;
  min-height: 200px;
  max-height: 300px;
}
```

When we hide an element from screen, to maintain the layout we use `display: hidden` otherwise, we use `display: none`.
However, both are not accessible for screen reader.
Beginner Python tips Day - 03 defaultdict
Tags: python, codenewbie, beginners, tips
Published: 2020-06-06 08:06:15

```python
# Python Day-03 defaultdict

from collections import defaultdict

# You can specify the type of values the dictionary will contain
dict_of_list = defaultdict(list)

dict_of_list['languages'] = ['Python', 'JavaScript', 'Dart']

print(dict_of_list['languages'])
# Prints ['Python', 'JavaScript', 'Dart']

# when the key cannot be found empty list is returned
print(dict_of_list['frameworks'])
# Prints [] i.e empty list

dict_of_numbers = defaultdict(int)

dict_of_numbers['students'] = 10

print(dict_of_numbers['students'])
# Prints 10

print(dict_of_numbers['teachers'])
# Prints 0

# If the key isn't found return the predefined value
safe_dict = defaultdict(lambda : None)

safe_dict['hello'] = 'world'

print(safe_dict['hello'])
# Prints 'world'

print(safe_dict['world'])
# Prints None
```
How to create an SSH Tunnel with ngrok on Ubuntu Server (aka ssh access to your local server in local network with dynamic IP)
Tags: devops, sshtunnel, ubuntu, ssh
Published: 2020-06-06 07:50:27

I have a server at home running Ubuntu 18.04 LTS (normal local network, behind a router with firewall activated, no DMZ) and I wanted to be able to access it though ssh. _You can think of it as a TeamViewer alternative for port redirection._

## What’s SSH?

> Secure Shell (SSH) is a cryptographic network protocol for operating network services securely over an unsecured network. Typical applications include remote command-line login and remote command execution, but any network service can be secured with SSH. -[Wikipedia](https://en.wikipedia.org/wiki/Secure_Shell)

## Enter **[grok](https://ngrok.com/ "ngrok")**

> Public URLs for exposing your local web server.
> Spend more time programming. One command for an instant, secure URL to your localhost server through any NAT or firewall.

They weren’t kidding. To set it up do the following:

1. Register at [https://ngrok.com/](https://ngrok.com/)
2. Follow the steps on their “Getting started page”. There are 4 steps to follow. If you are in Ubuntu just run the following in the terminal to install. Both methods work just fine.
```bash
sudo snap install ngrok
```
And then specify your auth token form [here](https://dashboard.ngrok.com/auth)
```bash
ngrok authtoken your-token
```
![](ngrok-auth-squashed.jpg)
3. Start _ngrok_ on your ssh port. You can read more [here](https://ngrok.com/docs)
```bash
./ngrok tcp 22
```
4. Access your server with ssh
```bash
ssh  YOUR_USER@0.tcp.ngrok.io -p PORT
```
where PORT is the port assigned by ngrok and YOUR\_USER is your user in the server.
_You can also check the port assigned at your [ngrok dashboard](https://dashboard.ngrok.com/status "ngrok Dashboard")_
![](ngrok_status-squashed.jpg "ngrok Dashboard")

## Optional: copy your ssh key to your server for a password-less access
1. I use _ssh-copy-id_ as follows
```bash
ssh-copy-id -p port -v 0.tcp.eu.ngrok.io -l user
```
You can read more about it [here](https://www.ssh.com/ssh/copy-id)

On Ubuntu ssh-copy-id is already installed. On Mac just run
```bash
brew install ssh-copy-id
```

For more details about _brew_, read [here](https://brew.sh/)

The missing package manager for macOS (or Linux)"). In a few words, think of _brew_ as a package manager for Mac (like snap, apt, rpm, etc…).
If you just want to get it installed open a terminal window and run
```bash
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

## About ngrok
_ngrok_ is free for up to 10 devices. Their plans are in their [pricing page](https://ngrok.com/pricing)
Their free plan allows the following:
* HTTP/TCP tunnels on random URLs/ports
* 1 online ngrok process
* 4 tunnels/ngrok process
* 40 connections / minute
which is enough for personal and demo uses.


Enjoy!
Curved Bottom App Bar With FAB In HTML/CSS
Tags: html, css
Published: 2020-06-06 07:24:20

##Inspiration

While working on [Flutter’s Bottom AppBar](https://www.youtube.com/watch?v=2uaoEDOgk_I) I was astounded to see how simple it is to build a curved bottom app bar with fab (floating action button) icon in between. So I decided to try and build it out in html, css to see how well it works. Surprisingly, using css to achieve such design wasn’t as easy as I thought it would be

##What do we want to achieve

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aynhkoonarh7y6f2om3f.png)*Bottom App Bar with Floating action button in the center*


##Solution

Lets start by adding a div at the bottom with 3 tabs. (left tab, right tab and middle tab that would hold FAB button)


{% gist https://gist.github.com/codewithsam/f2549727a6dda053a60c0e54df35771e %}

In the above code, you can see 3 tab divs with class **.tab--left**, **.tab--right** and the most important one **.tab--fab**. It contains a div with class .top. Keep this div in mind as we are gonna hack the s**t out of .top div

```
<div class="tab tab--fab">
  <div class="top">
   <div class="fab"> + </div>
  </div>
</div>
```

###Achieving rounded corners in tabs

So before talking about *tab--fab* lets first understand how we can achieve curviness in *tab--left* and *tab--right*. This can be done using css property border-top-left-radius and border-top-right-radius

```
.tab--left{
  border-top-right-radius: 30px;
}
.tab--right{
  border-top-left-radius: 30px;
}
```

###Achieving curviness in your FAB tab

There are 3 parts to build a Curved tab with FAB on top of it

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4zku05h48xd91l6b3ryr.png)*tab div containing .top div and .fab button*


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kx64s8dv42jw0g6dxfll.jpg)*div.top inside .tab div*


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p0atgkch0b62dec014wd.jpg)*FAB button inside .tab div*

1. tab — fab: This will contain a div will a class .top and our FAB button
2. div.top: This will be used to create curve and keep transparency
3. div.fab: The actual rounded FAB button

###Styling our middle tab

{% gist https://gist.github.com/codewithsam/0f052103b57968a7d2484022b0711ae9 %}

*Please go through the comments in above code.*

As I said before .top is the key as it will produce a curve using *border-bottom-left-radius* and *border-bottom-right-radius*. If you do not make this div transparent it will produce a solid shape as shown below, therefore transparency is important

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0fm1mrwsmhgwwjec2zsg.png)*Result of .top tab without background: transparent*

###Designing FAB Button

{% gist https://gist.github.com/codewithsam/de884993850f5c0695c3fb862ce0c823 %}

The above css is to build our rounded FAB button with + icon in the center.

##Conclusion

Well, Thats it folks. You can find complete code in below codepen.

{% codepen https://codepen.io/SamVCode/pen/VweLLmj %}
How to create a preloader in ReactJS?
Tags: help, react, css
Published: 2020-06-06 07:19:32

How can i implement a preloader in React? I initially thought of using the onLoad function around the <App/> component. What I am aiming for is: https://brittanychiang.com/ kind of preloader. It waits until all the content has been loaded. More over, if you switch tabs halfway the preloader animation is complete it, it continues only when you switch back to the tab. The complete preloader animation takes place always 
 no matter your connection speed. How can I implement it? Thanks.
A commandline tool that generate High Level microservice & serverless Architecture diagrams
Tags: go, architecture, design, microservices
Published: 2020-06-06 07:14:43

---
title: A commandline tool that generate High Level microservice & serverless Architecture diagrams
published: true
description: 
tags: go,architecture,design,microservices
cover_image: https://raw.githubusercontent.com/lucasepe/draft/master/examples/message-bus-pattern.png
---

A commandline tool that generate High Level microservice & serverless Architecture diagrams using a declarative syntax defined in a YAML file.

https://github.com/lucasepe/draft

Why?

 - to quickly scketch HL Arks 
-  to change the diagrams without pain (point, click drag..etc.)
-  to share diagrams using just a plain YAML file
-  the "terminal" is my playground :-D
-  but..above all..to do something funny and relaxing in Go! 

Please check it out and let me know what do you think!

All the best,
Luca
Deleting untracked files from git
Tags: git, bash, github
Published: 2020-06-06 06:25:12

---

## The problem:

Have you ever tried to pull down some new changes and come across this error?

```bash
error: The following untracked working tree files would be overwritten by merge:
	resources/views/untrackedFolder/untrackedFile.blade.php
    resources/views/untrackedFolder/anotherUntrackedFile.blade.php
Please move or remove them before you can merge.
Aborting
```

Untracked files huh? Okay, that doesn't sound too difficult. You should be able to run

`git reset --hard`

#### But wait

They are still there! _What gives !?_

![wait what](https://media.giphy.com/media/IMuqnp96sdhyE/giphy.gif)

The reason is because `git reset --hard` **only removes files that are already a part of the repo**

## Solution

From the [git docs](https://git-scm.com/docs/git-clean), we will find this command:

```bash
git clean -n
```

`-n` this flag will show you what files will be removed.

You should use this flag first to determine what is going to be removed.

```bash
git clean -f
```

`-f` this flag means it will delete the files **permanently**.

## Other useful commands

`git clean -fd` will also delete folders

`git clean -fX` removes ignored files

`git clean -fx` removes both ignored and non-ignored files

There you go, you should have a clean repository that has the changes committed before.
CORS error hack
Tags: webdev, node, angular, javascript
Published: 2020-06-06 05:59:35

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. 

A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.

An example of a cross-origin request: the front-end JavaScript code served from https://a.com uses XMLHttpRequest to make a request for https://b.com/data.json.

More details on CORS can be found [here](developer.mozilla.org/en-US/docs/Web/HTTP/CORS).

Most noobs, who are starting with Back-End development, will often see this error.

![CORS](https://i.ibb.co/nzH9mMN/cors-error.png)

The first step would be to use the CORS package, when working with NPM.
```
//Install
npm i cors

//In index.js file,
var cors = require('cors');
app.use('cors');
```

Some deployments may still cause the CORS error in some cases, wherein this particular Chrome extension comes handy.

[CORS Extension](https://chrome.google.com/webstore/detail/cross-domain-cors/mjhpgnbimicffchbodmgfnemoghjakai?utm_source=chrome-ntp-icon)

You just have to Enable and save, and it should solve the CORS error for you.

However, do note that some sites, usually third party API services, such as [Newsapi](https://newsapi.org) restrict only localhost sites to be able to access their free plan APIs, and will block access requests from deployed websites. 

Cheers! Have a CORS-Free day!
Image Lazy Loading
Tags: html
Published: 2020-06-06 05:54:27

Lazy loading has been a term that was hot about 15 years ago and never stopped being in fashion. The images are mostly the heaviest part of a website and tend to slow everything down.

It was always pretty tedious to make a custom `JavaScript` for lazy loading, but we now have the native lazy loading API!

It can be as simple as adding `loading="lazy"' to an image element.

## HTML Structure

```html
<img
  src="https://images.unsplash.com/photo-1591303872989-2640dc28185b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3236&q=80"
  loading="lazy"
  onload="alert('Cool right!');"
/>
```

We can define the `loading` attribute and give it the value of `lazy`, and the API comes with an `onload` callback function.

Other values we can use are:

- auto - Default behavior, browser-specific
- lazy - Loads the image when it becomes visible based on scroll
- eager - Loads the image directly

See this in action on the following Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="rebelchris" data-slug-hash="LYGEMqP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Image Lazy Loading">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/LYGEMqP">
  Image Lazy Loading</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Browser Support

Unfortunately, it's not fully supported by all browsers, but keep in mind if the browser doesn't support it, it will just show the image, so there is no harm in adding this!

![Lazy loading support](https://caniuse.bitsofco.de/image/loading-lazy-attr.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)