teleren/devto huggingface dataset:
React rendering basics
Tags: react, hooks, program
Published: 2020-10-06 08:40:11

Rendering introduction

Rendering is the process during which React moves down the component tree starting at the root, looking for all the components flagged for update, asking them to describe their desired UI structure based on the current combination of props and state. For each flagged component, React will call its render() method (for class components) or FunctionComponent() (for function components), and save the output produced after converting the JSX result into a plain JS object, using React.createElement().

After collecting the render output from the entire component tree, React will diff the new tree (the virtual DOM) with the current DOM tree and collect the list of changes that need to be made to the DOM to produce the desired UI structure. After this process, known as reconciliation, React applies all the calculated changes to the DOM.
Render and commit phases

Conceptually, this work is divided into two phases:

    Render phase: rendering components, calculating changes
    Commit phase: applying the changes to the DOM

After the commit phase is complete, React will run componentDidMount and componentDidUpdate lifecycle methods, as well as useLayoutEffect and, after a short timeout, useEffect hooks.

Two key takeaways here are the following:

    Rendering is not the same as updating the DOM
    A component may be rendered without any visible changes

Rendering reasons

After the initial render has completed, there are a few different things that will cause a re-render:

    this.setState() (class components)
    this.forceUpdate() (class components)
    useState() setters (function components)
    useReducer() dispatches (function components)
    ReactDOM.render() again (on the root component)

Rendering behavior

React's default behavior is to recursively render all child components inside of it when a parent component is rendered. This means that it does not care if a component's props have changed - as long as the parent component rendered, its children will render unconditionally.

To put this another way, calling setState() in the root component without any other changes, will cause React to re-render every single component in the component tree. Most likely, most of the components will return the exact same render output as the last render, meaning React will not have to make any changes to the DOM, but the rendering and diffing calculations will be performed regardless, taking time and effort.
Workspace /Pics on 📥 Inbox
Tags: workstations, productivity
Published: 2020-10-06 08:16:20

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

Since COVID, my go-to places are r/Workspaces, r/battlestations/ and lurking on the Internet to decide for my next purchase to upgrade my home workspace setup! I finally bought my current Dell Monitor after recommendations from Kerala Product Hunt community. I understood that I am not alone in this journey, so creating this community for likeminded folks!

Each week, I will be mailing out my supporters with the best workspace pics across the Internet along with killer price deals!

Join the community, share your workspaces, and get inspired by others, network with each other. Let's build a positive and fun community on the Internet!

Tweet your workspace to get featured on the upcoming email!

And we are on Product Hunt today: https://www.producthunt.com/posts/workspace-pics-on-inbox
KVision v3.16.0 is released (with printing support)
Tags: kvision, kotlin
Published: 2020-10-06 07:51:47

---
title: KVision v3.16.0 is released (with printing support)
published: true
description: KVision is an open source web framework created for Kotlin/JS.
tags: kvision,kotlin
---

