teleren/devto huggingface dataset:
The easiest way to generate Barcode with react-barcode
Tags: react, beginners, tutorial, javascript
Published: 2020-06-07 01:04:42

<img src="https://github.com/createnextapp/react-barcode/raw/master/README/logo.png" alt="react-barcode" />

## Overview

<a href="https://github.com/createnextapp/react-barcode" target="_blank">react-barcode</a> component is a light-weight and high-performance component that displays industry-standard 1D and 2D barcodes for React app. Generated barcodes are optimized for printing and on-screen scanning. It is designed for ease of use and does not require fonts.

<a href="https://codesandbox.io/s/react-barcode-p30pk" target="_blank">Live demo</a>

#### Customization

react-barcode component is easily customizable. It provides options to customize its color, height, width, and more.

#### Label

react-barcode provides an option to display a barcode with or without text along with alignment options for React.

#### Type

react-barcode supports wide a range of types.

## Features

* Compatible with both JavaScript and TypeScript
* Generate as SVG, Canvas and Image
* Support multiple <a href="https://github.com/createnextapp/react-barcode/wiki" target="_blank">barcodes type</a>

## Installation

react-barcode is available on npm. It can be installed with the following command:

```
npm install --save @createnextapp/react-barcode
```

react-barcode is available on yarn as well. It can be installed with the following command:

```
yarn add @createnextapp/react-barcode
```

##  Usage

#### SVG

```js
import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      background: '#ccffff',
    }
  });
  
  return <svg ref={inputRef} />;
};

export default App;
```

<img src="https://raw.githubusercontent.com/createnextapp/react-barcode/master/README/svg.png" alt="react-barcode svg" />

#### Canvas

```js
import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      displayValue: false,
      background: '#ffc0cb',
    }
  });
  
  return <canvas ref={inputRef} />;
};

export default App;
```

<img src="https://github.com/createnextapp/react-barcode/raw/master/README/canvas.png" alt="react-barcode canvas" />

#### Image

```js
import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      background: '#ffff00',
    }
  });
  
  return <img ref={inputRef} />;
};

export default App;
```

<img src="https://github.com/createnextapp/react-barcode/raw/master/README/img.png" alt="react-barcode image" />

To learn more how to use react-barcode:

* <a href="https://github.com/createnextapp/react-barcode#parameters" target="_blank">Documentation</a>
Write simplest an audio player in browser.
Tags: javascript, mithriljs
Published: 2020-06-07 00:57:33

---
title: Write simplest an audio player in browser.
published: true
description: 
tags: javascript, mithriljs
//cover_image: https://direct_url_to_image.jpg
---

I play with [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) tag to play mp3 file handy and portably.


This simplest audio player has no special feature, just plays an audio file!

You can use it like below.

```html
<audio src="/yourfile.mp3" controls></audio>
``` 
DONE!

...oh, This doesn't looks convenient so much.

At the least, I want to choose a file. HOW?

`<audio>` detects the file to play from `src` attribute.
So, All I need are preparing file choose and creating `<audio>` DOM.

Maybe it needs a little state managing.
1. No file to play: Only `<input type="file">` is enabled
2. There is a file to play: `<audio>` is enabled

