teleren/devto huggingface dataset:
How to know which rules of ESLint are actived?
Tags: yarn, eslint, jq
Published: 2021-08-13 16:34:25

ESLint有一个``--print-config``参数，设置以后不执行校验，只是会显示应用到对应文件的所有设置，当然这其中包含规则列表，比如：

```
yarn eslint --print-config src/App.jsx
```

考虑到上面的输出结果就是个json，我们用``jq``提取一下规则列表：
```
yarn eslint --print-config src/App.jsx | jq '.rules'
```

直接报错：``parse error: Invalid numeric literal at line 1, column 5``，原来执行yarn run，是有一些日志输出的，不属于json的一部分，我们需要将不需要的日志输出去掉：
```
yarn --silent eslint --print-config src/App.jsx | jq '.rules'
```

下一步，我们把规则的key提取出来，这样就能得到一个针对jsx文件的规则列表了。
```
yarn --silent eslint --print-config src/App.jsx | jq '.rules' | jq 'keys[]'
```

### References
* https://eslint.org/docs/user-guide/command-line-interface#--print-config
* https://stedolan.github.io/jq/
* https://classic.yarnpkg.com/en/docs/cli/install#toc-yarn-install-silent
* https://stackoverflow.com/questions/23118341/how-to-get-key-names-from-json-using-jq
How does AI bounding box detection work?
Tags: ai, javascript, tensorflow, machinelearning
Published: 2021-08-13 16:29:49

---
title: How does AI bounding box detection work?
published: true
description: How does Object Detection work with AI models? You'll know in a few seconds.
tags: AI, JavaScript, TensorFlowjs, MachineLearning
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ln9xwzww9soqtoerbuau.jpg
---

### 🧠 Learn in 30 seconds

It looks so simple when AI does it right?

But the AI doesn't give you an image, it gives you data.  It's up to you to make it look simple.  The results you get are presented in a way so you can choose specific items from all the returned results.

![Object Detection Balloon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psdexutcx4a3vgzjkwg1.jpg)

You might think a box gives you four values, and you're right, but it only gives you TWO points.  From that you can infer a box to draw that identifies the object.

![Object Detection Math 2 points](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzwl92lixo78ckv2edfg.png)

However... it very rarely gives you one box.  Lots of times you get a whole bunch of boxes for you to chose from.

This is because the model is often trained to return X results no matter what, and sometimes it's meant to detect a whole wide array of objects, not just one.

![Overlap Object Detection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haa609wnm0kqblp2eymq.png)

Many boxes are identified by what they are detecting, like people or tables etc.  But you might have a photo with three people in it, and it returns 30 people boxes.  Each of these boxes generally give you a score of confidence, and it's your job to identify if they are identifying the same object, or separate objects.

There's some well known algorithms to take the best of the best.

![Object Detection Scores](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3nr6z40b0sdn3u6r6h0.jpg)

Once you have the boxes you're interested in, you can draw them easily with a canvas.  In JavaScript you just overlay a canvas on the image and draw rectangles there.

![Detection overlay in JavaScript Web](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zenkkd6wg65pp1y4et4j.jpg)

The final result lets you draw clean object detection on websites.  It's pretty cool and easy to do this on images and video.

![Object Detection with nonMaxSuppression](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ts3jvnfktkldq36u781w.jpg)

Want the code to do this?  It's all in Chapter 6 of my book with a deep explanation. 