[KVision](https://github.com/rjaros/kvision) is an open source web framework created for Kotlin/JS. It allows developers to build modern web applications with the Kotlin language.

I have released KVision 3.16.0, with the new module for printing. Based on an excellent [Print.js](https://printjs.crabbly.com/) library, it allows to easily print the content of any KVision component, directly from the browser window. It also supports printing PDF documents, images and any JSON-formatted tabular data.

Going further with the news, Kotlin sealed classes are now fully supported as parameters and return values in KVision fullstack interfaces. New multiplatform annotation based on Jackson `@JsonTypeInfo` has been introduced. See the [documentation](https://kvision.gitbook.io/kvision-guide/part-3-server-side-interface/common-code) for details. 

Last but not least, we continue to enhance state management experience by introducing simple sub-store implementation for any instance of `ObservableState` interface. It's a way to partition your data and optimize rendering at the same time.

For more details about this release see the [changelog](https://github.com/rjaros/kvision/releases/tag/3.16.0).

Don't forget to ⭐️ my [project](https://github.com/rjaros/kvision) if you like it!

As always, any feedback is appreciated!
Hacktoberfest 2020: My journey as a maintainer
Tags: hacktoberfest, opensource, journey, developer
Published: 2020-10-06 07:42:15

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

# 🥳 Hacktoberfest is back for 2020

[Hacktoberfest](https://hacktoberfest.digitalocean.com/) kicked-off officially on Oct 1, 2020. Similar to last year, this year as well I was excited. Apart from the cool T-shirt and stickers, I enjoyed meeting new people and collaborate together, which is really awesome experience to have and I think is currently the best way (only way 😋) to socialize in this COVID-19 😷 pandemic situation.

### But 🤦‍♀️...

This year...there has been lots of negativity and backlash from the community around Hacktoberfest event itself, mainly due to spammy and utterly useless pull-request created on open-source projects just for claiming free goodies. The open-source community and Netizens have been furious and vocal about it. Even created a twitter account [@shitoberfest](https://twitter.com/shitoberfest) documenting spam pull-request caused by hacktoberfest.

![Screen Shot 2020-10-06 at 12.29.41](https://dev-to-uploads.s3.amazonaws.com/i/fzhrxnz0skwz2upavu5q.png) 
 
### and then... 📣 Hacktoberfest announced some changes to the event

https://hacktoberfest.digitalocean.com/hacktoberfest-update

1. Maintainers can opt-in to participate by classifying their projects with the `hacktoberfest` topic.
2. Your pull requests will count toward your participation if they are in a repository with the `hacktoberfest` topic and once they have been merged, approved by a maintainer or labelled as `hacktoberfest-accepted`.
3. any pull request with the `hacktoberfest-accepted` label, submitted to any public GitHub repository, with or without the `hacktoberfest` topic, will be considered valid for Hacktoberfest.

- - -

# Finally... here's my journey so far.
### ⚙️ Maintaining 10 open-source projects
### ✅ 7 issues closed
### 🎉 14 PR merged
### 👨‍💻 15 new contributors
### 🙅‍♂️ 1 invalid PR

- - -

# Go ahead and submit your PR...

Here’s the list of open-source projects that I maintain where you can easily contribute. I have also created issues you can work on.Please **NO spam pull-requests**.

### `sqlite3> SELECT link FROM projects GROUP BY language;`

Python:
- https://github.com/tuladhar/easydns-restapi-cli
- https://github.com/tuladhar/macOS-wifi-cli
- https://github.com/tuladhar/check_bandwidth
- https://github.com/tuladhar/multi-threaded-google-ban-checker
- https://github.com/tuladhar/gistup

Javascript:
- https://github.com/tuladhar/gmail-labels-as-tabs

Go:
- https://github.com/tuladhar/gocat

Bash:
- https://github.com/tuladhar/set-brightness
- https://github.com/tuladhar/bash-parallel-scripts

Tutorials:
- https://github.com/tuladhar/Python-for-SysAdmin

- - -

> 🙏 Thanks to DigitalOcean, DEV Community and Intel for bringing Hacktoberfest 2020. 

- - -
## Follow me on Twitter [@ptuladhar3](https://twitter.com/ptuladhar3)
Learn new coding concepts faster
Tags: webdev, tutorial, javascript, beginners
Published: 2020-10-06 07:37:27

Hey everyone 👋, 

We believe that looking for new coding concepts is not such an easy task even for experienced developers so we've built [stanza.dev](https://www.stanza.dev).

This is not a blogging platform as DEV.to or Medium, it's only a place were you share some coding concepts illustrated by code snippets and you can add a reading list referencing the best blog posts to go deeper.

👉 We are looking for our first contributors in every programming languages, so if you like our project and want to support us, please feel free to contribute :)

[https://www.stanza.dev](https://www.stanza.dev)
How to Update Garmin Nuvi Maps?

Published: 2020-10-06 07:31:38

Usually, Garmin users forget to update the Garmin Nuvi maps and you are using old version of Garmin Nuvi then, you may face this several error. 

Follow the below instructions to update Garmin Nuvi: 

• Connect Garmin Nuvi to your computer with the help USB cable.  Open the browser and type Garmin Find map. 
• Now, find an option that say automotive and then click on download button. 
• After the file downloaded, double click on it and updated file will be ready to install into your computer. 
• Follow the on screen instruction. Till wait for installation process should be complete. 

For more detail about Garmin Nuvi Maps update, visit our website. https://mytracklocation.com/garmin-nuvi-updates/
Chin up after each pull request you make!
Tags: javascript, opensource
Published: 2020-10-06 03:36:20

Every week in my OSD600 class comes with interesting things. Lab 2 is about adding a new feature to your classmate's repo which is the [Release 0.1](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/release-0.1). I chose to add a feature that enables us to show the archived versions of a website by using [Wayback Machine APIs](https://archive.org/help/wayback_api.php).

## What I have learned

#### All it takes to make a pull request
Thanks to the [artice](https://opensource.com/article/19/7/create-pull-request-github) of Kedar Vijay Kulkarni on https://opensource.com, I have obtained all I need to make a pull request. I highly recommend you to check out his article if you are still new to the scene.

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

#### How to be more patient
Since it takes a quite amount of understanding of other's code to modify their app, I have learned to take more time to read and understand the code which is not mine. To be honest, I barely read carefully other's code before. Basically, I just take a look at the code block that meets my needs. 

#### From other's code I can see how people have a different approach to a situation

Like I said, it is pretty awesome to find out that there are better solutions than mine for a particular issue. By which, I mean there are things I can learn from people to better myself. Thanks to that, I know this is what a community is for.
Hello World with Mojolicious in Docker
Tags: perl, docker, web
Published: 2020-10-06 07:08:47

---
title: Hello World with Mojolicious in Docker
published: true
description: Tiny example to get started web development with Mojolicious
tags: perl, docker, web
//cover_image: https://direct_url_to_image.jpg
---

{% youtube Ux3t7QuaH8o %}

[Source code](https://perlmaven.com/hello-world-with-mojolicious-in-docker) and links to copy-paste.
UKs Covid system crashed due using Excel as "backend database"
Tags: news, database, avoid, notbestpractice
Published: 2020-10-06 06:59:12

From the category "you can not think of", the UK used an Excel sheet to save the results of tested Covid-19 cases. As they noticed that the Excel sheet not longer stores anything they took a look at the problem and found out that about 16,000 test cases are missing due the problem that the Excel file reached the maximum data which it can save.

This is the perfect example of "people with no clue doing stuff in the IT world" or "we have no money. your project budget is 5$"

{% twitter 1313046638915706880 %}
Final Space API
Tags: hacktoberfest
Published: 2020-10-06 06:54:01

Hey Everyone
This Hacktoberfest, I am maintaining [Final Space API](https://finalspaceapi.com/), a RESTful public API based on the show Final Space.

There are some great issues up for grabs, also you can create your own issues. 

There are many **beginner-friendly** and **non-coding issues**, yes you heard it right, you don't need to code to contribute to the project. You can contribute in many different ways.

Here is one such issue : [Contribute data to Character endpoint #18 ](https://github.com/lelouchB/final-space-api/issues/18)

Repo - https://github.com/lelouchB/final-space-api
Live - https://finalspaceapi.com/

Looking forward to your contributions. :)
Hello! 
Published: 2020-10-06 06:52:19

Hello there!

I'm Jahleel, aka TheJYT.

This is my first post on Dev Community so I'd thought I would introduce myself. I'm a software developer from England and I enjoy coding in C#, Java and PHP. I know 6 languages in total and I'm hoping to learn more.

Besides coding I love to game alot and go out with friends. I try to do sports but it isn't really my thing xD. 

Well, I wish you all the best

Stay amazing and stay safe

Jahleel Abraham.
YourTube | YouTube should be productive
Tags: webdev, javascript, productivity
Published: 2020-10-06 06:44:42

### Do you use Youtube for learning?


### Do you read comments while watching videos?


### Do the recommended videos sections distract you from the content you are watching?


If you said YES to any of the questions above try YourTube which is a Chrome extension to provide a minimal distraction-free Youtube Experience with full customizability.

#### This is how a video on YouTube currently looks.
![without YourTube](https://dev-to-uploads.s3.amazonaws.com/i/xw85z1rk0om4d9l16jy3.jpg)

#### This is how a video on YouTube looks with YourTube's all features enabled.
![with YourTube](https://dev-to-uploads.s3.amazonaws.com/i/5rguz6hzmpiw3xhyysb0.jpg)

#### YourTube is fully customizable
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9y0lgkfqgos0x98ejnr6.jpg)

[Chrome Web Store](https://chrome.google.com/webstore/detail/yourtube/bepnbjanekhidnggbihpgmajjfgicobk)

[Github Repo](https://github.com/gurrrung/yourtube)
Security Testing with ZAP and GitHub Actions
Tags: github, devsecops, githubactions, owasp
Published: 2020-10-06 06:41:57

---
title: Security Testing with ZAP and GitHub Actions
published: true
description: Security Testing with ZAP and GitHub Actions
tags: #GitHub,#DevSecOps,#GitHubActions,#OWASP
//cover_image: https://direct_url_to_image.jpg
---
Dynamic Application Security Testing (DAST) with OWASP Zap Scanner

**PREREQUISITE**
- GitHub Account
- Sample Website (https://techconnectweb.azurewebsites.net/).
This Demo only for Education Purpose. Try at your own risk.

For this demo, I decided to use **OWASP ZAP Full Scan**.
You can find this at GitHub Marketplace.

**Let Start the Demo**
1. Go to **Actions** tab at your GitHub Repo.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ex3ts0y12nqy3uszr7l.png)
2. Select **set up a workflow yourself ->**
3. Go to **Marketplace**, search for OWASP and Select **OWASP ZAP Full Scan**, and you will see the sample workflow snippet. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wr3cfxbp1pty84w0etdv.png)
4. Modify the workflow snippet as below and replace with sample website URL. After modified, select **Start commit**.
```
name: zapfull-security-scan
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:     
    - name: OWASP ZAP Full Scan
      uses: zaproxy/action-full-scan@v0.1.0
      with:
        target: "https://techconnectweb.azurewebsites.net/"
```
5.Go back to **Actions** tab, you will see the workflow In progress.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wllu15r7m5dsxzdqt2l0.png)
6.Select the **build**. The workflow in progress setup and scanning.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4oiiguov4c43n40j4vqg.png)
7.After complete scanning through OWASP ZAP, the report will generated in **Issues** tab.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1wucdpskc91iwypvby1u.png)
8.For more details for OWASP ZAP Full Scan report, you can go back to the **Actions** tab, select the Artifacts **zap_scan**. After downloaded, you will see the OWASP Report as below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vlwmjganc8zfg46ljabp.png)

References:
https://www.zaproxy.org/blog/2020-05-15-dynamic-application-security-testing-with-zap-and-github-actions/
I keep getting "null" errors
Tags: help, javascript
Published: 2020-10-06 06:39:18

 I have such a code. I'm working on a multiple selection and want it to show the values ​​entered. I also write in html to show them on the screen. However, whenever I make multiple selections, it brings up "null" first.

  obj.load("REF_TEKLIF_NO");

    Object value= obj .get("REF_TEKLIF_NO");

    if (value instanceof Object[]) {

         Object values[] = (Object[]) value;

         for(int vv=0; vv < values.length; vv++)

         {

               REF_TEKLIF_NO =  REF_TEKLIF_NO + (vv == 0 ? "" : ", ") +  (java.lang.String) values[vv];

         }

    } else {

               REF_TEKLIF_NO = (java.lang.String) value;

    }
Validating and Sanitizing user inputs on python projects REST api
Tags: python, security, rest, validation
Published: 2020-10-06 06:18:09

## Validation
User input data validation is one of the most important things while developing a project. It not only keeps the data clean but also helps with somewhat malicious data being sent with requests using intercept tools like burp suite. 

One of python package which helps in validating Api request is [Schema](https://pypi.org/project/schema/ )

```python
from schema import Schema, And, Use, Optional

schema = Schema([{'name': And(str, len),
                  'age':  And(Use(int), lambda n: 18 <= n <= 99),
                   Optional('gender'): And(str, Use(str.lower),
                                           lambda s: s in ('Male', 'Female'))}])

data = [{'name': 'Pritesh', 'age': '29', 'gender': 'Male'},
        {'name': 'Alisha', 'age': '26', 'gender': 'Female'},
        {'name': 'Atul', 'age': '28'}]

validated = schema.validate(data)
```

If validation fails It raises `SchemaError` else it would return filtered payload based on schema validation.

There are many features of `Schema` we can use, few of them are -

* Optional keys can also carry a default, to be used when no key in the data matches: eg: 

```python
Schema({Optional('best_songs', default='blues'): str, 'best_movie': str}).validate({'best_movie': 'shawshank redemption'})
```

* In a dictionary, you can combine two keys in a “one or the other” manner. To do so, use the Or class as a key 

```python
Schema({  Or("key1", "key2", only_one=True): str })
```

* The Schema(...) parameter ignore_extra_keys causes validation to ignore extra keys in a dictionary, and also to not return them after validating. 

```python
Schema({'movie': str}, ignore_extra_keys=True)
print(schema.validate({'movie': 'tenet', 'review': '4'}))
{'movie': 'tenet'}
```

* You can pass a keyword argument error to any of validatable classes (such as Schema, And, Or, Regex, Use) to report the error instead of a built-in one.
```python
Schema(Use(int, error='Invalid year')).validate('2020')
```

## Sanitization

Once user inputs are validated, data needs to be sanitized with an HTML sanitizing library that escapes or strips markup and attributes. [Bleach](https://pypi.org/project/bleach/)
Adding sanitization helps in eliminating XSS attacks on application. 

```python
import bleach
bleach.clean('an <script>evil()</script> example')
u'an &lt;script&gt;evil()&lt;/script&gt; example'

```
Make a pull request
Tags: opensource, python
Published: 2020-10-06 05:56:55

### Summary

I made a pull request to this repo: https://github.com/matt-ross16/CheckMyLinks/pull/11

### What happen

I pull the repo, followed the readme for installations, and run the tools. I didn't work. I tried to figured out what was the problem and had a chat with Matt. So I made some changes to the Readme and it should works
REST API Url builder !!
Tags: frontend, urlbuilder, learn, software
Published: 2020-10-06 05:41:24

You must have come across a situation where you are making a REST API call via frontend code and doing something like this -

```js
try {
  const response = await fetch(`/api/users/${userId}/details?name=abc&age=31&height=174&address=xyz`)
  const data = response.json()
  return data;
} catch(err) {
  console.log(`Error: ${err}`)
}
```

Now in the above example, we tend to pass the whole API endpoint URL string but what if it gets generated automatically for you and you don't need to write the entire URL string.

I have created an npm package [nkr_urlbuilder](https://github.com/nitinreddy3/nkr_urlbuilder/packages/428426) that can help you solve this problem. 

Do the following,

```js
import { buildRestUrl } from 'nkr_urlbuilder';

let url = '/api/users/{userId}/details';
let urlParams = {userId: 123};
let queryParams = {
     name: 'abc', 
     age: 31, 
     height: 174, 
     address: 'xyz'
};

try {
  const response = await fetch(buildRestUrl(url, urlParams, 
  queryParams))
  const data = response.json()
  return data;
} catch(err) {
  console.log(`Error: ${err}`)
}
```
Your Official Developer Speed Test is Here
Tags: hackathon, challenge, hack, contest
Published: 2020-10-06 05:29:17

In a world filled with tech products to serve the daily consumer, there are multiple factors that help a product succeed. Velocity is one of them-

> *'How quickly can you ideate and build a product to solve a consumer problem or optimize a consumer's experience?'*

From ideating on how to solve a common problem to working on a prototype to going to market with your product, **velocity** is a factor that can help you be the first in an already packed ecosystem of consumer applications.

Keeping that in mind, we want to put your speed and skills to the test. [HackerEarth](https://www.hackerearth.com/challenges/) is hosting [Hackccelerate 2020](https://www.hackerearth.com/challenges/hackathon/hackccelerate-2020/?utm_source=devto&utm_medium=referral&utm_campaign=devto-hackccelerate), a 72-hour hackathon where the themes will be revealed 72 hours before the end of the competition. So grab your coffee, snacks, and code your way to deliver an innovative tech product within 72 hours.

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

This hackathon is open to all developers who have an eye for design and a passion for coding & building tech products. Participants can either hack individually or as a team of up to four members. 

Important Dates:

* Hackathon Problem Statement Reveal: *15th October 2020*
* Hackathon Start Date: *15th October 2020 at 11:55 PM*
* Hackathon End Date: *18th October 2020 at 11:55 PM*

### **Start your engines, change gears, Hackccelerate**

[Click here to know more and participate!](https://www.hackerearth.com/challenges/hackathon/hackccelerate-2020/?utm_source=devto&utm_medium=referral&utm_campaign=devto-hackccelerate)