teleren/devto huggingface dataset:
Dev Setup
Published: 2020-11-16 20:05:00

---
title: Dev Setup
published: true
date: 2020-11-16 05:00:00 UTC
tags: 
canonical_url: 
---

I try to keep my setup pretty minimal but the following is my list of must-haves. All are easily [searchable](https://startpage.com) so I have not included links except to my settings hosted as GitHub Gists.

- Physical 
  - MacBook Air (Light but powerful)
  - Logitech MX Master 2S
  - Bose QC 25
  - Fidget Spinner
  - Moleskine grid notebook
  - Lamy Safari Fountain Pen
  - Blackwing Pencil
- Digital 
  - Zsh (as well as Oh-my-zsh and zsh-completions) 
    - [.zshrc](https://gist.github.com/StephenCavender/91a3243a8b26d14f3ae6d0b747d2bba3)
  - Brew
  - NVM
  - RVM
  - VSCodium (No MS branding/telemetry) 
    - Extensions: 
      - Bookmarks
      - Bracket Pair Colorizer 2
      - ES7 React/Recux/GraphQL/React-native Snippets
      - ESLint
      - GitLens
      - JavaScript (ES6) code snippets
      - Live Server
      - Material Icon Theme
      - Night Owl
      - REST Client
      - SVG
      - TODO Highlight
      - YAML
    - [Settings](https://gist.github.com/StephenCavender/f821dd072238ba388d86da38903e8fc8)
  - Firefox (main driver)
  - Hyper
  - LICEcap
  - OBS
  - Chromium (for testing apps)
  - Chrome (for testing apps)
  - Vanilla
  - Time Out
  - OpenJDK
  - Nginx
  - SVGO
Static Analysis Tools + FireLinker
Tags: opensource
Published: 2020-11-16 04:52:57

## The Intro
This week, I added some Static Analysis Tools to my Firelinker. The Tool added was a Code Formatter known as prettier , a Linter known as eslint and IDE support from vscode. I also added a pre hook that formats my code before an commit using Husky. This blog will descibe the process of acquiring the tools and using them. 

## The Code Formatter 
[Prettier](https://prettier.io/) is a very popular code formatter for web technologies (HTML,CSS,JS,GRAPHQ,etc.) and it has very good documentation on how to add it as a dependency for your project
https://prettier.io/docs/en/install.html
Prettier is very easy to implment and has great default setting. Overall, I found the process to add Prettier very easy and very much rewarding. I added a script in my package.json to run prettier on my whole project and it one of the best tools ever.

## The Linter
[eslint](https://eslint.org/) is a linter for javascript code and it is very customizable with the settings. The linter helps keep my code clean and risk free. It as many standard you can choose from. I choose the following  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a5frtejj23r6w2fa7uvn.png). I also added 2 scripts 1 to find linting errors and the other to attempt to fix said linting errors.I have to say when i ran that script I had many linting errors and inconsistency in my code. The linter helped me find and fix them. This tool is very helpful and I will use it for all my future node projects.

## The IDE
The ide support I added was for vscode and the things I added was the default linter and formatter for the ide and small things like tab spacing ,  format on save and end of line. The support also recommend the needed extension on IDE start up with my project. This tool was an interesting addition some of the feature like format on save are great.

## The Pre-Commit Hook
I added a pre-commit hook which calls a prettier script that formats my whole repo. 
```
"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  } 
``` 
This is a simple but a great addition to the project this doesn't depend on any IDE or anything like that it does it automatically on commit. This is very needed for any project with multiple developers so its perfect for an open-source project.

## The Reflection
Overall, the tool are a great addition to the project and automate a lot of the processes making the code the focus of everyones work. The pre-commit hooks really amazed me and I want to find more stuff I can automate pre-commit  maybe I can lint and stop commits if they aren't linted properly but that for the next time or I might add an issue to see if anybody is up to adding it.
Software design principles: DRY
Tags: programming
Published: 2020-11-16 04:52:51

Today we'll be exploring a design principle called `DRY` it stands for `Don't Repeat Yourself`. Of course, a pretty obvious one, meaning you shouldn't type code more than once.

The principle states: "Every piece of logic must have a single unambiguous representation within a system".

Of course, with the upcoming of component-based frameworks, we see less and less of reused codes.

## DRY Examples

I'm going to demonstrate some simple use-cases, but they should give you a good understanding of what DRY means.

```js
const foods = ['🧀','🌶','🍉'];
const animals = ['🦞','🐁','🐕'];

revFoods = foods.reverse();
revAnimals = animals.reverse();
```

This is only a very simple function, but this can be converted to a DRY part:

```js
const foods = ['🧀','🌶','🍉'];
const animals = ['🦞','🐁','🐕'];

let reverse = (input) => {
  return input.reverse();
}

revFoods = reverse(foods);
revAnimals = reverse(animals);
```

Why would you do this?
Well, think of this code as a little bit more complicated, a full sorting function, and all of a sudden the sorting key changes, you now have to make changes twice, instead of doing it once.

Another good example is validations; this is were I personally fail sometimes.

```php
<?php
class Validator {
	public function validate(array $post)
	{
		if(!isset($post['title']) {
			throw new \Exception('validation failed, no title set');
		}
		if(!isset($post['date']) {
			throw new \Exception('validation failed, no date set');
		}
		if(!isset($post['description']) {
			throw new \Exception('validation failed, no description set');
		}
	}
}
```

While it's not specifically a violation, we could enhance this and make our lives easier in case that exception might ever change.

```php
<?php
class Validator {

	private $validateAttributes = [
		'title', 
		'date', 
		'description'
	];

	public function validate(array $post)
	{
		foreach ($this->validateAttributes as $attribute) {
        if (!isset($post[$attribute])) {
            throw new \Exception('validation failed, no '.$attribute.' set');
        }
    }
	}
}
```

There you go. I hope you learned something about not repeating yourself in code.

Looking forward to hearing what kind of things you do that you could optimize?

### 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)
My online portfolio
Tags: react, nextjs, tailwindcss
Published: 2020-11-16 04:52:44

I have decided that it is the time to try and get my first Web developer job. In order to achieve this I felt a snazzy new portfolio site was needed. 

You can see the [site](https://davidbell.co) if your'e interested. 

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

## Built with 
For my stack I went with what i've been enjoying.
* Nextjs(React) - I enjoy using nextjs to build React applications. The option for having static or server-side pages is great
* TailwindCSS - My current favourite way to style things. It saves me time writing styles, whilst keeping my CSS brain going. It's a delight to use. 
* Framer Motion - I chose this because it's easy to turn a dull web page into something spicy.
* Markdown pages - I chose to add my project pages from Markdown. When I do a project I write a short summary about it in the README file on Github. I thought it would be nice to use my project summary readme as a page on my portfolio. 

## Portfolio Purpose
I wanted a clean looking no nonsense website. The sole purpose is employment opportunities and to share my recent code projects. 

A minimal design with project briefs and contact information was all I needed.

I will add to the portfolio as I go but for the moment it's fine for my CV.
Gini Splitting Criterion
Published: 2020-11-16 04:47:14

Gini index was originally developed by statistician Corrado Gini and was used to measure economic inequality. As discussed in the previous post, Gini index is one of the options for a cost function in Sklearn Decision Trees. 
Gini impurity index varies between 0 and 1. A low value represents a better split within the tree. If we calculate the Gini index with the balanced binary target, then the initial Gini (before any split) is 0.5. 

Gini index for a multiclass problem, where p is the frequency of each class, n is the number of classes:

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

Here I will do an example with binary classification and Gini simplifies as:

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

where p+q =1.

So, when we design the split in the tree, in most of the cases, two nodes will have two different Gini indices. To describe the quality(or purity) of each split, we can use the weighted mean of two Gini indices. This is the idea behind decision tree algorithms with Gini criterion.

Let's play with scikit learn Decision Tree Classifier using Banknote authentication Data Set.


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

Here I used 960 rows as a train dataset:

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

I constructed a simple tree with depth = 2. Gini index for each split can be calculated manually by applying formula. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g8uybxpay76uj794b34h.png)
Solve CRA 4.0 slow recompile time
Tags: react, javascript, opensource
Published: 2020-11-16 03:54:20

Slow recompile time after upgrading to create-react-app 4.0 ?


Well there will be a fix for it available in next patch release but meanwhile a simple dirty trick to get up to speed :-

📌 Go to **node_modules/react-scripts/config/webpack.config.js**

📌 Add a `cache:true` key:value pair to the `ESLintPlugin` constructor object.

📌Start your app

Below is the link to the merged PR which I referred for the stated workaround. 

{% github https://github.com/facebook/create-react-app/pull/9911 %}
Best stable Linux distribution compatible with Nvidia
Tags: nvidia, bootissue, ubuntu
Published: 2020-11-16 03:33:29

I am facing a never-ending boot issues in ubuntu since it updated from 16.04 to 18 and also with 20 (All were LTS versions). Sometimes after choosing ubuntu from grub menu screen flickers and something run is running endlessly. Sometimes I can only see a black screen with no action on keyboard or mouse or try. When I googled, it showed the problem is with Nvidia, but none of the suggested solutions worked for me. This is making me to switch another LinuxOS. 

Can anyone suggest a stable Linux distribution compatible with Nvidia? I am mostly working with python and gfortan.
My home internet setup
Tags: pihole, raspberrypi, dns, censorship
Published: 2020-11-16 03:22:57

So I've been in Thailand for almost about 5 years now and I must say I really enjoy it.

Whenever I'm planning on a move from one home to other I always plan the internet first, the day we move I set an appointment with my ISP and I do this well in advance so that I never have to use my phone's data. But that's not the thing I want to talk about here.

My setup currently consists a router with modem built in which was provided by ISP directly, it's a decent router with 2 access points, one with 2.4 Ghz and one with 5 Ghz both have separate passwords, I use 5 Ghz but when I'm out of range I'm still able to use 2.4 (in case I'm out in the garden)

What I did a while back is setup pihole in my raspberrypi which was sitting around doing nonsense IoT project I did before.

Instead of pointing DNS to my rpi from each devices and having to tell guests that they can use my DNS instead of ISP dns (some people would ask what a DNS was, and that's a different conversation), I rather changed my router settings so that the settings which router provides all devices already contains my pihole dns.

This means, any device connecting to my WiFi automatically uses my DNS provider, here I can block websites, but I've done adblocking, this helped me a bunch because phones or smart TVs don't have adblocking capability that I know of. I don't do certain website blocking but I can if I wanted to.

Now because I'm using my own DNS, and Thailand's ISP does a dns filtering blocking of websites (sites that are banned in thailand), those still work! Without the use of VPN, and when the guests come they're surprised and ask if I have built-in VPN on router, I say no (they can check whatismyip and get info)

I didn't realize having your own DNS is awesome, but it totally is, and I recommend you doing the same SPECIALLY if your country does DNS blocking.
How to use Unbound with AdGuard Home or Pi-hole
Tags: adguard, pihole, unbound, dns
Published: 2020-11-16 03:21:00

1. Install unbound with your package manager. I use `apt` so in my case I `sudo apt install unbound` and it is installed, it depends on your system which package manager you have.

2. Create and edit `/etc/unbound/unbound.conf.d/config.conf`
I use `vim` but you can use whichever text editor you prefer. In my case I do `sudo vim /etc/unbound/unbound.conf.d/config.conf` 

3. Once you are in your terminal and ready to input into the config file, insert the following. Only enable IPv6 if it is native to your network, 6to4 tunneling is not native IPv6. Also you need to set `num-threads:`to the number of threads for your machine! default is one, in my config I have 4.

```
server:
  interface: 127.0.0.1
  port: 5335
  do-ip6: no
  do-ip4: yes
  do-udp: yes
  do-tcp: yes
  # Set number of threads to use
  num-threads: 4
  # Hide DNS Server info
  hide-identity: yes
  hide-version: yes
  # Limit DNS Fraud and use DNSSEC
  harden-glue: yes
  harden-dnssec-stripped: yes
  harden-referral-path: yes
  use-caps-for-id: yes
  harden-algo-downgrade: no
  qname-minimisation: yes
  aggressive-nsec: yes
  rrset-roundrobin: yes

  # If DNSSEC isnt working uncomment the following line
  # auto-trust-anchor-file: "/var/lib/unbound/root.key"


  # Minimum lifetime of cache entries in seconds
  cache-min-ttl: 300
  # Configure TTL of Cache
  cache-max-ttl: 14400
  # Optimizations
  msg-cache-slabs: 8
  rrset-cache-slabs: 8
  infra-cache-slabs: 8
  key-cache-slabs: 8
  serve-expired: yes
  serve-expired-ttl: 3600
  edns-buffer-size: 1232
  prefetch: yes
  prefetch-key: yes
  target-fetch-policy: "3 2 1 1 1"
  unwanted-reply-threshold: 10000000
  # Set cache size
  rrset-cache-size: 256m
  msg-cache-size: 128m
  # increase buffer size so that no messages are lost in traffic spikes
  so-rcvbuf: 1m
  private-address: 192.168.0.0/16
  private-address: 169.254.0.0/16
  private-address: 172.16.0.0/12
  private-address: 10.0.0.0/8
  private-address: fd00::/8
  private-address: fe80::/10
```

4. Restart unbound with `sudo systemctl restart unbound` it is now listening on the specified port and doing what the config says.

**Telling AdGuard Home to use Unbound**

1. Go into your AdGuard Home admin panel and go to Settings -> DNS settings

2. In the Upstream DNS servers box you now put `127.0.0.1:5335` and apply. 

**Telling Pi-hole to use Unbound**

1. Go into Settings and Upstream DNS settings, uncheck every DNS box and check one custom IPv4 address, input `127.0.0.1#5335` and apply


**Finalize Configuration**

7. You should enable DNSSEC in Pi-hole or AdGuard Home, whichever you're using. This way you can see in the query log the DNSSEC replies you're getting on resolved domains. 

AdGuard & Pi-hole Discord: https://discord.gg/DGscCVPRme
Project 10 of 100: React Calculator
Published: 2020-11-16 03:18:59

*Hey! I'm on a mission to make 100 React.js projects in 100 days starting October 31, 2020 and ending February 7th, 2021. Please follow my dev.to profile or [my twitter](www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [link](https://100-react-projects-day-10-calculator.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-10-calculator)

The calculator is one of the classic introductory coding projects because to do it well involves so many concepts- from OOP to styling to basic algorithms. 

I sort of failed at the functionality, but since I've done calculators before and understand the arithmetic portion I went for speed and focused on component building in React and styling for this one, which you'll notice if you try anything other than basic integer operations.

[This](https://www.dunebook.com/react-project-ideas-for-beginners/) blog post's calculator design jumped out at me so I took that screenshot for inspiration.

I used CSS Grid to quickly force the buttons into place and a controlled text component for the output, plus a separate component for the input buttons section.

This project is a real test of skill if you do it from scratch and I highly recommend it for anyone cutting their teeth in development. If you give it a try let me know how yours goes! Or if you have recommendations on how to quickly parse input data and perform calculations on it.
Connection Pools in a Nutshell
Tags: database
Published: 2020-11-16 03:06:17

###A short overview of what connections pools are and why they're important.

-----------

If you work with databases in any way, it won't be long before you encounter documentation about the **connection pool**. It will likely be one of the options in the config object you pass when connecting to the database from your server.

####Connections?
When you connect to a database, you open a **connection** -- a channel through which the server can request data and the database and send back that data. Each time you open a connection, you add another connection.

Databases can only handle so many simultaneous connections. If you misconfigure your server and open a new connection each time you want to get information from the database, you could end up opening thousands of connections and crashing your database. This is obviously very undesirable in a production environment.

We can set up a connection pool to prevent this kind of situation.

####Connection Pools
Let's say you set the connection pool to 10. This will prevent the server from opening more than 10 connections simultaneously. When the server first starts, it will open 10 connections to the database that then sit and wait for requests. Each new request from the server will go through one of these ready-and-waiting connections. 

If the 10 connections are already busy with requests, any further requests from the server will get queued until one of the existing pool of connections finishes its previous task and becomes free. This stops the database from being overwhelmed and helps to increase performance because you aren't opening and closing connections for each request -- instead, the 10 connections in the initial pool remain open as long as the server is running. Opening and closing database connections is fairly resource-intensive, so it's important to remember to set a connection pool limit whenever you work with a database.

####How Many Connections?
Deciding on how many connections to limit the pool to is a question of fine tuning. Usually, you'll set a number to start with, then look at how your database and app are performing, and adjust accordingly. If pages aren't loading quickly enough, you likely need more connections in the pool, but you'll also need to watch for performance issues on the database side once you increase the pool. If the database isn't performing fast enough, you may need to upgrade your database service.
cli-DailyBriefing
Published: 2020-11-16 02:26:54

DailyBriefing started with a plan to streamline my access to weather information with the intention of later expanding its functionality and application.

At its current incarceration, DailyBriefing supplies the user with a prompt to enter a US ZIP code, and responds with confirmation of the nearest city, then current weather conditions including temperature, condition, wind, and sunrise/sunset.  

The bottom menu prompts the user to press '1' for extended weather information, including conditions and temperature forecast data for the next 48 hours. 

Pressing '2' exits the application. 

The application design is separated along an MVC design, with separate ruby files for CLI, API access, and data objects to hold the weather data and forecast data.  This design allows for easy extension to display more weather information or additional modules including lunar cycle information.  

Later expansion of this application will be used in a low power environment such as Raspberry PI or Arduino based board to drive a custom built mirror / screen for display in a sailboat.  The customized display will have more relevant information for navigation and sailing in mid-range ocean applications.
After reviewing JS fundamentals, I found that Create-React-App is doing a lot..
Tags: react, cra
Published: 2020-11-16 02:12:53

In normal daily life, I work on create-react-app project without thinking..

Recently, I reviewed JS fundamentals. Then I realized how great create-react-app is and there're lots of assumptions wrong in my head

## Assumption #1
Syntax and ES features I'm using are supported in browsers for sure..

In fact, it's not true. CRA is filling the gap by having compilers transforming your code to the target, es5, es6, or others. And also, The gap for ES features are filled by polyfills someone added to the project. It's possibly done by yourself!

My point is you don't need to touch or think about these and you tend to forget. That's why I'm writing it down to remind myself.

```javascript
// ES6
const { count } = { count: 1 } // syntactic feature
let a = new Promise(() => {}) // functional feature

// ⬇️⬇️compiled to ES5
"use strict";
var _count = {
    count: 1
  },
  count = _count.count; // syntactic feature
var a = new Promise(function () {}); // functional feature
```
Above shown how it's compiled in Babel say you write ES6 code or the latest fancy code then the target is set to ES5.

Note that the syntactic feature is handled or changed in the output which is compatible with ES5. BUT, the functional feature is not handled, which is why polyfills should kick in. Great explanation [here](https://stackoverflow.com/questions/50986494/what-does-the-typescript-lib-option-really-do/57474312#57474312)

## Assumption #2
You can import anything: css, image, module, even [import dynamically](https://create-react-app.dev/docs/code-splitting/).

The mighty webpack is behind CRA, that's why all these magic is available.

## Others
Also tonnes of recommendations like:
- how to test with jest, react-testing-lib
- how to handle HTML Head with ReactHelmet
- how to deploy
- how to work with backend
- how to opt-in PWA
- how to fetch data
- how to config Env Variables
- how to analyze your app

It would be a nightmare if you have to do all these. And thanks to CRA, we just need to kick in whenever it's needed.