I decided to use [mithriljs](https://mithril.js.org/) to control states because this is declarative, easy and compile free.

Implementing looks like below. (details are omitted.)

```javascript
// The global model to manage state.
const model = {
  fileObj: null,
  blobUrl: null,
};

function handleFile(e) {
  // create blob URL.
  model.fileObj = e.target.files[0];
  model.blobUrl = URL.createObjectURL(model.fileObj);
}

// The component to choose file.
const itemComponent = {
  view() {
    return m('input', {type: "file", onclick: handleFile });
  },
};

// The component rendering <audio> DOM.
const audioComponent = {
  view() {
    return m('audio', { controls: true, src: model.blobUrl });
  },
};

// Entrypoint
const app = {
  view() {
    // This draws <audio> DOM after chosen file. 
    return m(model.fileObj ? audioComponent : itemComponent);
  }
};
```

Actual implementing has file drop and restore playing posigion, but essentials are just these. (please see: https://js.do/code/451129)
Async/Await with Nodejs File System
Tags: javascript, node, asynchronous, lambda
Published: 2020-06-07 00:50:47

It's still not possible to simply use memory for all our computing.  A single S3 [object](https://docs.aws.amazon.com/AmazonS3/latest/API/API_GetObject.html) can grow up to 5TBs from a humble 1 byte. 

## fs Promises API

Please let me show you how to simply read a tiny file in `/tmp` named `data.json`.

```javascript
async function f() {
  const fsPromises = require('fs').promises;
  const data = await fsPromises.readFile('/tmp/data.json')
                     .catch((err) => console.error('Failed to read file', err));

  return JSON.parse(data.toString());
}
```

The `require` isn't exactly like Webpack's [code splitting](https://webpack.js.org/guides/code-splitting/) with dynamic imports.  I promise it's static. It just kind of looks similar.

`readFile()` returns a promise to `await` upon in an `async` function.  The single fulfilled promise provides one Node.js `Buffer`.  This is a limitation.  The `Buffer` must fit into the lambda's memory limit.  Keep a lambda safe and read small, in KBs.

## thenable

`f()` is thenable.  Try and figure out error handling yourself.  This is just an example. 

```javascript
f()
 .then((d) => console.log(d))
 .catch((err) => console.error('f() failed', err));
```

[readFile()](https://nodejs.org/api/fs.html#fs_fspromises_readfile_path_options) is pretty simple.

## File System (fs)

A lambda can possibly write a file to a file system. Our use of a file system space is safe.  

The Node.js File System Promises API is very nice. It's an extremely common module. `fs` has an asynchronous API compatible with `await`. It's somewhat exciting that Node.js is compatible with cloud bursting.  `fs` knows how to read and write.

Keep bursting! This is a sign I am comfortable holding up.
Burger Home Page Advance CSS Styling
Tags: css
Published: 2020-06-07 00:18:06

[Burger Page Demo](https://heggy231.github.io/chingu-webdev-speedrun-challenge/frontend/davie-burger/)

- To have the content centered

```css
.content .body {
  margin: 0 auto;
}
```

- Once you set fixed height on a container, remember to add overflow

<img src="https://dev-to-uploads.s3.amazonaws.com/i/f2jg312z22rx4wq7ryg7.png" alt="content overflow" width="200"/>

```css
.content {
  width: 100%;
  height: 500px;
  margin: 10px auto;
  border: indigo solid 2px;
  overflow: scroll;
}
```

- To add css borders to see how box-model is displayed for all elements

1. open dev tool
2. select top container (`html`) element
3. add styling (click on `+` on dev tool>Styles tap)

```css
* { border: 1px solid red; }
```
Navigating in React Native
Published: 2020-06-06 23:56:24

The next project I will be working on will be to convert the Subway Times web app into a React Native application. Besides the initial set up, the first thing I want to do is work on navigation. 

#### Why We Need Navigation

Navigating through a web page is done by interacting with the browser or through links. Mobile apps typically have a bar on the top or bottom of the screen that renders a screen depending on which button is pressed. React handles this with navigator components. A few of the most used navigation libraries are React Navigation and React Native Navigation.

For the Subway Times project, I will be using React Navigation. The app will be structured like so.

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

The `app.js` file will contain a drawer navigator that will list buttons that render different screens, search, lines, and Starred Stops. Each screen will be the base of a stack.  

#### Navigation Stack

An example of what a navigation stack does is when you are on an app like twitter and click on a tweet to see more information. A new screen renders, and a back arrow is displayed. The way this works is, as you visit screens, they get stacked on top of each other. The screen on top is what gets rendered. The back arrow pops whatever screen is on top off of the stack, and the previous screen will be right where you left off. Think of it like the screens are on a skewer.

###### Documentation
. *[React Navigation](https://reactnavigation.org/docs/hello-react-navigation)*
. *[Drawer Navigation](https://reactnavigation.org/docs/drawer-based-navigation/)*
. *[Stack Navigation](https://reactnavigation.org/docs/stack-navigator/)*
Memory Test game with new CSS Box Modeling applied
Tags: css
Published: 2020-06-06 23:34:36

While creating [memory test](https://heggy231.github.io/chingu-webdev-speedrun-challenge/frontend/test-memo/) game, I learned about the new css box model.  


What and why new css box model?

1. Apply `box-sizing: border-box`.

2. This changes the box model include border, padding when calculating the height or width for you so that you don't have to worry if the element will spill over the parent container.

```css
//  change the box model for all elements on the web page to the new box model.
* {
  box-sizing: border-box;
}

h1 {
  border: 1px solid red;
  height: 600px;
  width: 700px;
  padding: 10px;
}
```


image credit: https://www.oreilly.com/library/view/css-in-depth/9781617293450/kindle_split_030.html
Intro to Functional JavaScript
Tags: functional, javascript, beginners, introduction
Published: 2020-06-06 23:32:44

> This article is based on my old cheatsheet. It only includes methods provided by Vanilla JS. If you are looking for more advanced patterns, I recommend to look into [Ramda](https://ramdajs.com/). 

Do you know that out of the box JavaScript has some amazing parts, making it suitable for Functional Programming?

## Folding, Reduction, and Filtering

Let's say we have ten bank accounts.

```javascript
let accounts = [
  { id: 0, balance: 122.01 },
  { id: 1, balance: 15.111 },
  { id: 2, balance: 7703.5 },
  { id: 3, balance: 9333.2 },
  { id: 4, balance: 1472.111 },
  { id: 5, balance: 993.5 },
  { id: 6, balance: 0.222 },
  { id: 7, balance: 1599.111 },
  { id: 8, balance: 779.5 },
  { id: 9, balance: 93.2 }
];
```

To warm-up, let's find the total balance. We can do it by folding account balances using addition operator, and initial value of `0`. In JavaScript it can be accomplished using `reduce()`.

```javascript
let totalBalance = accounts.reduce(
  (sum, account) => sum + account.balance,
  0
);
```

Now, what if we need to get all the accounts with the balance of 700.00 or higher? It is done using `filter()`.

```javascript
let filteredAccounts = accounts.filter(
  (account) => account.balance > 700
);
```

What if we only need to work with account `id`s? Function `map()` is really helpful for this case! 

```javascript
let ids = accounts.map((account) => account.id);
```

We can also chain these functions, and manipulate collections in short, and elegant way. 

```javascript
accounts
  .map((account) => account.balance)
  .filter((balance) => balance < 100)
  .reduce((sum, balance) => sum + balance, 0);
```

Amazing, is not it? Now, let's see some more!

## ES6 Destructuring Operator

We have an array of ten numbers.

```javascript
let numbers = [0,1,2,3,4,5,6,7,8,9];
```

This is how we can iterate, and print them using the Tail recursion.

```javascript
function printArray(array) {
  if(array.length > 0) {
    let [head, ...tail] = array;
    console.log(head);
    printArray(tail);
  }
}
```

Using the destructuring operator, we can also create variadic functions, similar to ones in LISP.

```javascript
function variadicPrint(...array) {
  array.forEach(element => console.log(element))
}
```

All the following calls to the function above are legal.

```javascript
variadicPrint(0, 1, 2, 3);
variadicPrint(0);
variadicPrint();
variadicPrint("Hello", "world");
```

Finally, I already posted an [article about closures](https://dev.to/aakatev/counter-using-functional-approach-in-javascript-5d5h), which is probably the best part of the JavaScript.
Configurando o pfSense em modo Switch
Tags: pfsense
Published: 2020-10-22 01:22:52

---
title: Configurando o pfSense em modo Switch
published: true
date: 2020-06-06 21:51:38 UTC
tags: pfSense
canonical_url: 
---

Quem já precisou de mais portas no switch e não tinha mais? Uma possibilidade que você tem é transformar algumas portas do seu **Firewall pfSense** em Switch. Ou então deixar o seu Appliance em modo IDS e assim monitorar todo o trafego da sua rede. Mas como consigo fazer isso?

Nesse artigo vou te mostrar passo a passo!

## Configurando as portas para o modo bridge

Vamos usar as interfaces LAN OPT1 e OPT2 do seu firewall, caso tenha mais portas você pode adiciona-las.

![](https://blog.idtecnologia.com.br/wp-content/uploads/2020/06/atribuicao-interfaces-pfsense.png)

Para ativar cada interface você precisa selecionar as interfaces disponíveis e clicar em Add e após isso Save.

É necessário entrar em cada interface e habilita-la e depois não esqueça de salvar.

![](https://blog.idtecnologia.com.br/wp-content/uploads/2020/06/habilitando-interface-pfsense-1.png)

Agora você precisa ir no Menu Interface, selecionar (Assign) e escolha a guia Bridges

![](https://blog.idtecnologia.com.br/wp-content/uploads/2020/06/Interface-bridge-do-pfSense.png)

Selecione o OPT1 e OPT2 usando o Control do teclado, mas não selecione a interface LAN, e depois clique no botão salvar.

Agora retorne para o Menu Interfaces clique em Assign e você vai visualizar a interface que você criou que no nosso caso é Bridge0

![](https://blog.idtecnologia.com.br/wp-content/uploads/2020/06/bridge-selecionada-pfsense.png)

## Habilitando as configurações do Bridge

Clica no menu System, Advanced, vai na guia System Tunables e altere os seguintes parâmetros:

Em **net.link.bridge.pfil\_member** altere o valor para 0 e clique em salvar

Depois em **net.link.bridge.pfil\_bridge** altere o valor para 1 e salve

![](https://blog.idtecnologia.com.br/wp-content/uploads/2020/06/system-tunables-pfsense-1.png)

Aplique as mudanças para ter efeito e reinicie o [firewall pfsense](https://www.idtecnologia.com.br), após isso é só testar.

O post [Configurando o pfSense em modo Switch](https://blog.idtecnologia.com.br/configurando-o-pfsense-em-modo-switch/) apareceu primeiro em [ID Tecnologia - Soluções em Segurança da Informação](https://blog.idtecnologia.com.br).
Understanding 'this' in javascript.
Tags: javascript, tutorial, codenewbie, freecodecamp
Published: 2020-06-06 22:58:03

To better understand **'this'** keyword in javascript, we need to have a mental model of how code execution happens in javascript. 
Each time javascript code is executed, an **'Execution Context'** is created by default. This is known as **Global Execution Context**.

Each time a function is executing, a new execution context is created for that function, This can be called **Function Execution Context**.

Think of execution context as a box, some container, and inside of it is information about the code that is currently executing and the environment around it. Information like, what **variables** are declared inside this executing code, what is the value of **'this'**, what is the **global object**, what other code surround this executing function. Are you with me? Okay.

Part of a function's execution context is a reference to the value of **'this'**. What this means is that every execution context has a value for **'this'** and this **value** is set by the javascript engine by default depending on how the function was called(More on this later) and it may be different each time the function is executing. So we can say **'this'** is a property of the execution context.

**'this'** always points to an object in non-strict mode, and points to undefined in strict mode. It points to the object that is in charge of the currently executing function, that is the object the function was called on.
```javascript
a)
function greet() {
  console.log(this); 

}

greet(); // Window {...} in a browser
```
```javascript
b)
const boy = {
  name: 'Sage',
  greet() {
    console.log(this); 
  }
};

boy.greet(); // { name: 'Sage', ...}

```
As you can see from the snippet above, In javascript how and where you call a function is more important than where it was defined, one reason is that it determines the value of **'this'** in that execution context.

In a) ***'this'*** points to the global object because it's not executed on an object and is executed in the global scope. 

```javascript
function greet() {
  console.log(this); 

}

greet(); // Window {...} in a browser
```

In b) Since 'greet' method was called on an object, it's ***'this'*** defaults to the object it's called on.

```javascript 
const boy = {
  name: 'Sage',
  greet() {
    console.log(this); 
  }
};

boy.greet(); // { name: 'Sage', ...}
```

Any method called on an object automatically has its **'this'**  set to that object by default. 

Functions not called on an object have their *'this'** set by default to the global object (Window object in the browser). This behavior is similar for arrow functions.

To set a **'this'** value explicitly, use the ```javascript .bind()``` method. It creates a new function that has it's **'this'** bound to the object passed to it. 

Also see this, [How to use bind in javascript.] (https://dev.to/tuzzy08/how-to-use-bind-in-javascript-oib)
Ethereum: Explained in the easiest way possible
Tags: blockchain, ethereum, bitcoin, beginners
Published: 2020-06-06 22:04:16

**Although Ethereum is just another popular application of Blockchain, it's mainly misunderstood as being a cryptocurrency like bitcoin. In this mini-guide, I'll explain about Ethereum in the simplest way possible.**

Blockchain can be used in so many ways & scale, that it has become a popular topic since the last few years. This is mainly because of it's decentralised & secure structure.

*If you wanna know more about Blockchains, I have explained it in a very simple language in my last blog. You can check it here :* {% link https://dev.to/mindninjax/blockchain-explained-in-easiest-way-possible-4j5c %}

When it comes to Ethereum, Dr Gavin Wood has explained it very clearly:

>Bitcoin is first and foremost a currency; this is one particular application of a blockchain. However, it is far from the only application. To take a past example of a similar situation, e-mail is one particular use of the internet, and for sure helped popularise it, but there are many others.

In simple terms, Ethereum is nothing but software based on Blockchain technology which can be used to create more Blockchain applied applications.

##Are Bitcoin & Ethereum same?
**Well yes, but no!**

Both Bitcoin & Ethereum are based on Blockchain but they differ from each other in terms of purpose.

Bitcoin can be said as a cash system which mainly used to carry out transactions through the Blockchain network. While on the other hand, Ethereum is used to create & run Programming codes of distributed applications.

One of the popular examples of Ethereum application is **Smart Contracts**.

Smart Contracts, as the name suggest, are generally contracts which are used to facilitate the transaction of money or anything else of value. They have an advantage over traditional contracts in terms of their mechanism. A smart contract is generally a computer program which executes only when certain condition as per contract terms met. This makes it more secure. It helps to prevent incidents like frauds & third party involvement.

*Well, that's it for now!*

**Additional sources for more info:**
- [A Gentle Introduction on Ethereum](https://bitsonblocks.net/2016/10/02/gentle-introduction-ethereum/)
- [How Ethereum works?](https://www.preethikasireddy.com/post/how-does-ethereum-work-anyway)
- [Power of Smart Contracts](https://medium.com/@BangBitTech/the-power-of-smart-contracts-on-the-blockchain-how-can-businesses-get-the-advantage-b8abd5086caf)

*Well, hey everyone I hope you found this article useful & as usual I'll keep it updated as I discover more amazing stuff about it. I also wanna thanks to all of you for such a great response on my previous post. Thank you so much :D*
MongoDB vs TerminusDB - TerminusDB Discussion #13
Tags: database, comparison, discuss, video
Published: 2020-06-06 21:58:38

---
title: MongoDB vs TerminusDB - TerminusDB Discussion #13
published: true
description: Every week the TerminusDB core team get together to hear a talk led by one of our members. The discussions are always very interesting, so we thought we'd share. This week we have our developer comparing MongoDB vs TerminusDB.
tags: database, comparison, discussion, video
---
Every week the TerminusDB core team get together to hear a talk led by one of our members. The discussions are always very interesting, so we thought we'd share. This week we have our developer comparing MongoDB vs TerminusDB.

Let me know your thoughts. What do you think? Do you agree?
Using gitalk as a commenting system
Tags: showdev, vue, blogs, portfolio
Published: 2020-06-06 21:14:23

## What is Gitalk

[Gitalk](https://github.com/gitalk/gitalk) is a commenting system that can be used as an alternative to Disqus. Gitalk uses the Github issues to track comments.

I found it really nice. I think developers should use something like gitalk instead of disqus because it's open-source, uses github issues to track comments.

Also, if you plan on using gitalk and are building a vue or gridsome app. Here are plugins for you that make adding Gitalk to your app easier.

- Vue Gitalk - https://github.com/nishantwrp/vue-gitalk
- Gridsome Plugin Gitalk - https://github.com/nishantwrp/gridsome-plugin-gitalk
Handy Bash/Zsh function to generate PlantUML diagrams
Tags: tooltips, plantuml, bash
Published: 2020-06-06 20:56:11

In this short clip, we'll look at creating a simple Bash/Zsh function wrapping PlantUML so that we can use it from anywhere.

#### Requirements:

* PlantUML: [Direct Download](http://sourceforge.net/projects/plantuml/files/plantuml.jar/download)

Download it where you can easily refer to it. 

```bash
nmn$ ls -l $TOOLS_HOME/plantuml/plantuml.jar
-rw-r--r--@ 1 nmn  staff  7985304  9 Nov  2019 /Users/nmn/tools/plantuml/plantuml.jar
```

Next, we'll create a function and put that in bash/zsh profile so that it can be loaded automatically on each session.

```bash
function plantuml() {
    NAME=$1
    cat $NAME | java -DPLANTUML_LIMIT_SIZE=8192 -jar $TOOLS_HOME/plantuml/plantuml.jar -pipe > $NAME.png
    open $NAME.png
}
```

Then you can call this function with the file name.

```bash
plantuml sample.png
```

Once you have it setup, this will convert the provided plantuml file to a PNG image and open it up using the default PNG viewer.

Here it is in action

{% youtube Wy02jNNkhIE %}

📝:

👉 Tested on MacOS but should work on earlier versions and all flavours of Linux