teleren/devto huggingface dataset:
Creating a Job list in React
Tags: react, joblist, frontend
Published: 2020-12-02 19:50:12

In my continued learnings on using React, I decided to follow a tutorial on how to make a job list.  I am at the point where I know I need to lay off tutorials but, as a novice in React and programming in general, I find myself to be overwhelmed and intimidated when trying to do things on my own.  So, when I decide to google "how to start" I end up following the full tutorial.

Anywho! This job list comes complete with a submit and delete button to edit the list of names.  It uses the state of the App component, which is just an empty characters array object, to save the input data.

The way to input and save this data comes from the _handleSubmit_ method created in the parent App component.  What this method does is add a character to the list of characters once the submit button has been clicked.  That gets passed into the Form component as a prop.

Now, in the render method of the Form component, a submit button is added with an onClick prop that calls back to the _submitForm_ method created in the same file that calls back to the __handleSubmit_ method and passes the Form state through as the character parameter.  Afterward, it is reset to its initial state to clear the form after submit.
Analogies and Visualizations with Lydia Hallie & Kevin Kononenko
Tags: discuss, podcast
Published: 2020-12-02 19:14:07

---
title: Analogies and Visualizations with Lydia Hallie & Kevin Kononenko
published: true
description: A preview of this week's episode of DevDicsuss, plus some easy listening links
tags: discuss, podcast
series: DevDiscuss Season 3
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/u0w4obm0j4k735rb8nwd.png
---

> **Listen to S3E4 here on DEV:**