[Buy a copy of the book
![Book Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy96lrsdpbeuj8blrna0.jpg)](https://amzn.to/3dR3vpY)

I'm looking forward to what you can do with your very own AI object detection!  Don't forget to tag your cool stuff with the #MadeWithTFJS Hashtag on Twitter!

And don't forget to follow me for more AI tidbits like this!

![Rock Paper Scissors in TensorFlow.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7611cgyuta5vnupe1k73.gif)
I learned it from an interview: Is this a library or a framework?
Tags: beginners, javascript, reactnative, angular
Published: 2021-08-13 16:16:43

I learned a lot of things I didn't know during a job interview. Today I share with you the first one: Is there a difference between library and framework?  Of course there is, but I didn't know it. For me they were the same.

The first thing that we have to know is both libraries and frameworks are pieces of code written by someone else that is used to help solve common problems and helps you to write your code faster and easier.

I think developers often use the terms “library” and “framework” interchangeably. There is a technical difference.

The technical difference between a framework and a library lies in a term called inversion of control. In other words, inversion of control defines the relationship between the code and a library or a framework.

🔹 When you use a library, you are in the charge of the application flow. You choose when and where to call the library and use it. React is a good example of a JavaScript library.

Let’s use an example of baking a cake. You are the baker. So you have control over the baking process. You have a recipe and some of the ingredients, which represent your program. However, you need to go to the supermarket to buy the rest of the ingredients, which represents a library.

🔹 When you use a framework, the framework is in charge of the flow. It will provide you the places you can plug your code and it calls your code when needed. Angular is an example of a Javascript framework.
In this case, rather than baking the cake yourself, you go to a bakery to buy a cake. You get to choose the size, shape, and decorations, and the bakery will bake the cake for you according to your specifications. The bakery represents a framework and your customization represents your code.

A framework inverts the control of the program. It tells the developer what they need. A library doesn’t. The programmer calls the library where and when they need it.

So what do you think? Did you know the difference between these two words?
What else did you learn during a job interview ?
How to force ESLint to display warning as error
Tags: eslint
Published: 2021-08-13 16:10:17

eslint有一个``--max-warnings``参数，如果不设置这个参数，或者设置为``-1``，遇到error会exit(1)，但是如果没有error只有warn，则会exit(0)，也就是成功返回。

为这个参数，可以设置一个最大容忍的警告数，超过这个数量就会报错终止，但实际上我们也可以零容忍，就是把这个值设置为``0``，这样哪怕只有一个警告，也会终止，提早发现问题存在。

好的习惯，在production的时候，warn确实应该是零容忍。如果可以在development的时候也零容忍，那当然就更棒了。

```
"scripts": {
  "lint": "eslint --max-warnings 0 --ext .jsx --ext .js src/",
},
```

有哥们[提到](https://github.com/eslint/eslint/issues/2309#issuecomment-268697906)还有一个``--strict``参数，效果类似，但是我在文档中没有找到。

### References
* https://eslint.org/docs/user-guide/command-line-interface#--max-warnings
Embedding a React Application in Go Binary
Tags: go, react
Published: 2021-08-13 15:52:44

Go 1.16 has come out with a feature which I waited for quite some time. With [*Embed*](https://golang.org/pkg/embed/) we will be able to add static files into the go binary at build time. It also makes accessing the files as simple as dealing with File System APIs.

This has opened up a whole new world on building and deploying web applications. Now we can embed static web apps along with the API server built in Go. In this article, we are going to explore how we can embed a React application in Go binary at build time.

First, let us create a React application using Create-React-App.

```
npx create-react-app react-app
```

Once the application is created, we will have the default `App` component which shows the React icon. We are not going to change it. We are just going to use it as it is and embed. So let's build the app, so that we can get the static files from the `build` folder.

```
npm run build
```

Create a folder in which we are going to code the Go application. Copy the `build` folder into the newly created folder.

```
/
|-build
| |- React build files here
|-main.go
```

```go
package main

import (
	"embed"
	"fmt"
	"io/fs"
	"net/http"
)

//go:embed build
var embeddedFiles embed.FS

func main() {
	fmt.Println("Starting Server")
	http.Handle("/", http.FileServer(getFileSystem()))
	http.ListenAndServe(":9000", nil)
}

func getFileSystem() http.FileSystem {

    // Get the build subdirectory as the
    // root directory so that it can be passed
    // to the http.FileServer
	fsys, err := fs.Sub(embeddedFiles, "build")
	if err != nil {
		panic(err)
	}

	return http.FS(fsys)
}
```

Notice the directive `go:embed build`. The variable `embeddedFiles` will be initialized with a reference to the File System containing 
the `build` folder as a subdirectory.

```
go build main.go
```

Now build the Go application, get the binary and run it wherever you want and go to `http://localhost:9000`, you will see the React appliation. It is a single binary containing all the static assets. Easy to deploy or distribute.

This open's up a lot of possibilities. We can embed multiple small frontend applications into a Go binary and they can work together. Everything that can be done on nginx can be very well done using Go while still having all assets packed together.
How to fix Error Failed to load typescript eslint parser in eslint-config-react-app
Tags: eslint, createreactapp
Published: 2021-08-13 15:48:06

用create-react-app创建的项目，直接执行``yarn eslint .``，会抛出以下错误：

```
Error: Failed to load parser '@typescript-eslint/parser' declared in 'package.json » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
```

原因是校验根目录下所有文件，自然也包括node_modules目录的文件，里面有typescript代码，于是就用typescript parser解析，但项目创建的时候又没有创建成typescript项目，于是缺少组件，自然会报错。

解决办法就是只校验``src``目录就好了。

```
yarn eslint "src/**/*.js"
yarn eslint --ext .jsx --ext .js src/
```

### References
* https://github.com/facebook/create-react-app/issues/8936
Day 171
Tags: 100daysofcode, programming
Published: 2021-08-13 15:29:53

Day 171/200 of  #100DaysOfCode 

- Solved three problems on Codewars.

1 - Are they the "same"? (6 kyu)
2 - Human Readable Time (6 kyu)
3 - Is a number prime? (6 kyu)
Better JS Logging for Micro-Frontends, Browser, Node
Tags: javascript, node, typescript, showdev
Published: 2021-08-13 15:22:24

**Official documentation can be found here:**
[https://adzejs.com](https://adzejs.com)

Hey everyone, I recently released version 1.1 of Adze, a library that solves a lot of the pain points of handling logs in multiple environments and logging with modular systems like micro-frontends.

As you may already be aware there are a number of other good JS libraries out there to assist with logging. The focus of Adze is to provide a convenient and clean API, provide first-class TypeScript support, and to empower you to take command of your logs rather than pigeon-hole you into a specific way of handling them.

Here is a list of the features that Adze provides:

- First-class TypeScript support
- Multi-environment support for the Browser and Node
- Wraps and extends the entire standard API
- A fluent, chainable API
- Log Listeners for capturing log data
- Log annotation namespaces, labels, and other meta data
- Attractive styling (EMOJI'S INCLUDED and consistent across major browsers)
- Everything is configurable
- Enables completely custom log levels
- A global log store for recalling logs and overriding configuration (supports micro-frontends and modules)
- Support for Mapped Diagnostic Context
- Convenient unit testing environment controls
- Advanced Log Filtering
- and much more...

![Default Output Example](https://adzejs.com/assets/img/demo.ce24f23e.png)

Beyond the new features that Adze provides you, it also wraps the entire console web standard.

**Example:**

```typescript
// ----- setup.js ----- //
import { adze, createShed } from 'adze';

// Adze can be used without any configuration.
adze().log('Hello World!');

// But you'll likely want to set it up like this...

/* A shed is a global log store used for listeners and caching 
   as well as configuration overrides. */
const shed = createShed();

/* Let's create a log listener to transport our log data
   to a destination. We'll listen to all log levels. */
shed.addListener('*', (data, render) => {
  /* If a log does not render then we will ignore transporting 
     it. */
  if (render) {
    // Do transport logic here.
  }
});

// Let's create an Adze configuration (or import it from an env file).
const cfg = {
  logLevel: 1,
};

// Now we'll create a new factory using seal
export const log = adze(cfg).label('foo').count.seal();
```

```typescript
// ----- elsewhere.js ----- //
import { log } from '~/setup.js';

// And now we can create new logs using our new factory
log().error('An error occurred! Oh no!');
log().error('Another error occurred! Quick! Help!');
log().log("I won't display because my log level is too high.");
```
catch yourself before you duplicate session
Tags: cli, linux, tmux
Published: 2021-08-13 15:18:58

---
title: catch yourself before you duplicate session
tags: ['cli', 'linux', 'tmux',]
series: tmux
canonical_url: https://waylonwalker.com/tmux-has-session/
published: true

---

I see you there, trying to script out your tmux layouts. Tryig to get each project setup just perfect with a script, but you keep stumbling over yourself with `duplicate session` error messages

The `has-session` tmux command is a handy tool to prevent this `duplicate session` error message when scripting your tmux layouts.

## command line

The command is pretty straight forward, you simply ask tmux if the session name
you are looking for exists.

``` bash
tmux has-session -t "waylonwalker_com"
```

Be sure to check out the full YouTube playlist and subscribe if you like it.

[![tmux playlist on youtub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4cgo76y53s1hwykajo1.png)](https://www.youtube.com/playlist?list=PLTRNG6WIHETB4reAxbWza3CZeP9KL6Bkr)

{% post https://dev.to/waylonwalker/how-i-navigate-tmux-in-2021-2ina %}
44 - AKS, AGIC and Kubenet - Tips and tricks to make it work
Tags: azure, azureapplicationgateway, kubernetes, security
Published: 2021-08-13 15:03:16

**This post was originally published on Fri, Aug 13, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/aks-agic-kubenet-tips-tricks).**

When using Azure Kubernetes Service (AKS), there's a chance that kubenet might be the only possible choice due to your requirements. If so, you may still want to use Application Gateway Ingress Controller (AGIC) to leverage Azure Application Gateway's Web Application Firewall (WAF) capabilities. In this session, we will make the journey together to have a working AGIC in an AKS cluster with kubenet and managed identities.

{% youtube G7Lp2iUVpv4 %}
Ficha básica responsive con Tailwindcss 📜
Tags: css, tailwindcss, html, spanish
Published: 2021-08-13 14:58:29

Hace pocos días que estoy probando Tailwindcss como framework css para realizar proyectos personales y hasta ahora con lo poco que se estoy más que complacido.

A continuación les comparto un ficha responsive bastante básica que pude hacer, espero les sirva de algo.

La ficha como tal se ve de la siguiente manera: 

![img](https://raw.githubusercontent.com/crisdux/ficha-responsive-tailwindcss/main/public/img/ficha.gif)

El código del `index.html` es el siguiente:

```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" href="./css/styles.css">
    <title>Document</title>
</head>

<body class="font-overpass-mono">
    <section class="container">
        <div class="min-h-screen bg-gray-200 flex justify-center items-center ">
            <div>
                <div class="gradiente px-8 py-6 rounded-lg space-y-5 max-w-md">
                    <div class="flex items-center space-x-5 sm:flex-col sm:space-y-5 ">
                        <h1 class="uppercase text-3xl font-semibold text-white text-center pl-2
                                    sm:font-bold sm:text-gray-800">
                            Cristian Fernando
                        </h1>
                        <img src="./img/user.svg" alt="user" class="h-40 w-full">
                    </div>
                    <p class="text-center text-gray-900">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
                        esse perspiciatis ad ullam. Magnam, quibusdam!</p>
                    <div class="flex justify-center">
                        <button class="py-2 px-3 w-full bg-indigo-500 text-white rounded-lg uppercase hover:bg-indigo-600
                        sm:w-40">
                            Ver más
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </section>
</body>

</html>

```

Y el repositorio completo en Github puedes verlo acá:

{% github crisdux/ficha-responsive-tailwindcss %}
Nodezap - Build internal tools & workflows at the speed of thought
Tags: workflow
Published: 2021-08-13 14:51:27

Hi,

Visualising your data can become easy and interactive using Nodezap , you can create interactive charts, write custom business logic around the data and many more things.

Connecting Nodezap to external databases such MongoDB, Postgresql etc takes just a few minutes, and lets you to quickly build internal tools like admin panels on your data.

Nodezap lets you use queries to manage the data in your data collections/tables. For example, you can render sales data from external system into Tables in Nodezap and start manipulating the data on external dataset right from within Nodezap tables. Nodezap supports both reading to and writing from external databases. With Nodezap’s prebuilt logic blocks, you can also build custom logic to manipulate the data.

link: https://www.nodezap.com

Thanks and Cheers.
How to use the T.INV function in Excel office 365? – Easy Tricks!!
Tags: tousethetinvfunction, excel, excelfunctions
Published: 2021-08-21 04:15:48

---
title: How to use the T.INV function in Excel office 365? – Easy Tricks!!
published: true
date: 2021-08-13 14:50:43 UTC
tags: ToUseTheTINVFunction,Excel,ExcelFunctions
canonical_url: https://geekexcel.com/how-to-use-the-t-inv-function-in-excel-office-365-easy-tricks/
---

The **T.INV function** in Excel returns the **inverse of t distribution** , i.e. it returns the **student t distribution x value** corresponding to the **probability value**. The function takes **probability and degrees of freedom** for the distribution. In this short tutorial, we describe **how to Use The T.INV Function In Excel Office 365** in simple steps. Let’s get into the **article!!**

## T.INV Function syntax

```
=T.INV(prob , deg_freedom)
```

**Syntax Explanation:**

- **prob** : **value** at which **x is evaluated**
- **deg\_freedom** : **degrees of freedom**

## Example

- Firstly, you have to create the table with **t distribution argument** and **value**.
- Here, you need to **create** data **probability value**  and  **degree of freedom**.

![](https://geekexcel.com/wp-content/uploads/2021/08/create-t-distribution-argument.png)<figcaption>Create data with value</figcaption>

- Then, you have to calculate the **probability percentage** for the **t distribution**  **one-tailed** test using the **T.INV function** in Excel.
- Now, you need to use the following **formula** to calculate the value.

```
=T.INV(B2 , B3)
```

![](https://geekexcel.com/wp-content/uploads/2021/08/Use-TINV.png)<figcaption>Use T.INV formula</figcaption>

## Sum-Up

In the above short tutorial, we have illustrated how to **Use The T.INV Function In Excel Office 365**. Hope you like this article. Please feel free to state your **query** or **feedback** for the above article. Thank you so much for Reading!! To learn more, check out **[Geek Excel](https://geekexcel.com/)!! **and [**Excel Formulas**](https://geekexcel.com/excel-formula/) **!!**

**Keep Reading:**

- **[How to add a secondary axis in Excel Office 365? – quick Tricks!!](https://geekexcel.com/how-to-add-a-secondary-axis-in-excel-office-365-quick-tricks/)**
- **[How to Use Excel T Function in Office 365? [With Examples]](https://geekexcel.com/how-to-use-t-function-in-microsoft-excel-365-with-examples/)**
- **[How to Create a Normal Distribution Chart (Bell Curve) in Excel?](https://geekexcel.com/how-to-create-a-normal-distribution-chart-bell-curve-in-excel/)**
- **[Excel Formulas to Generate Random Number Weighted Probability!!](https://geekexcel.com/excel-formulas-to-generate-random-number-weighted-probability/)**
Node.js wrapper functions
Tags: node, tutorial, backend
Published: 2021-08-13 14:46:04

Suppose you are asked what would happen if you run a file which has only one line of code <code>console.log(arguments)</code> in the Node.js environment. What would be your first guess?

You might think that it would return a reference error saying <code> arguments is not defined</code>. But that is not the reality. If you actually try to run it, it would give you some output that would look like the one shown in the image below

![Node.js wrapper functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22yfewnyc79v9zvvjb22.png)

In Node.js every file has a wraps every file it executes with a function and thus <code>console.log(arguments)</code> prints the 5 arguments that node passes to that wrapping function.

To understand it better here is a commented code which tells how it happens.

![Node.js wrapper functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljy05rxnvguqotztt01u.png)

Here, as we see the wrapper function has 5 arguments namely,
<ol>
<li> export</li>
<li> module</li>
<li> require</li>
<li> __filename</li>
<li> __dirname</li>
</ol>

Interestingly, you might have used some of these here and there but, like me, you have just now figured out why it happens. 

<ul>
<li> module and export can be used to change current module itself. Module has an object called exports which has a default value of {} </li>
<li> require is used to import other modules into your file/app</li>
<li> __filename and __dirname are the path of the current file and the current working directory</li>
</ul>

Here are some of the articles that I found quite helpful to understand and play along with the wrapper functions.



<a href="https://medium.com/free-code-camp/require-module-in-node-js-everything-about-module-require-ccccd3ad383"> Everything you should know about module and exports </a>

<a href="geeksforgeeks.org/how-to-change-the-nodejs-module-wrapper/#"> Changing the default Node.js wrapper </a>
Learn Javascript array methods with the help of emojis
Tags: javascript, webdev, beginners
Published: 2021-08-13 14:37:13

```javascript
//Concat
['🏋🏻‍♂️', '🏃🏻'].concat('🧘🏻') = [ '🏋🏻‍♂️', '🏃🏻', '🧘🏻' ] 

//Join
['🤴🏻', '👸🏻'].join('💍') = '🤴🏻💍👸🏻'

//Slice
['😭', '😶', '😀'].slice(2)= [ '😀' ]

//Index of
['0️⃣', '1️⃣', '2️⃣', '3️⃣'].indexOf('1️⃣') = 1

//Includes
['0️⃣', '1️⃣', '2️⃣', '3️⃣'].includes('1️⃣') = true

//Every
[
  {label: '0️⃣', type: 'emoji'}, 
  {label: '1️⃣', type: 'emoji'}, 
  {label: '2️⃣', type: 'emoji'}, 
  {label: '3️⃣', type: 'emoji'}
].every(item => item.type === 'emoji') = true

//Some
[0, '1️⃣', '2️⃣', '3️⃣'].some(item => typeof item === 'number') = true

//Fill
['😀', '😃', '😄'].fill('🤪') = [ '🤪', '🤪', '🤪' ]

// Map
['0️⃣', '1️⃣', '2️⃣', '3️⃣'].map((item, index) => item + " -> " + index) = [ '0️⃣ -> 0', '1️⃣ -> 1', '2️⃣ -> 2', '3️⃣ -> 3' ]

// Map
['0️⃣', '1️⃣', '2️⃣', '3️⃣'].filter((item, index) => index === 1) = [ '1️⃣' ]

//Reduce
['0️⃣', '1️⃣', '2️⃣', '3️⃣'].reduce((acc, current) => acc + current) = '0️⃣1️⃣2️⃣3️⃣'

//Push
['🤬', '😡', '🙂', '😊'].push('😄') = 5 // it will insert '😄' to list at last

//unshift
['😡', '🙂', '😊', '😄'].unshift('🤬') = 5 // it will insert '🤬' to list at first

//Pop
['🤬', '😡', '🙂', '😊', '😄'].pop('😄') = '😄' // it will remove '😄' from list

//Shift
['🤬', '😡', '🙂', '😊', '😄'].shift() = '🤬' // it will remove '🤬' from list

//Reverse
['🤬', '😡', '🙂', '😊', '😄'].reverse() = [ '😄', '😊', '🙂', '😡', '🤬' ]
```

Thank you!!
Cheers!!