teleren/devto huggingface dataset:
Break timer for Digital Well-being
Published: 2020-09-27 17:46:55

Hello there!

So I have been thinking of learning about Electron and Neumorphism for the last few weeks. 
This Sunday, I finally decided to build an app using the same.

![Demo](https://dev-to-uploads.s3.amazonaws.com/i/fsxisdl6jmrjgd759oxa.png)

I built a Break Timer app. :tada: It's a simple app that notifies me about breaks. I normally work for 90 mins and then take a 20 mins break.

In the future, I am planning to add more features like reminders for drinking water so my water intake is enough. :bulb:

Also, if you are a beginner and trying to learn Electron. I highly recommend checking out [electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate). I came to know about it when I finished my project. The main benefit(IMO) of using this package is that it's highly optimized and your final package will be much less in size. If I release a new version of my app with new features then I'll surely refactor it first to use this package. :recycle:

I am currently using this app on my Windows and Linux machine. If anyone needs that, then I can make a package and release it. Let me know. :smile:

You can check out the code [here](https://github.com/thesanjeevsharma/break-timer).

Thanks! :wave:
Database Normalization
Published: 2020-09-27 17:42:31

In this blog post I chose the Database admin centric option to identify and explain different normal forms of data in my SQL database. 

The most important question to ask when it comes to Database Normalization and normal forms in general, is what do those words mean? Database normalization is a technique to organize data in a database by reducing duplicated data (redundancy) and ensuring only relevant data is stored. Each of these stages of organization are called normal forms, with each form building upon the one before it to ensure the database is normalized.
While there are six levels of normalization and normal forms, typically only the first three are necessary for most applications, and in this blog post we will primarily be looking at the First and Second Normal Forms.

The requirements for the First Normal Form (1NF) are:
1. Data is stored in tables with rows uniquely identified by a primary key
2. Data within each table is stored in individual columns in its most reduced form
3. There are no repeating or redundant columns

Looking at the COVID-19 database we have been building over the past few posts, we can see the table GeographicLocation is in violation of the first normal form because of the Country column. As our primary key for a GeographicLocation is the ZipCode, the Country for our GeographicLocation will always be USA, making the Country column in the table redundant.

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

After removing the Country column, our GeographicLocation table satisfies the requirements for 1NF.

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

The Second Normal Form has all the same requirements for 1NF, along with the additional requirement that only data related to a table’s primary key.

Looking at the table Hospital, we can see it is in violation of the requirement for 2NF because the Population column is not related to the Hospital’s primary key of HospitalID, but rather the foreign key of a GeographicLocation’s ZipCode. As the population of a GeographicLocation changes, it would be very easy to forget to update the Population value in the Hospital table because of its indirect relationship with the primary key. To solve this problem, we need to move the Population column to the GeographicLocation table where it is directly associated with the primary key of ZipCode.

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

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

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

Below is a video where I walk through the things I discussed in this post, as well as show the SQL commands I used to normalize and clean up my COVID-19 database. Thanks for reading/watching!

{% youtube du60P9qM6CQ %}
Which android app makes digital prototype from paper sketch? (using the camera) [Solved]
Tags: help, android, design, ui
Published: 2020-09-27 17:39:57


 Hello,

A few days ago I read a post here(dev.to) and I can't find it anymore...
It mentioned some cool tools for developers. 

One of them was an application on Android which creates a sample ( or prototype) screen from my drawing sketch. (After using the phone's camera.)
 
Because I usually start a project creating a sketch on paper, I would like to try this app and see how my ideas look like with fake data.

If you know what I am talking about, or you have any alternative idea, please let me know.

Thank you
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8oh0i7o3clelu4ie70zu.png)


Update:
I was looking for an app which shows me an alternative UI screen from my sketch. I don't need code solution, only I want to see how it would look like before the hours of coding. (I don't have enough experience with design and coding yet)
Easily use multiple proxies with PAC rules
Tags: tutorial, proxy, pac
Published: 2020-09-27 16:54:40

I use proxies to view the contents of the websites that are blocked either for censorship reasons or by sanctions.

But using proxies all the time makes working with websites that are not blocked a little bit slower. There are also some internal websites (like for example.. bank websites) which cannot be opened with any proxy. And also for my own job, I need an ssh tunnel connection to open internal urls.

It can be really tiresome to switch between these proxies manually. After some research, I found a solution for this kind of situations: Setting up a PAC (Proxy auto-config) file.

PAC is a javascript file consisting of a function named `FindProxyForUrl` with `.pac` extension

```javascript
function FindProxyForURL(url, host) {
    if (host === 'a.com') {
        return 'DIRECT';
    } else if {host === 'b.com') {
        return 'SOCKS5 127.0.0.1:1081';
    }
    return 'SOCKS5 127.0.0.1:1080';
};
```

When you configure your proxy setting to use a PAC file, each time you open an address, your browser checks the url with this function to find out which proxy to use. But writing a function like this and changing it frequently can be complex and error prone.  

So I decided to create a command line tool named [PacGen](https://github.com/mehdipourfar/pacgen) to create this file. Here I want to show you how to work with it.

First we install it using pip:
```bash
pip install pacgen
```

Then we define our rules in `.yml` format in a file at `~/.pacgen.yml`. This file consists of four segements:

* `proxies` which defines our proxy servers with a name assigned to each of them.
* `routes` which is a list of predefined routes for some specific hosts.
* `excludes` which is list of the hosts that we want to browse without any proxy.
* `default_proxy` which is the name of the default proxy for the hosts that are neither in `routes` nor in `excludes`.

Here is an example of `~/.pacgen.yml` file.

```yml
proxies:
  ssh_tunnel: socks5://127.0.0.1:1081
  shadowsocks: socks5://127.0.0.1:1080
  httpproxy: http://127.0.0.1:1082
routes:
  172.19.20.10: ssh_tunnel
  youtube.com: shadowsocks
  viemo.com: shadowsocks
  news.com: httpproxy
  analytics.google.com: shadowsocks
default_proxy: shadowsocks
excludes:
  - bank.com
  - google.com
```
After you defined your rules and saved the file, you should run the command below in your terminal.
```
updatepac
```

Then it will create your PAC file in this path: `~/.proxy.pac`.

Now that we have created our pac files, it's time to serve it with a webserver. The most straightforward way to do it is using nginx:

```
sudo apt install nginx
sudo cp ~/.proxy.pac /var/www/html/proxy.pac
```

Your file will be served at `http://localhost/proxy.pac`.
Now go to your system proxy setting and choose automatic proxy option and copy the address above into `Configuration URL` field. That's all.
Configuring multiple kubeconfig on your machine
Tags: kubernetes, docker, devops
Published: 2020-09-27 17:14:21

While working with Kubernetes, probably the best way to access the Kubernetes cluster is by the using kubeconfig file provided by the cloud provider.

The kubeconfig file is a declarative YAML file which stores the configuration of a Kubernetes cluster. Basically, When you set up a Kubernetes cluster on a cloud, the cloud provider will provide you a kubeconfig file which helps you to get access to the cluster.

The kubeconfig files should be stored as KUBECONFIG in your bash_profile or else it needs to be under ~./kube/config folder if you are using Linux. This way, when you run kubectl get nodes or any other command then you will get output straight from the configured Kubernetes cluster to your terminal.

Another approach is to provide a kubeconfig path in every kubectl script you run. For example: 
```bash
kubectl get nodes --kubeconfig={kubeconfig_path}
```

However when you have multiple Kubernetes cluster running on the cloud, then it can be a bit difficult to manage those kubeconfig files, since providing a kubecofig flag to every kubectl script you run can be clumsy, confusing, and difficult to maintain.

Hence, to solve this issue, we can use the Kubernetes context. 

Suppose if you have multiple Kubernetes clusters running on the cloud and have different kubeconfig files then you can export all those kubeconfig files to the same KUBECONFIG variable, like below:
```bash
export KUBECONFIG=/home/aabishkar/Documents/kubernetes/kubeconfig/civo-google-microservice-kubeconfig:/home/aabishkar/Documents/kubernetes/kubeconfig/civo-kubernetes-practise-kubeconfig

```
Here, I have exported the kubeconfig file of two cluster name google-microservice and kubernetes-practice to the same KUBECONFIG variable. 

Now, when I run the following command:
```bash
kubectl config get-contexts
```
![Kubectl command outputl](https://dev-to-uploads.s3.amazonaws.com/i/6oc1v0hpmcn5g4duvjpm.jpg)
This will give me contexts of both dev and prod environments.
Now to switch between different Kubernetes cluster, I just have to use a single command. For example to switch to a dev cluster:
```bash
kubectl config use-context google-microservice
```
This command will switch my cluster and I can now access the google-microservice cluster without providing the kubeconfig option to every kubectl script.

I hope this helps somebody.
Thank you for reading.
Building a simple markdown editor with Flutter
Tags: flutter, markdown
Published: 2020-09-27 16:58:59

I'm currently working on an app called [Goryon](https://github.com/jointwt/goryon) - A [twtxt](https://github.com/jointwt/twtxt) mobile app. One of the few features of the app is it enables you to compose twts (kinda like your twitter message but it allows you to use Markdown). 

## What we're building
![What we're building](https://dev-to-uploads.s3.amazonaws.com/i/evj83ipy5o8zz8drj0ls.gif)



## Let's get started
To do that you'll need a `TextEditingController` that is connected to a `TextField`

```dart
_textController = TextEditingController()


....

TextFormField(
                        autofocus: true,
                        maxLines: 8,
                        controller: _textController
                        )
```


Then I created a function that surrounds the highlighted text in the text box with a  markdown syntax

```dart
  void _surroundTextSelection(String left, String right) {
    final currentTextValue = _textController.value.text;
    final selection = _textController.selection;
    final middle = selection.textInside(currentTextValue);
    final newTextValue = selection.textBefore(currentTextValue) +
        '$left$middle$right' +
        selection.textAfter(currentTextValue);

    _textController.value = _textController.value.copyWith(
      text: newTextValue,
      selection: TextSelection.collapsed(
        offset: selection.baseOffset + left.length + middle.length,
      ),
    );
  }
  ```

**left** is the string on the left hand side. **right** is the string on the right hand side. 

To make the text bold, you can do: 
 ```dart
_surroundTextSelection('**', '**')
```

Adding a code block
 ```dart
_surroundTextSelection('```', '```')
```

Adding an Image
```dart
_surroundTextSelection('![](https://', ')'),
```


Check out the full code in this [repo](https://github.com/jointwt/goryon/blob/736a98631e4ce617c476ffc4d4f5f9a6575705ef/lib/screens/newtwt.dart#L81). That's all for now!
Hugo Submodules
Tags: hugo, submodules
Published: 2020-09-27 16:50:41

Hello!! 

This blog it's made with Hugo, and today I'm going to give you some tips for sync content and git project across different machines.
<!--more-->
It's important know that when you pull your repo the submodules not pull with it. If you want to pull all include submodules you need to type this:
```bash
git clone --recursive url
```
If you have already cloned a repository and want to load it's submodules you need to type this:
```bash
git submodule update --init
```
Here I'm give you some links to explore and understading the submodules on git.

- https://opensource.com/article/20/5/git-submodules-subtrees
- https://git-scm.com/book/en/v2/Git-Tools-Submodules
Touch-less Display Interfaces on Edge
Tags: showdev, news, openvino, corona
Published: 2020-09-27 16:41:18

Isn't it risky to use public kiosks like ATMs or self-checkin at Airports during Corona times? But they are useful in our daily life too. Can you use them without touching it?

You can control them just with facial gestures or eye gazes. You can even use your head or sound to make them do what you desire. This project uses a series of AI models to accomplish this idea and hardware optimize them so that they can be edge-deployed.

Please give thumbs up in the bottom left of the page below. This is important as number of likes is the metric for the challenge, I have done this for. Thanks in advance.

https://www.hackster.io/ananduthaman/touch-less-display-interfaces-on-edge-ac9f43

Project Video:
https://youtu.be/Wt8VuhWN5Oc

#machinelearning #deeplearning #openvino #intel #edge #iot #python #gesture #hci #headpose #gaze #eyecontrol #headcontrol #gazecontrol #sound #stt #speech #speechrecognition #deep-learning #machine-learning #edge-iot #raspberrypi #pi #picam #cam #facial #landmarks #multithreaded #parallel #numerical #mathematical #models #eyewink #MAR #aspectratio #EAR #kiosk #corona #coronavirus #touchless #covid #technology #coronatech #coronatechnology #notouch #interface #display
👨‍💻 C# developer roadmap
Tags: career, webdev, beginners
Published: 2020-09-27 16:39:25

[Roadmap to become C# developer](https://infinite.education/expertise/junior_csharp_programmer)
It contains:
 * C# syntax
 * Basic programming skills
 * Computer architecture
 * Object orientated programming

Comment please what to improve at roadmap

[Roadmaps project page](https://www.facebook.com/InfEducation)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w6fp4km6wipf6uidko48.png)
Schiit Modi 2 - Fixing Windows not recognizing USB device
Published: 2020-11-16 12:45:05

---
title: Schiit Modi 2 - Fixing Windows not recognizing USB device
published: true
date: 2020-09-27 16:31:02 UTC
tags: 
canonical_url: https://bowlerdesign.tech/posts/schiit-modi-2-fixing-windows-not-recognised/
---

## Sorry for the off-topic post, but this has been bugging me for months
 ![Schiit Modi 2 - Fixing Windows not recognizing USB device](https://images.unsplash.com/photo-1522338140262-f46f5913618a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ)

Having recently purchased a Schiit Modi 2 from eBay, just to try out before commiting to something a little more expensive (and reliable).

The Modi 2 has some real issues with Windows 10, I belive the Modi 3 solves all of these issues.

There's an error message when plugging the Modi into Windows which is something like "USB device not recognized, the last USB device you connected to this computer malfunctioned, and Windows does not recognize it."

## The solution

A hairdryer... yes, I'm being serious. Apply heat directly to the Schiit Modi 2 for 10 - 15 seconds. Then try connecting the Modi to your PC. Ridiculous, I know, but it worked.

Now, I can't take any credit for this solution, the real MVP is [vavvo966](https://www.audiosciencereview.com/forum/index.php?members/vavvo966.5405/) who posted [the following](https://www.audiosciencereview.com/forum/index.php?threads/please-help-schiit-modi-2-not-being-recognized-anymore-by-windows.5943/page-2#post-136701)

There's another method which includes replacing the chip, but this involves soldering 100 tiny legs, which I'm not a fan of, but you can find some information [here](https://www.audiosciencereview.com/forum/index.php?threads/please-help-schiit-modi-2-not-being-recognized-anymore-by-windows.5943/page-5#post-468079)
Creating time - The dev superpower you didn't know you had
Tags: productivity, healthydebate, watercooler
Published: 2020-09-27 16:14:20

Let's be honest, time is the top asset in the world. ⌛ But as developers, we work for money... and...

Money is unlimited - kind of. 🤑 If anyone is familiar with what has been happening in the last 6 months with the fed printing money - you probably also realized this. It's a pity to work for the thing that some people can create with the press of a button. 

![Money print fed gif](https://dev-to-uploads.s3.amazonaws.com/i/cyavvvf5u78m4wr342qa.gif)

But what if your work could create time? ⏱️
## Coding can create time 💡
Programming might be one of the top-paying industries because it saves people time. Imagine the world without:
- Search engines - how much time would it take to find information?
- Online stores - how much time it took to buy things if you could only do it offline?
- Social networks - how much time would it take to share something, and how would you accomplish that?
- Autonomous cars - how much time people will get back because of fully autonomous driving?

Even if you think you aren't working on things at scale - you are investing your time and energy in building things that should somehow save other people's time.

### 👇 Comment below 👇
Let me know what you think. Does programming create time for people? Can we use our craft to save time for ourselves?

If you enjoyed this article chances are you will also enjoy what I post on [Twitter](https://twitter.com/alexandrudanpop).
Removing Duplicate numbers or Objects from an Array
Tags: javascript, duplicates
Published: 2020-09-27 16:05:21

<b> For Numbers </b>

```const array = [1,1,2,3,3,4,5,6]```

to remove duplicates (as Set only takes unique values):
`array = [...new Set(array)]`

or 

```array = array.filter((i, index) => array.indexOf(i) === index)```

or

```
array = array.reduce((accum, item) => {return accum.includes(item) ? accum : [...accum, item]}, [])
```


<b> For Objects </b>

e.g: If you have an array of objects like:
```
(5) [{…}, {…}, {…}, {…}, {…}]
0: {geometry: ol.g…m.Polygon, id: 17105, district_id: 20, map_type_id: 117, address: "Site at The Cranhams, Cranhams Lane, Cirencester", …}
1: {geometry: ol.g…m.Polygon, id: 17323, district_id: 20, map_type_id: 127, address: "Chesterton Farm, Tetbury Road Cirencester", …}
2: {geometry: ol.g…m.Polygon, id: 43065, district_id: 20, map_type_id: 116, address: "Land at Chesterton Farm", …}
3: {geometry: ol.g…m.Polygon, id: 49216, district_id: 20, map_type_id: 122, address: "South of Chesterton, Cirencester", …}
4: {geometry: ol.g…m.Polygon, id: 104198, district_id: 20, map_type_id: 127, address: "57 London Road", …}
5: {geometry: ol.g…m.Polygon, id: 104198, district_id: 20, map_type_id: 127, address: "57 London Road", …}
length: 6
__proto__: Array(0)

```
To remove the duplicate 57 London Road objects, where the array of objects is this.planSitesWithinSite:

```

        let siteIds = this.planSitesWithinSite.map((site) => site.id)
        siteIds = [...new Set(siteIds)] //Removes duplicate ids
        this.planSitesWithinSite = siteIds.map((siteId) => {
            return this.planSitesWithinSite.find((site) => site.id === siteId)
        })
        lsDebug({lsModule: this, message: "Planning sites within this site after removal of duplicate sites", data: this.planSitesWithinSite});

```
Start learn styled components!(3)-You can styling any component you want!
Tags: react
Published: 2020-09-27 15:55:37

The original post published on my blog: https://ms314006.github.io/Start-learn-styled-components-You-can-styling-any-component-you-want/

Hello guys, I am Clark! In this post I am going to continue share and practice about more styled components!

# Styling any component

When I read this part in documentation of styled component, I think styled component is very powerful for me. In the post that I share about styled component before, we all know the styled can create a component with style you want and we can direct using or expanding it.

In this chapter, we will learning how to styling existing components instead of HTML tags!

## Install react-router-dom

If we want to practice styling any component, we need to using components other element ui framework provide.

So first, we need to use react-router-dom in our project(I think this is a common thing), The `Link` provided bu react-router-dom is a prefect component let us try to styling through styled component.

```
npm i react-router-dom
```

## Styling existing component

When we finished previous step, we can import `Link` from react-router-dom:

```JSX
import React from 'react';
import { HashRouter, Link } from 'react-router-dom';

const App = () => (
  <HashRouter>
    <Link>I am a link</Link>
  </HashRouter>
);

export default App;
```

So...should we writing inline style? Link code below:

```JSX
const App = () => (
  <HashRouter>
    <!--inline style-->
    <Link style={{ textDecoration: 'none' }}>
      I am a link
    </Link>
  </HashRouter>
);
```

### No!

We can wrap the `Link` through like `Button` component of [last post](https://dev.to/ms314006/start-learn-styled-components-2-extending-styles-ef3). The wrap way is same, just give `styled` the `Link` parameter. Code snippet show you different between inline style and through styled component:

```JSX
import React from 'react';
import { HashRouter, Link } from 'react-router-dom';
import styled from 'styled-components';

const NoneDecorationLink = styled(Link)`
  text-decoration: none;
`;

const App = () => (
  <HashRouter>
    <!--inline style-->
    <Link style={{ textDecoration: 'none' }}>
      I am a link
    </Link>
    <br />
    <!--styled component-->
    <NoneDecorationLink>
      I am a style link
    </NoneDecorationLink>
  </HashRouter>
);

export default App;
```

I think the styled component is clearer than inline style, but the result is same:

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

# Conclusion

So if we use styled component we don't need to consider how to expanding components provided by other element ui framework!
Journal Entry #1: My resolve
Tags: devjournal, software, engineering
Published: 2020-09-27 15:34:10

I have decided to pursue a career in software engineering. But my non-CS degree does not allow me to become one. To keep track of my activities and proper evaluation of my studies and code development, I have decided to post most of my codes daily in the dev.to community. This platform will be my code journal. I believe my effort and resolve will lead me to become a software engineer one day. My blogs will tell me how much I have come from writing a "hello world" code to writing industrial-grade code.