teleren/devto huggingface dataset:
How does Optional Chaining make React App development easier?
Tags: javascript, webdev, react
Published: 2020-09-25 22:03:07

What do you do when you are not sure that the object variable has the specific property?

My recent answer is **Optional chaining**.

## What is Optional chaining?

> The optional chaining operator (`?.`) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. [Optional chaining (?.) - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)

I just quoted from MDN haha.

**It basically makes it easier to access a property within an object**.

## How does it make React App development easier?

Imagine you fetch the user data from Firebase Authentication.

The user variable will be like this after fetching data.

```javascript
{ displayName: 'Mike' }
```

```javascript
import React from 'react';
// Use Context API and make useStateValue
import { useStateValue } from './context/useStateValue'

function App() {
  const [user, dispatch] = useStateValue(null);

  return (
    <div className="App">
      <h1>Welcome, {user.dispayName}</h1>
    </div>
  );
}

export default App;
```

**What's gonna happen?**

```
TypeError: Cannot read property 'dispayName' of null
```

![error image](https://dev-to-uploads.s3.amazonaws.com/i/6u74ntyklh8aewp5jo03.png)

Yes, this is what happens.

### Conventional way

#### Trinomial calculus

I always used *Trinomial calculus* before Optional Chaining in this case.

In this pattern, your React app renders `<div>Loading…</div>` initially and then show `<h1>Welcome, Your Name</h1>` after fetching data from Firebase.

I kinda like this because `<h1>` doesn't get rendered until it's needed to be rendered.

```javascript
{user ? <h1>Welcome, {user.dispayName}</h1> : <div>Loading…</div>}
```

#### Nullish coalescing Operator

```javascript
<h1>Welcome, {user && user.dispayName}</h1>
```

### Use Optional chaining

Just adding one `?`! Deadly simple, isn't it!?

```javascript
<h1>Welcome, {user?.dispayName}</h1>
```

## Conclusion

I think most of the time Optional chaining is very handy and speeds up your development.

Count on Trinomial calculus when you need to show other elements while the object or property is not valid.
The fosshost project is a not-for-profit organisation that exists to serve the hosting needs of the global open source community
Published: 2020-09-25 21:53:09

The fosshost project is a not-for-profit organisation that exists to serve the hosting needs of the global open source community.

Founded in April 2020, fosshost started after it became apparent that there was a demand for sustainable and high quality hosting services. Even more, for free.

We began with one server and very quickly expanded particularly through the COVID-19 pandemic helping projects of all shapes and sizes. Today, we help more than fifty projects across ten nodes in two continents and six data centers in the USA, EU and UK.

These nodes are donated by our hosting sponsors and we manage the infrastructure donated to us, on behalf of the projects we help. 

Those open source projects eligible for our services, typically apply for a virtual private server (VPS). This is shipped with the following specification, but can be increased, upon request.

    6 vCPU
    8GB Memory
    400GB Storage
    IPv4 / IPv6 connectivity
    Full Remote SSH Access

We support most operating systems including CentOS, Debian, Ubuntu, Gentoo, ArchLinux, Fedora and FreeBSD. We support custom OS.

Other services we provide include web, database, communication, domain and storage hosting. You can apply for all of our services via the application form: https://fosshost.org/apply
My #100DOC - Day 30
Tags: 100daysofcode, challenge, log
Published: 2020-09-25 21:52:52

### Day 30: September 25, 2020

#### **Today's Progress**: 
1. **[Continued with The Complete JavaScript Course](https://github.com/pablohs1986/javaScriptCompleteCourse2020_Schmedtmann)** (2h):<br>I continued with the Budget App project, working on the appropriate method to update the Budget.
2. **[I started the redesign of my portfolio](https://github.com/pablohs1986/pablohs1986.github.io)** (30min):<br>I started work on redesigning my portfolio by making a sketch with Figma.
    
#### **What I learned**: 
* Conver field inputs to numbers.
* Prevent false inputs.
* Why create simple and reusable functions with only one purpose.
* Sum all elements of an array using forEach method.
* Practiced DOM manipulation.
* Make a complet webdesign with Figma.

#### **Total time**:
2h 30min.
Strapi Setup and Nuxt Layout
Tags: strapi, nuxt, vue, api
Published: 2020-09-25 21:33:46

Here is a video overview of the progress of my personal portfolio.

{% youtube NA1dSFgOs0Y %}

In the video, I share a little bit about my schema within the Strapi setup and different things I did to configure and set up the Nuxt Frontend.

I also share some of the interesting features that Strapi and Nuxt include.
“Avoiding Fires by Managing Stakeholder Expectations” with Ewelina Prockow of Guidewire
Tags: frontend, product, design, management
Published: 2020-09-25 21:23:50

Join our very first Educative Session on Monday, 9/28 at 11am PT! A live interactive webinar - by developers for developer.

To sign up: https://lu.ma/ewelina-prockow-0928
ProvenDB - the best of MongoDB & Blockchain 
Tags: mongodb, blockchain, database
Published: 2020-09-25 21:22:16

---
title: ProvenDB - the best of MongoDB & Blockchain 
published: true
description: Introduction to ProvenDB - an easy to use, tamper-proof, highly secure, blockchain-enabled database. 
tags: MongoDB, Blockchain, Databases
---

A lot of developers are interested in the value proposition of blockchain technology. Whether it's the fact that it's tamper-resistant, perpetually immutable, or not controlled by a single party, numerous exciting features differentiate these append-only data structures from traditional databases. However, developers often misunderstood how they would use them within existing applications or businesses in place of, or in addition to, something like a database.

One of the most potentially useful ways that developers can use blockchain is as a single point of truth for data provenance - meaning, understanding the origin and content of data. Specifically, through the use of standard cryptographic techniques, like secure hashing algorithms, e.g. [SHA-256](https://brilliant.org/wiki/secure-hashing-algorithms/), and concepts such as [Merkle Trees](https://nakamoto.com/merkle-trees/), developers can use blockchain to prove the historical contents of their database, without actually exposing any of that data to the public. 


By utilizing these standard cryptography techniques, developers (and even potentially end users) can independently verify what data was in a database at any given point in time. Perhaps an excellent concrete example would be to prove to users that information had been deleted to abide by privacy regulations like GDPR, or for accounting purposes, showcasing who owns what resources in cyberspace - like a bank account balance or game ranking.


These are just a few of the reasons that I'm excited about a new type of database service called [ProvenDB](https://www.provendb.com/). At the core, it's an easy to use version of MongoDB (or available to leverage via APIs) that anchors cryptographic proofs onto public blockchain networks, like Bitcoin, Ethereum, or where I work, at [Hedera](https://hedera.com). 

![MongoDB vs ProvenDB example](https://dev-to-uploads.s3.amazonaws.com/i/mwlngahe1g32m8rgowme.jpg)

With ProvenDB, it's incredibly easy to get started with and see the value proposition blockchain provides. You can use it as you would MongoDB or any other document-based storage, or any other API service, but with all the goodness you would want from a blockchain. It's seriously cool!

Check out this demo from ProvenDB's CTO, [Guy Harrison](https://twitter.com/guyharrison). 

{% youtube Y_J-bvt15Ns %}

If you're curious to try out ProvenDB and get started adding blockchain technology into whatever you're building, you can quickly [sign up here](https://app.provendb.com/app/signup). 


You can also learn more about ProvenDB and why it leverages the Hedera Hashgraph public network in this podcast episode that I recently recorded with Guy. Let us know if you have any questions!
 
{% youtube ZRSYhHWNX68 %}
Bloom Filter in Javascript
Tags: javascript, bloomfilter, datastructure
Published: 2020-09-25 20:28:14

During my Data-Structure and Algorithm learning, I was introduced to a new data structure **Bloom Filter**. Which is simply amazing and I was very curious to see it in action. So I tried to put the things in Javascript and the result blew my mind 🤯. This thing is crazy.

Thanks to [@Tech-Dummies](https://www.youtube.com/watch?v=Bay3X9PAX5k) for introducing and explaining about it.

#### Here is the simple implementation of Bloom Filter

```js
const names = ['Abhin', 'Pai', ......]; // n names
const noOfHashFunction = 6; // number of hash functions

const storage = Array(Math.pow(2, 22) - 1).fill(0); // Bllom filter bit

const hash = (key) => {
  let hashNumbers = [];
  for (let i = 1; i <= noOfHashFunction; i++) {
    hashNumbers.push(
      Math.abs(
        key.split("").reduce((a, b) => ((a << i) - a + b.charCodeAt(0)) | 0, 0)
      )
    );
  }
  return hashNumbers;
};

// Initilizing bloom filter bit for a hash index
names.forEach((name) => {
  let indexes = hash(name);
  indexes.forEach((index) => (storage[index] = 1));
});

// Traditional single name search 
console.time("Single Traditional Search");
const isValueContain = (searchString) => {
  let result;
  names.forEach((name) => {
    if (name === searchString) {
      result = true;
      return;
    }
  });
  return result ? true : false;
};
console.log(isValueContain("Pai"));
console.timeEnd("Single Traditional Search");
// End of traditional Search

let result = [];
// Bloom filter single name search
console.time("Single Bloom Filter Search");
const isValueContainInBloom = (searchString) => {
  let hashes = hash(searchString);
  let result = hashes.filter((index) => !storage[index]);
  return result.length > 0 ? false : true;
};
console.log(isValueContainInBloom("Pai"));
console.timeEnd("Single Bloom Filter Search");
// End of Bloom Filter Search

// Tranditional Search for 1000 names
console.time("Traditional Search");
names.forEach((name) => {
  result.push(isValueContain(name));
});
console.log(result.filter((res) => !res));
console.timeEnd("Traditional Search");
// End of tranditional Search for 1000 names

// Boolm filter search for 1000 names
console.time("Bloom Filter");
names.forEach((name) => {
  result.push(isValueContainInBloom(name));
});
console.log(result.filter((res) => !res));
console.timeEnd("Bloom Filter");
// End of Boolm filter search for 1000 names
```

###And here is the proof of how fast Bloom Filter is 😍

* Single Traditional Search: **19.371ms**
* Single Bloom Filter Search: **0.239ms**
* Traditional Search: **18.968ms**
* Bloom Filter: **5.940ms**

*Note: This code ran on Macbook Pro 2017 2.3 GHz Dual-Core Intel Core i5 and 8 GB RAM it may vary on different machine*

According to the formula given in this [post](https://llimllib.github.io/bloomfilter-tutorial/)

The probability of getting a false positive is 1 for every 1000 entries but it's subjective to the number of **hash function** and **Bloom Bit Size**
To Assess or not to Assess???
Tags: computerscience, javascript
Published: 2020-09-25 20:10:38

#Hey everyone,

I'm back with some news/experience regarding my assessment/interview. So for those of you who are not in the loop. I had an Entry Level Cognitive Assessment with HCl technologies. The assessment was 36 questions. The first 35 were in sections of 5 with 7 multiple choice questions each. The sections were about critical thinking and problem solving. They felt like middle school level math questions but I guess they were put there to gauge competence with simpler topics. So about 30 days into the assessment I had moved onto the last question. It was to build out 2 out of 3 functions and make the test cases pass. This is where I had the most difficulty. Each coding question had 2 test cases that had to be completed. I ended up doing 1 for each but ended up running out of time. I look forward to hearing from them. I do think that my practice with #100daysofcode has helped me a lot. I also have moved forward with JPMorgan &Co regarding a software development role. I received an invitation to complete a pymetrics assessment before moving forward. I just took it and it was 12 games meant to test you in different ways like risk taking and fairness. It was kind of fun and unique, I think i did well too.

By for now readers..............
plyr-react 
Tags: showdev, react, typescript
Published: 2020-09-25 20:06:50

Release new version of plyr-react@3 with typescript. 

Here you can see in action. 

https://stackblitz.com/edit/react-r8vmzh?embed=1&file=src/App.js&hideExplorer=1&hideNavigation=1&view=preview


{% github chintan9/plyr-react %}
Using wildcards for folder path with spark dataframe load
Tags: scala, databricks, wildcard, dataframe
Published: 2020-09-25 20:03:11

While working with a huge volume of data, it may be required to do analysis only on certain set of data specific to say days', months' data. It is not uncommon to store data in a year/month/date or even hour/minute format.
As loading data to dataframe requires a lot of compute power and time, any optimization on data load saves a tons of resources. 
So for selectively searching data in specific folder using spark dataframe load method, following wildcards can be used in the path parameter.

##Environment Setup:
The files are on Azure Blob Storage with the format of yyyy/MM/dd/xyz.txt. So as to see the results, the files themselves just have one line with the date in it for easier explanation.
The examples below might show for day alone, however you can 

###All the files for all the days.
Format to use: 
` "/*/*/*/*" (One each for each hierarchy level and the last * represents the files themselves).`

```Python
df = spark.read.text(mount_point + "/*/*/*/*")
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e5iy709yvq1080sbxe0q.jpg)

###Specific days/ months folder to check
Format to use:
`  "/*/*/1[2,9]/*" (Loads data for Day 12th and 19th of all months of all years)`

`  "/*/*//{09,19,23/}/*" (Loads data for 9th, 19th and 23rd of all months of all years)`

```Python
df = spark.read.text(mount_point + "/*/*/1[2,9]/*")

df = spark.read.text(mount_point + "/*/*//{09,19,23/}/*")
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bi44tqost0g7zsmp4bqm.jpg)

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

###Specific series of folders
Format to use:
`  "/*/*/1[3-6]/*" (Loads data from Day 13th to 16th of all months of all years)`

```Python
df = spark.read.text(mount_point +"/*/*/1[3-6]/*")
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jnqn9b34a81oh9ls4l55.jpg)

###Combining Specific folders and some series
Format to use:
`  "/*/*//{09,1[8-9],2[0-1]/}/*" (Loads data for Day 9th and from 18th to 21st of all months of all years)`

```Python
df = spark.read.text(mount_point +"/*/*//{09,1[8-9],2[0-1]/}/*")
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z9cp4qwe0338psh1d37t.jpg)

Ofcourse, the other folders in the path can also use wildcards or specific values, based on need. Below is an example of 10th, 20th and 30th of Sep-2020 alone.

```Python
df = spark.read.text(mount_point +"/2020/09//{10,20,30/}/*")
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2hmxyoi966za9fgqz6o0.jpg)

Happy data mining!
[Tutorial Linux] Terminal: Verificando há quanto tempo o sistema está ligado
Tags: uptime, linux, terminal, womakerscode
Published: 2020-09-25 20:02:30

Para verificar há quanto tempo o sistema está rodando, digite:

```
$ uptime
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

Será retornado a hora atual e há quando tempo seu Sistema Operacional está ligado.

Também é possível checar a data de instalação do sistema com o comando

```
$ uptime -s
```

- **-s** do inglês, *since*, desde um determinado tempo.
Symbols and forms
Published: 2020-09-25 19:53:49

Human beings started expressing themselves with simple symbols a long time ago. Historical research has found lines and dots which are believed to be over thirty thousand years old – so the history of symbols is very long. To draw up simple forms is one of the oldest ways for humans to express their feelings and thoughts. Alphabets are pictorial symbols which have evolved with us for thousands of years.

When we read, we don’t read each letter we see the words as pictures, sometimes reading a part of the letters is enough, the mind still recognizes it, fills in the blanks.

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

Our lives are shaped by symbols and signs, symbols are everywhere and they are of various kinds; traffic signs, instruction signs and company logos for example.

Logos are usually small simple forms that can exist on their own. When designing a logo the Gestalt theory is something to keep in mind, Gestalt is a German word which means: “an organized whole that is perceived as more than the sum of its parts”. The theory is based on the idea that the human brain will attempt to simplify and organize complex images or designs that consist of many elements, by subconsciously arranging the parts into an organized system that creates a whole, rather than just a series of disparate elements. Our brains are built to see structure and patterns in order for us to better understand the environment that we’re living in. The Gestalt theory has five principals; continuity, proximity, similarity, closure and figure/ground, some will also list common fate and symmetry and order.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2bwljlfnmwqk5ezldojo.jpg)

The color choice of logos should be well considered, the meaning and effect of colors is decided by the traditions of the community that uses them. Possibilities in the use of colors are much greater then before because then it was subject to technical limitations. Beware of using too many colors, one or two pure base colors is a good criterion, but the logo must also be presentable in black & white.

*A few examples of well designed Icelandic logos:*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/479x6ect8ysblv8t8j16.png)

A logo needs to evoke a certain feeling, indicate position and purpose and tell a story and context. Well designed logo should say as much as possible about the one using it and those who see it should be able to figure out it’s meaning. Many forms have similar meanings everywhere so you could see similar logos around the world. The meaning of some symbols has changed over time from being a sign of the positive to being a sign of death and terror. Others have completely different meanings in different parts of the world e.g. an aid organization which operates around the world has to have several types of logos because each one has a negative meaning somewhere. How we feel when we look at symbols all depends on the usage and what we associate it with.
Are you a bad link or a good link?
Tags: csharp, dotnet, opensource
Published: 2020-09-25 14:57:02

### Before the coding


How to check if a URL is valid or not? How to check if **many** URLs are valid or not? Should we check the syntax? How about the HTTP status?

I started this project by researching something like "URL checker" applications and some open source projects. Observe how they test a URL such as what determines a URL is valid or not.

After the researches, I got some ideas of how I can develop this too. I decided to use C# for this project because I want to get familiar with this language. 

### The development

The concept of checking URL format and status is not hard to accomplish with a C# console app. However, it was a bit of a challenge of how to make it a "tool" for other users to use. After comparing different methods, I chose **Nuget package**. It is friendly in different operating systems and also easy to maintain and control the version.

It is also a good practice for me to working with packages.


### How to install the tool?

This tool has been packed into a Nuget package. You may install it through the website or Nuget package or any other platform. However, I recommend the simplest way by typing the command on your terminal.

`dotnet tool install --global OSD600.GoodLinkOrBadLink --version 1.0.4`


### How does this tool work?


After Nuget package installation, the user can use this tool by typing the command "goodOrBad".

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

With no argument passing, the command will return a short introduction of this tool.

By passing --v or --version, the user can see the current version of the package.

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

By passing the file in the current directory or file with a path, the user will see the system is reading the file. The system will first check if the file exists. Then, it checks if the lines in the file match the format of a URL. If it doesn't, the tool returns "not a URL".


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

If the URL matches the format, the tool returns the HTTP status code of the URL. For example, the URLs with **200** status code are <span style="color:green">[GOOD]</span> and the URLs with **410** or **404** are <span style="color:red">[BAD]</span>. For the others, the tool will just return <span style="color:gray">[Unknown]</span>.


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


However, if the user inputs an invalid argument such as an invalid file name, the tool returns a warning.

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

### Improve it

More features are developing. Feel free to file an issue if you face problems while using this tool. Also, if there is anything you would like to be on this tool, please let me know :-)

The GitHub repo: https://github.com/yuanLeeMidori/OSD600.GoodLinkOrBadLink
Do you watch Live Coding?
Tags: livecoding, discuss, devlive, coding
Published: 2020-09-25 19:48:07

Do you watch someone code live (twitch, youtube, somewhere else?)? If you do, how often do you watch?

What do you look to get out of the stream?
- Learning how to work in a language/framework?
- Learning how to use an IDE / editor / tool?
- Watch progress on a project you have an interest in?
- Entertainment?