{% podcast https://dev.to/devdiscuss/s3-e4-explaining-code-through-analogies-and-visualizations %}

On this week's episode, we covered a topic that many folks here in the DEV community are very passionate about: the value of imagery and analogies when it comes to teaching and learning code. 

To say that software development can be tricky is a massive understatement — **visualizations and reframing the complex can be one of the strongest tools in your kit** when you're trying to wrap your head around a new programming challenge.

### @Jess and I were lucky to have two guests that understand this concept thoroughly: 

- **[Kevin Kononenko](https://twitter.com/kevinkononenko)**, Product Manager at Tulip Interfaces and creator of the [CodeAnalogies Blog](https://www.codeanalogies.com/)

- **[Lydia Hallie](https://dev.to/lydiahallie)**, Software Engineering Contractor at The Avo-coder
{% user lydiahallie %}


To get a sense of some of the visual value that Lydia serves up on DEV regularly, check out [this 7-part "JavaScript Visualized" series](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif).

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s3-e4-explaining-code-through-analogies-visualizations/id1513053883?i=1000501085242)
- [Spotify](https://open.spotify.com/episode/3xTrXWZR6pTwKoOK0hbeL7)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzIx?sa=X&ved=0CAQQkfYCahcKEwi42u_0_6_tAhUAAAAAHQAAAAAQAw&hl=en)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s3e4-explaining-code-through-4ACaiTwUJgm/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=159149445)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [Transcript](https://devpods.herokuapp.com/podcasts/devdiscuss/episodes/69)
- [Pocket Casts](https://pca.st/jkfmk2g8)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season three sponsors, [Triplebyte](https://triplebyte.com/a/YU8fSn0/d) and [Rudderstack](https://rudderstack.com/)!

# 🗣️🗣️🗣️
Intro to Microsoft Power Apps

Published: 2020-11-26 17:23:02

In the upcoming weeks I will be assigned to create an application for work using Power Apps, so I thought why not jump in and start learning more about what Microsoft Power apps are. Here is  what I’ve learned!

To summarize, Power Apps is used to build applications that act on data in a short time with little to no code. This can be an essential tool in a wide array of business scenarios. Power Apps is great to use with anything that involves manipulating/ using data, like a spreadsheet. What makes Power Apps so powerful is that once you build the application on the platform, it lives in the cloud and can be shared and run on almost any platform!

PowerApps provides a nice drag-and-drop user interface that allows you to add different controls, media, forms, and screens to construct on your app. Power Apps gives you the ability to connect to external data sources or store data directly inside the app. Once your app is created, all you have to do is publish then share it with your organization to be able to access it. PowerApps was designed to be used for internal business use, meaning in order to use it you have to be in the organization. 

That wraps up this brief intro to PowerApps, I hope you enjoyed and thanks for stopping by!
cloud software to transcribe speech to text
Tags: javascript, webdev, computerscience, machinelearning
Published: 2020-12-02 19:00:12

Voicer is a cloud software that transcribes speech to text.
Designed for hearing impaired people to communicate with their friends more easily. Or follow an audio conversation without any sound.

![voicer speech to text demo](https://dev-to-uploads.s3.amazonaws.com/i/la14g2fru80lql8dcnab.jpg)

Voicer is a solution that takes your microphone input, transcribes it to text and broadcasts the text to your connected friends. It uses the Web Speech API which is currently only available in Google Chrome. It's secured through HTTPS/SSL and respects everyone's privacy, no data is stored nor shared with third-parties.

## Demo
1. Visit in Google Chrome: https://nevolin.be/voicer/?room=public
2. Allow microphone access.
3. Choose your username, click submit.
4. Start talking. It may help to speak loudly in phrases, not just single words.
5. You will start seeing your words or sentences being transcribed into text.

You can freely use the demo url, or you can host this software on your own server.

Make sure to change the room ID in the URL to a more complex one if you wish to enjoy some privacy. Everyone who connects to the same room will see each other's texts.

### use voicer even while gaming
1. You can put your mobile device next to your computer screen to follow the conversation.
2. You can use a second screen.
3. Always-on-top tools such as Pennywise may help, but the microphone feature doesn't seem to work so it's only good for reading.

For more information: https://github.com/healzer/voicer

Cheers!
JSON parser
Tags: java, coding, productivity
Published: 2020-12-02 18:56:09

This is a JSON parser which allows the user to find the value of a key which is present inside the JSON structure. The question is why do I need a JSON parser? I can do that by writing a loop. Why do I need an additional parser which does that for me?

Well in my last project I used to have a class ProjectUtils which contained functions of commonly used things. That is where I got the inspiration to come up with this.

This parser is used to will retrieve a key from a JSON structure provided you give the path to where the key is present.

let us take the below JSON structure as an example.

```json
{
	"perms": [{
		"changeDefault": "Yes",
		"visible": true,
		"notused": true,
		"testArray": [{
			"TestKey1": "TestVal1",
			"TestKey2": "TestVal2",
			"TestKey3": "TestVal3",
			"TestKey4": "TestVal4"
		}],
		"selectable": true,
		"allAccess": true,
		"defaultOnly": true
	}],
	"avatarUrl": "",
	"cartId": "8ladf51ds65ga6",
	"DeviceDetails": {
		"DeviceName": "MotoXPlay",
		"UDID": "459f8202b2n92h1",
		"Info": {
			"IPDetails": "192.168.3.155",
			"TestMgmtID": "8080",
			"IsPhone": true
		}
	}
}
```

If I want to get the value of key TestKey4, I would be able to do it by passing the JSON structure and then the location of where the value is present.

getNodeValue(JSONStructure, perms.0.testArray.0.TestKey4);

Where the first parameter is the JSONStructure to search.
The second parameter is the location. As per the example perms is name of the array, the 0th index, then the testArray and 0th index and the Key TestKey4.

If I wanted to get an object, then I would not need to pass the index. If I wanted to check if the isPhone is true of false. I could get it like

getNodeValue(JSONStructure, DeviceDetails.Info.IsPhone);

As per the current implementation the getNodeValue function would return an Java Object. The advantage of returning as an Object is that whatever type of value the key holds, the user could get that without anticipating the return value.

This is the [GitHub repo](https://github.com/VinnieM/JSONParser)
Leave an comment if guys think this will be helpful. Hope it helps.

Cheers
Who has ever integrated SQLITE3 with Django?, in Jupyterlab?
Tags: jupyter, django, sql, database
Published: 2020-12-02 18:52:37

I have a project that I have a table "products_products" but it says there's no such table. 

I wan to analyse info from everything from products to orders in jupyterlab. is that common to do? such as a business show trends, costs, data like that?
How to claim your Hacktoberfest completion badge
Tags: opensource, hacktoberfest, meta
Published: 2020-12-02 18:51:57

---
title: How to claim your Hacktoberfest completion badge
published: true
description: Four easy steps to opt-in for your Hacktoberfest completion profile badge on DEV
tags: opensource, hacktoberfest, meta
---

### **Update 12/4**
> We identified the root cause of the unexpected error messages and released a fix for it on 12/3 ([PR #11735](https://github.com/forem/forem/pull/11735)).

> **Badge Awarding Might Not Be Instant**: Subscribing here is the first step where we get your consent to check your completion status with the team from DigitalOcean. We anticipate awarding badges within 1-2 business days from receiving your subscription below.

---

As you might already know, if you participated in the Hacktoberfest challenge, you are eligible to receive a limited-edition completion badge on your DEV profile ✨ 

We know how hard you’ve worked to earn this important badge of recognition, and we appreciate your patience as we worked with DigitalOcean to arrive at the most secure way to collect the info we need to award these badges.  

## _Here’s how to claim your official Hacktoberfest completion badge_

### **For existing DEV members**

1. Ensure that the GitHub account you used for Hacktoberfest matches the GitHub account associated with your DEV profile (you can confirm this at [`/settings/account`](https://dev.to/settings/account) )
2. Read our terms for claiming your badge below
3. Opt-in for your badge by clicking `SUBSCRIBE` below.  
4. Keep an eye on your inbox and DEV profile to see your awarded Hacktoberfest completion profile badge

### **For new DEV members**

1. Sign up for a profile at [dev.to/enter](https://www.dev.to/enter) using the same GitHub account you used to participate in Hacktoberfest
2. Read our terms for claiming your badge below
3. Opt-in for your badge by clicking `SUBSCRIBE` below.
4. Keep an eye on your inbox and DEV profile to see your awarded Hacktoberfest completion profile badge.

---

_Hacktoberfest Badge Terms: By clicking the button below, you are consenting for DEV to share your GitHub name with DigitalOcean in order to identify your Hacktoberfest participation status._
{% user_subscription I want my Hacktoberfest badge! %}

_If you happen to see an error message, please wait a minute and refresh to try again._

---

... and that's it! 

For those of you who are new here, welcome! We are excited that you’ve joined over half a million of your peers who are learning to code, sharing their stories, and providing advice to better the software ecosystem.

#### **While you're here, visit [forem.com/future](https://www.forem.com/future) to see what the future holds for Forem: the open source software that powers DEV — and what this means for you.**
Python3 Programming - Exercise 1 - Variables
Tags: python, beginners, tutorial, programming
Published: 2020-12-02 18:25:51

## Creating a variable

A variable is a placeholder ( a name, a label, a tag) given to an address ( a memory location) of a value in memory.
You can think of a variable as a box, which has a name. This box will have a value. Whenever we reference ( call) this variable ( name of the address), we then get the value stored at that address.
To create a variable and assign it a value, all we have to think about is an equation.
`Eg: x = 2` . `x` is the variable ( the placeholder) that points to the address of the value, `2`. So `2` is the value. A single ( one) equal-to sign, `=`, is known as the assignment operator. It takes what is on the right ( the value) and assigns ( puts) it into what is on the left ( the variable).
In Python, the data type of a value is controlled dynamically ( meaning as the program runs) so we don't have to worry about it ( memory management).

## More examples:

![variable assignment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21ky0aj39xshcwu5llc9.png)

All these are examples of variable assignment ( variable creation) of different data types.

## Rules

- variable names can start with a letter or an underscore
- followed by a letter, an underscore or a number
- a variable name can not begin with a number or dot or special symbols (+, -, /, \*, and others)
- a variable name can not have white-space characters (space, newline, tab, and others)

## Practicals

- Create ten variables and assign them any values suitable ( perhaps, as above).

## Summary:

- Variable represents the name given to the memory address.
- Calling the variable returns the value
- The value stored in a variable can change anytime - that's why we call it a variable
- To create a variable, think about an equation, LHS = RHS. LSH is the variable_name, RHS is the value. `Eg: full name = "John Doe"`
Streaming With Twitter-Stream.py
Tags: twitter, twitterapi, python
Published: 2020-12-02 17:39:30



[Twitter-Stream.py](https://github.com/twitivity/twitter-stream.py) a python API client for Twitter API v2 now supports 
`FilteredStream`, `SampledStream`, `RecentSearch`, `TweetLookUp`, and  `UserLookUp`. It makes it easier to get started with Twitter's New API. 

If you are following `#Twitter` here, you probably already know about Sampled Stream. But armed with Twitter's next-generation API, `twitter-stream.py` makes streaming a lot more seamless. 

Sampled Stream delivers about 1% of Twitter's publicly available tweets in real-time and paints a picture of general sentiments, recent trends, and global events. So let's see an example of how `twitter-stream.py` handles `SampledStream`.

```bash
~$ mkdir twitterStream && cd twitterStream
~$ pipenv install twitter-stream.py # or use pip3
~$ pipenv shell
(twitter-stream) ~$ export $BEARER_TOKEN=BEARER TOKEN
(twitter-stream) ~$ touch stream.py
(twitter-stream) ~$ tree
├── Pipfile
└── Pipfile.lock
└── stream.py
0 directories, 3 files

```
```python
1. import json
2. from twitter_stream import SampledStream
3.
4. class Stream(SampledStream):
5.   user_fields =  ['name', 'location', 'public_metrics']
6.   expansions =   ['author_id']
7.   tweet_fields = ['created_at']
8.
9. stream = Stream()
10.
11.for tweet in stream.connect():
12.    print(json.dumps(tweet, indent=4, sort_keys=True))
13.
```
Is this all you have to do to start streaming? Yes. Are these all the data points available to you? No. Let's discuss `line number 5-7`. [Twitter's Official Documentation](https://developer.twitter.com/en/docs/twitter-api/tweets/sampled-stream/api-reference/get-tweets-sample-stream) lists an elaborate set of query parameters. You can use these queries to get the data you need. We are subclassing `SampledStream` and carefully constructing clear and eloquent queries in `line 5-7`. And you can do this for all the query parameters listed in the `SampledStream` [API Reference](https://developer.twitter.com/en/docs/twitter-api/tweets/sampled-stream/api-reference/get-tweets-sample-stream).

To get more insights into other API endpoints. Please Visit our [README.md](https://github.com/twitivity/twitter-stream.py) page and our documentations [twitivity.dev](http://twitivity.dev/docs/). We will continue to maintain the `v1.1 Accounts Activity API Client` while keep supporting and releasing new tools that help the community.

<hr>

`docs`   : [twitivity.dev/docs](https://twitivity.dev/docs)
`github` : https://github.com/twitivity/twitter-stream.py
`mail`   : mail@twitivity.dev
`twitter`: [@twitivitydev](https://twitter.com/twitivitydev)
`report an issue`: [Issues](https://github.com/twitivity/twitter-stream.py/issues)
Unity 104: Physics and Collisions
Tags: csharp, gamedev, unity3d, dotnet
Published: 2020-12-02 18:25:40

To understand physics in Unity, its important to understand 2 components, RigidBody and Colliders. Unity uses Nvidia's PhysX engine for 3D, and Box2D for 2D objects out of the box.

![Unity engine with objects that have colliders on them](https://dev-to-uploads.s3.amazonaws.com/i/qhm73ivtrdkdgml5cqej.jpg)

#RigidBody component
When adding a RigidBody component to a GameObject. It will start interacting with the physics engine. For example, gravity will start affecting the object and it will fall when the game runs. The physics engine runs much more frequently than the framerate of the game. Every time the physics engine takes a step, it calls the FixedUpdate() method in MonoBehaviours. It’s a good practice to put any calculations including physics in the FixedUpdate() method.

#Colliders
Adding a collider component gives the GameObject boundaries that collide with other objects with colliders in the scene. Adding a Colliders also activates these Unity messages in MonoBehaviors in objects with colliders:

##OnCollisionEnter(Collision)
This function will run once at the moment the collider collides with another collider. The Collider object passed to the method includes information about the collision, including a reference to the other GameObject that collider with this collider.

##OnCollisionStay(Collision)
This function will run continuously as long as the collision is still happening. A Collision object is also passed to it with information about the collision happening.

##OnCollisionExit(Collision)
This function will run once as soon as the collision stops. A Collision object is also passed to it with information about the collision that ended.

#Combining RigidBody and Colliders
If two objects with RigidBody components and colliders collide, they will react as you would expect 2 objects would interact in the physical world. Changing variables, such as Mass, in the RigidBody component will change the behavior of the GameObjects colliding.

Physics can be fun to play with and a quick way to prototype a game, but they are also taxing on processing resources. Physics are also unpredictable. So if your game depends heavily on predictability, then physics might not be the right option for you. To learn more check out [Unity physics](https://docs.unity3d.com/Manual/PhysicsSection.html) documentation.

Please check our full video covering this topic in our video beginner series for Unity.
{% youtube IzUoR_76Mdo %}
What are JS Generators?
Tags: javascript, typescript, webdev, node
Published: 2020-12-02 22:55:27

---
title: What are JS Generators?
published: true
date: 2020-12-02 17:55:53 UTC
tags: JavaScript,TypeScript,webdev,node
canonical_url: https://h.shadowtime2000.com/what-are-js-generators
---

# What are JS Generators?

Generators are a feature in Javascript which are basically functions that are kind of like iterators.

## Creating

You can create generators like this:

```js
function* myGenerator() {}
```

The `*` after `function` is required.

## Yielding

The core mechanic of generators is `yield`ing values.

```js
function* myGenerator() {
	yield 1;
	yield "foo";
	yield "bar";
	yield { thing: true };
}
```

## Taking Values

You have created your generator. Now, we need to use it. When you have a generator, you can call `.next()` on it, and it will run the generator until it reaches a `yield` statement. When it reaches it, it will return an object with two parameters, `value`, and `done`.

```js
const one = myGenerator.next().value; // 1
const foo = myGenerator.next().value; // "foo"
const bar = myGenerator.next().value; // "bar"
const thingTrue = myGenerator.next().value; // { thing: true }
```

## MDN Docs

You can look more into generators [on the MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator).
Three Interesting Apache Opensource Projects that you should take a look at!
Tags: asf, opensource, cloud
Published: 2020-12-02 17:52:37

Nowadays, I see many devs write about "Cloud-native" software projects like Kubernetes, Prometheus, Containerd, Envoy. But there are a few other similar OSS foundation backed projects which are excellent too. 

This post is about three such projects from "Apache Software Foundation (ASF)" that one should take a look at. 

ASF is a very old Opensource organization which has been the home for projects like Hadoop, Zookeeper, Kafka, Lucene. If you are interested in contributing to OSS, this might be the best place to start too.

### 1. [Apache Airflow](https://airflow.apache.org/)

![Apache Airflow](https://dev-to-uploads.s3.amazonaws.com/i/atwsc20hvve91p7qmctx.png)

Apache Airflow is an open-source workflow management platform started at Airbnb. It essentially helps with many operations in a software project. It can monitor cron jobs, manage data pipelines. It generates a Directed Acyclic Graph (DAG) visualization diagram. But, it is not a streaming or ETL solution. 
 
Cloud Platforms like GCP has Cloud Composer, AWS has Managed Workflows - which are managed SaaS versions of Airflow.

[Github Repository](https://github.com/apache/airflow)

### 2. [Apache Beam](https://beam.apache.org/)

![Apache Beam](https://dev-to-uploads.s3.amazonaws.com/i/fzf3pg81wdvx2bzykkny.jpeg)

Apache Beam is a combination of the Batch and Streaming model to design and develop data processing pipelines. There are Java, Python, Go SDKs available for Apache Beam. It also supports backends like Apache Flink, Apache Spark, and GCP Dataflow. 

[Github Repository](https://github.com/apache/beam)

### 3. [Apache Pulsar](http://pulsar.apache.org/)

![Apache Pulsar](https://dev-to-uploads.s3.amazonaws.com/i/dnqy407j4d02hx42jrbr.png)

Apache Pulsar is popular is a cloud-native, distributed messaging and streaming platform created at Yahoo. You might have heard it while researching the famous OSS message queue Kafka. Born in the cloud-native world, Pulsar can be run on Docker or Kubernetes. Pulsar has built-in connectors to MongoDB, Elasticsearch, PostgreSQL, Redis. 

[Github Repository](https://github.com/apache/pulsar)

I believe these projects are interesting to learn and try even on a side-project. I might have missed several other interesting projects or incubating one's. If you are using or have used something, write them in the comments. 

--
Stay Safe
[Aravind Putrevu](https://twitter.com/intent/user?original_referer=https%3A%2F%2Faravind.dev%2F&ref_src=twsrc%5Etfw&region=follow&screen_name=aravindputrevu&tw_p=followbutton)