teleren/devto huggingface dataset:
Props vs. State
Tags: beginners, javascript, react
Published: 2021-07-06 05:05:37

`props` and `state` are extremely useful ways to store information in React. That said, they can be easily confused. Here's a basic primer that I wrote for myself to better understand both how they are different and how they can be used together.

### Props
Props are to components as parameters are to functions. Let's say you have a simple program to create a shopping list. You have a List component that shows all the items and a Form component where you can enter an item from scratch or edit an item that already exists. In the circumstance where you want to edit an item that already exists, you want to present the user with the Form component already populated with the item so that they can edit it from, say, "Milk" to "Soy Milk". In that case, you would call the `Form` component with the item as the parameter, like `<Form item="Milk">`.
```javascript
...
<Form item = "Milk" />
...
```

The `Form` component would reference that parameter as a `prop` like so:

```javascript
const Form = (props) => {
  return(
    <div>
      <input 
        type="text" 
        value={props.item} 
        onChange={(e) => handleInputChange(e.currentTarget.value)} />
    </div>
  )
}
```

The important thing to remember about `props` is that `props` are read-only inside the component they are passed into. They must originate from outside the component, and they can only be updated outside the component.

### State

State, by contrast, is initialized inside the component and can be updated inside the component. 

A common and useful way to use `state` with `props` is to create a state variable from the passed-in prop. Then you can update the state variable however you want. Using the example above, you would do the following:

```javascript
const Form = (props) => {
  const [item, setItem] = useState(props.item);
  return(
    <div>
      <input 
        type="text" 
        value={item} 
        onChange={(e) => handleInputChange(e.currentTarget.value)} />
    </div>
  )
}
```
### What to use for what
Remember the following:
* If you have a value that will be created (and possibly updated) from inside that component, you need to use `state`.
* If you have a value that will be used inside a component that was created outside the component, just use `props`.
* If you have a value that may be updated inside a component that was created outside the component, create a `state` variable that is set to that `prop` and update the `state` variable as you wish.
July 4th (of Code)
Published: 2021-07-06 05:04:28

Today's the 5th actually. A Monday. Federal Holiday. But the work doesn't stop and so I'm here in front of my computer, leveling-up as a programmer and chronicling the process.

I'm glad to be working today. Even though today's not 'off', it does feel like a regular 2-day weekend (not 3 days though as Saturday was an HR day). I should say that's also despite putting in  about four hours yesterday as well. Nevertheless, I feel relaxed and ready for the start of Week 4 tomorrow.

Won't lie - I was initially somewhat bitter over having a mandatory assignment over a national holiday. *The staff's off, but we're not?* For all the talk of self-care, it felt (feels) like a wasted opportunity to give the students a chance to spend some quality time doing whatever they need on this holiday to get themselves right.

For me, I wanted to have a low-key day catching up on some work. A no-stress day of learning. My self-care. I had a toy-problem that was on my mind, some needed review of assorted topics (see: my last post), and most importantly, some gaps in my knowledge of React that needed filling.

As it happened, our assignment was a React project and was exactly the kind of work I was intending to give myself.

*What a relief.*

I didn't get as much done today as I wanted on the assignment, but feel pretty good about what I've managed so far - working with state, props, inputs and other click events, and all without majorly relying on the docs (and eschewing non-docs resources).

I'll be up early in the morning to finish up what I can.

##Blog thoughts

Here are a few changes that I've thought about bringing to this journal.

* Tracking my daily state (emotions, energy, etc) during the day that I can apply some sort of visualization to later on. It could be useful for my reflections, or to share with other parties who would want that kind of data (staff, prospective students, my cohort-mates).

* Moving from a daily to a less-frequent posting schedule that might allow me more time to work on entries and maybe shift my focus towards more technical themes or ideas. Daily is great. It makes me feel accountable. But I also feel like I'm leaving something on the table by not taking the time to ferment a topic and make more of 'contribution' than these posts feel like. Maybe I'd create mini-tutorial or instructionals, or just share js/webdev/programming insights that I've gained.

* Maybe guest posts?

* I had a couple other ideas floating around but I guess they've floated away for now.
Decor La Rouge - 15 Best Indoor Plants & Importance of Plants In Your Home
Published: 2021-07-06 05:02:06

If you like sweet fragrances and want it to be a part of your everyday life, consider growing jasmine indoors. All jasmine plants are not fragrant, Jasminum polyanthum, the variety commonly used while growing jasmine indoors, has a sweet aroma that gives out fragrant aroma at night. Plants bring natural beauty to our living spaces. By creating texture and balance, a room or patio can be transformed into an environment that comforts and welcomes. Helps to diversify bacteria in our bodies to fight infections & allergies.Plants help patients recovering from surgery.
<b>Read more:</b> <a href="https://decorlarouge.com/15-best-indoor-plants-importance-of-plants-in-your-home">  15 Best Indoor Plants</a>
<b>Related Blogs:</b>
<a href="https://decorlarouge.com/design-your-bedroom-with-best-color-scheme">Design Your Bedroom With Best Color Scheme</a>

<a href="https://decorlarouge.com/low-maintenance-office-plants">Low-Maintenance Office Plants</a>

<a href="https://decorlarouge.com/top-trending-color-schemes-for-kitchens">Top Trending color schemes for kitchens</a>

<b>Contact Details:</b>
422 Richards St Unit 170, Vancouver, BC V6B 2Z4, Canada

1-6046704333

<a href="https://decorlarouge.com/">Interior Design Agency</a>

<b>Follow us:</b>
<a href="https://www.instagram.com/decorlarouge/">https://www.instagram.com/decorlarouge/</a>

<a href="https://twitter.com/decorouge">https://twitter.com/decorrouge</a>

<b>Visit Reference Profile Websites:</b>
<a href="https://bit.ly/3hzVd6j">https://bit.ly/3hzVd6j</a>
<a href="https://bit.ly/3waAjQu">https://bit.ly/3waAjQu</a>
<a href="https://bit.ly/2UhuvqS">https://bit.ly/2UhuvqS</a>
<a href="https://bit.ly/3xaFvFg">https://bit.ly/3xaFvFg</a>
<a href="https://bit.ly/3halokW">https://bit.ly/3halokW</a>
<a href="https://bit.ly/3wcdNXn">https://bit.ly/3wcdNXn</a>
<a href="https://bit.ly/2UioWc0">https://bit.ly/2UioWc0</a>
<a href="https://bit.ly/3xdQuO4">https://bit.ly/3xdQuO4</a>
<a href="https://bit.ly/362K60p">https://bit.ly/362K60p</a>
<a href="https://bit.ly/364Epin">https://bit.ly/364Epin</a>
<a href="https://bit.ly/3gxaOEp">https://bit.ly/3gxaOEp</a>
<a href="https://bit.ly/3gxBoND">https://bit.ly/3gxBoND</a>
<a href="https://bit.ly/3vw1BQT">https://bit.ly/3vw1BQT</a>
<a href="https://bit.ly/3x6qDYq">https://bit.ly/3x6qDYq</a>
<a href="https://bit.ly/2S1uTcm">https://bit.ly/2S1uTcm</a>
<a href="https://bit.ly/3wAuKf0">https://bit.ly/3wAuKf0</a>
<a href="https://bit.ly/3wL9Tpi">https://bit.ly/3wL9Tpi</a>
<a href="https://bit.ly/3q2V7b3">https://bit.ly/3q2V7b3</a>
<a href="https://bit.ly/3vsbAXq">https://bit.ly/3vsbAXq</a>
<a href="https://bit.ly/3wydvLB">https://bit.ly/3wydvLB</a>
<a href="https://bit.ly/3q3Q8ab">https://bit.ly/3q3Q8ab</a>
<a href="https://bit.ly/3wkxMTZ">https://bit.ly/3wkxMTZ</a>
What is Quickwork Chat?
Published: 2021-07-06 04:43:25

Quickwork Chat is a messaging platform that creates awesome and best-suited virtual assistants and human-agent service for you. From FAQ bots, social messaging, and quick reply bots to context enabled chatbots, Quickwork Chat is most reliable and efficient to serve the assistant service to your customers seamlessly.
The chatbots—multi-lingual in nature—create a live user experience and help answer queries using AI in real-time. You ask something that is bothering you and Quickwork Chat replies you instantly in a text or image representation with cent-percent precision making you understand better.  
You might be concerned more for getting started—configuring a bot—rather than its functioning. Ain’t you? Quickwork.co has a team of experts that configure the chatbots and embed it on your web portal or an app. With a blend of NLP and NLU computational applications, the responses are programmed and recorded through the back-end serves a perfect reply to the concerns that a user raises.
Once live, the chatbots with a similar appearance and visualization of a website act as an integral part rather than being a separate entity. Moreover, the plethora of features that Quickwork Chat holds, add a cherry on the cake. You talk about uploading images, files, audios, video; sharing locations; easy redirect, or single-click message broadcasting, Quickwork Chat does all hassle-free with a high level of persistence. In the case, where a chatbot doesn't come up with an appropriate response, the Bot-to-Human hand-off feature comes to the rescue. 
Our proactive support team takes over the conversation, monitors the concerns in detail, and replies instantly to guide you through.
Customize the Editor Window Using Templates in Blazor Scheduler
Tags: blazor, scheduler, webdev, templates
Published: 2021-07-06 04:32:35

Learn how to customize the editor window easily by using templates in Syncfusion’s [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Blazor Scheduler").

To find out how to add a basic Blazor Scheduler to your Blazor application, watch these videos: 

Add a Blazor Scheduler to the Blazor Server App Using VS Code
https://bit.ly/3uPalCi

Bind Appointment Data to the Blazor Scheduler [Getting Started - Part 2]
https://bit.ly/3yRGXxv

In this video, you will learn how to customize the editor window using a custom template. You will also learn how to add Syncfusion Blazor components like Dropdown List, Text Box, and DateTimePicker to the [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Blazor Scheduler") editor window.

{% youtube t0v8rCEP7ps %}
02-Installing Node NPM and building first application
Tags: node, javascript, vscode
Published: 2021-07-06 04:00:58

Visual Studio Code is the ultimate editor for JavaScript development. I would like to demonstrate how to set it up and make it ready for the development. In later part of another video, I will demonstrate about various different productivity tips for Visual Studio code and explore some essential Extensions. 

{% youtube X_qtwQLq6Uw %}
mastering javascript and react.
Published: 2021-07-06 03:59:30


**Javascript is that angry girlfriend who gets angry at every small mistake but you can't leave her because you love her so much.
-

**It is such a beautiful language that u will almost fall in love with it, but at the same time it is so frustrating that you might drop the idea of learning it 😂![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7t9ca0mzhtifl90pa0tq.jpg)
Mastering javascript in in very short time is next to impossible to.

jvascript require dedication, javascript require patience.

Below i've shared some tips to increase your productivity and  definitely learn some of the most interesting topics(as per my experience)…

How to learn more productively and efficiently(few tips below).

1. Enrol in any javascript course on udemy 
(I'll recommend brad traversy this guy is a legend) or you can also try the free code camp javascript course - best to start with.

2. The best way to increase your productivity is by practising, try completing some projects (javascript projects are bit complex at starting but they are all wroth it).

3. Javascript/ python community are the best, make sure you join one, it would be really helpful.

4. The most important one javascript is a very very weird man, it will frustrate the hell out of you so if you’re stuck anywhere just calm yourself down it happens with everyone...

5. Read codes of other programmer, people usually ignore this (when you’re starting off) but reading documentation, codes are actually quite helpful

6. watch some movies, got out for play, make gfs (hahaha)
and thank me if it's helpful

**And for REACT part you don't have to master/learn/love REACT, master javascript and REACT WILL AUTO FALL FOR YOU**

**One more thing The best time to learn javascript is now because the future belongs to Javascript**, javascript is taking over the computer science world faster than any other language be it python, rust, kotlin, go etc.
sayonara
What is a DevOps Architect? The DevOps Roles explained (ft Mickey Gousset)
Tags: devops, architecture, culture, live
Published: 2021-07-06 03:41:56

There is a fair amount of confusion when people talk about ___DevOps Roles and Responsibilities___.

In this live stream we discuss with [Mickey Gousset](https://twitter.com/mickey_gousset) (_DevOps Architect at GitHub_) about __what is a DevOps architect__ role and what are the DevOps Architect roles and responsibilities. We will also __compare DevOps Architect vs DevOps Engineer__.

{% youtube TF9EIS9vxnM %}

[Link to the video: https://youtu.be/TF9EIS9vxnM](TF9EIS9vxnM)

📘 This is the rough outline:

- Address the confusion about DevOps Roles
- Companies are getting the roles wrong
- What is a DevOps Architect
- DevOps Architect vs DevOps Engineer
- Live Q&A


Check __Mickey Gousset__ out:
► YouTube: https://www.youtube.com/c/MickeyGousset
► Twitter: https://twitter.com/mickey_gousset
► GitHub: https://github.com/mickeygousset

__Like, share and follow me__ 🚀 for more content:

📽 [YouTube](https://www.youtube.com/CoderDave)
☕ [Buy me a coffee](https://buymeacoffee.com/CoderDave)
💖 [Patreon](https://patreon.com/CoderDave)
🌐 [CoderDave.io Website](https://coderdave.io)
👕 [Merch](https://geni.us/cdmerch)
👦🏻 [Facebook page](https://www.facebook.com/CoderDaveYT)
🐱‍💻 [GitHub](https://github.com/n3wt0n)
👲🏻 [Twitter](https://www.twitter.com/davide.benvegnu)
👴🏻 [LinkedIn](https://www.linkedin.com/in/davidebenvegnu/)
🔉 [Podcast](https://geni.us/cdpodcast)

<a href="https://www.buymeacoffee.com/CoderDave" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 30px !important; width: 108px !important;" ></a>

{% youtube TF9EIS9vxnM %}
Day 12 of #100DaysOfCode!

Tags: javascript, beginners, 100daysofcode, codenewbie
Published: 2021-07-06 03:38:31

<h2>Today's progress</h2>
Today I worked on `Object.values()`

<h2>What I learned</h2>
The `Object.values()` method returns an array of enumerable property values in the same order that the properties were manually given. Think of the the order similar to that of a `for loop`. 

Let's take a better look at how this works with code.
```javascript
let computers = ["MacBook Pro", "Dell XPS", "Lenovo", "Surface Pro"]
console.log(Object.values(computers))
//output: ["MacBook Pro", "Dell XPS", "Lenovo", "Surface Pro"]

```

With the above code we have an `array of computers` and then we use `Object.values()` and pass in the `parameter` *computers*. Next, when we do a `console.log`. You'll notice how it returns an array of the object's own enumerable property values.

#####Another example...

```javascript
let books = {
    0: "Mindset",
    1: "Boundless",
    2: "48 Laws of Power"
}
console.log(Object.values(books))
//output: ["Mindset", "Boundless", "48 Laws of Power"]
```

Here, we have an array like objects and when we use the method `Object.values()` on *books* it returns an array of enumerable property values. 


<h2>In conclusion</h2>
The method `Object.values()` can be a great tool to return enumerable property values in an array.
BIG bounty from a SV blockchain startup! 
Published: 2021-07-06 03:34:53

Our first testnet bounty is here for you guys to help us pre-test the network and get ready for the main launch. We want to make it simple for anyone to run a Taraxa node. To do that, we need to have scripts for all major cloud platforms, since the majority of users will be using those to set up a node and produce blocks, competing for the testnet rewards. If you’re familiar with Bash, you can write a script for AWS, Azure, Google Cloud, Alibaba Cloud, or any other platform popular in your region.

[b]How to participate:
[/b]Be sure to register on our community site for the latest updates on technical requirements and instructions: https://community.taraxa.io/
Link to the bounty and detailed instructions: https://community.taraxa.io/activity/48

[b]Submissions and rewards: win 100, 000 $TARA!
[/b]You need to submit both the actual script and the documentation according to the bounty’s instructions. Submissions without corresponding documentation will not be rewarded.
Our dev team will be reviewing the submissions to select the best working scripts for each cloud platform. 100, 000 $TARA per script will be allocated to the winners!
Ask our team anything in Github PRs and Discord thread — let’s get BUIDLing![img][/img]
New Laravel community podcast
Tags: laravel, php
Published: 2021-07-06 03:24:25

Hey! I start a new podcast related to all activities from Laravel community it is a little crunch so it lasts just a few minutes, you can listen it on:

- Anchor: https://anchor.fm/devscamp/episodes/Laravel-last-week-of-june-releases-e1406tc

- Spotify: https://open.spotify.com/episode/0fUOWebZ0rUigblIt3lXyq?si=FBjpiyzIQ6Whzw1TVVvZ5g&dl_branch=1

- Google Podcast: https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy82MjJmMmYwOC9wb2RjYXN0L3Jzcw==

If you like the show please share with your friends!
Automate creation, validation of AWS AMI - EC2 Image Builder
Tags: aws, beginners, devops, cloud
Published: 2021-07-06 03:00:43

In the last article we studied AWS AMI how to create them so that we can easily get preconfigured EC2 instances. Lets now look at a new AWS service which allows us check if the AMI is created correctly and automate the whole process.

# What is EC2 image builder?

EC2 image builder is an AWS service which allows us to build, maintain validate and test our AWS AMI. It is a free service and we only have to pay for the underlying storage and EC2 instances that this service uses.

# How does EC2 image builder work?

1. We setup our EC2 image builder.

1. It creates an EC2 instance which builds everything we have defined like installing a firewall, adding python, adding java, nodejs etc

1. It then creates an AMI from it.

1. Then image builder create a test EC2 instance from this AMI and runs a bunch of tests that are defined by us.

1. This leads to the final EC2 AMI image that we can use

1. We can also schedule it of you keep on changing our software or update dependencies. It can be run weekly, daily as and when you want

As we can see that this service can help us a lot in building our AMI and make them secure by updating and testing them on dependency or software updates.

In the next article we will do a Hands on on EC2 image builder.
SmubsSMP Update #1
Tags: minecraft
Published: 2021-07-06 02:51:44

##**Custom World Gen, Custom Enchants, Duels, Mob arena, Server shop, And smaller plugin showcases!** 







Hey! Welcome to the first ever "we're not dead" SmubSMP server 
update!

I know we've been pretty quiet about the whole thing, but we've actually been making really good progress and I think it's safe to say we're nearing the end goal! (pog to show genuine happiness) VV

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cldncalg5yi6mj0zgxl.pn)

We've taken a lot of consideration to peoples suggestions and comments and have been working hard to get a server we think will appeal to everyone
from baby casual players

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53zfxlo765f2ltoa5hno.png)
 
to massive thick skulled veteran gamers.
Satellite imagery catalogue browser!
Tags: geospatial, gis, satelliteimagery, mapping
Published: 2021-07-06 02:19:31

Hi everyone, My name is Annabelle, and I work for Arlula. Arlula is a start-up satellite imagery marketplace, and we are looking for feedback and testing of a new satellite catalogue browser
https://api.arlula.com/catalog

Feel free to comment on what you like or don't like! We want to make an easy to use browser for the geospatial community!

Find the browser here> https://lnkd.in/eZCm5TK
How to convert a number into an array in JavaScript?
Tags: javascript
Published: 2021-07-06 00:00:00

---
  title: How to convert a number into an array in JavaScript?
  published: true
  tags: JavaScript
  date: Tue Jul 06 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/convert-number-to-array-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-b20f9b24c0613de53a2cacc9b594eca3.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/convert-number-to-array-javascript)
  
To convert a number into an array, we can use the `from()` method from the global `Array` object in JavaScript.

### TL;DR

```js
// random number
const num = 123456;

// use Array.from() method to convert numbers into an array
// Pass the string version of number "123456" as the first argument
// and the Number constructor as the second argument
const numsArr = Array.from(String(num), Number);

console.log(numsArr); // [1, 2, 3, 4, 5, 6]
```

Let's consider a number `123456` like this,

```js
// random number
const num = 123456;
```

Now to convert this number into an array, we can first use the `Array.from()` method and pass the stringified version of the number `123456`. To convert the number into a string, we can use the `String()` method like this,

```js
// random number
const num = 123456;

// use Array.from() method to convert numbers into an array
// Pass the string version of number "123456" as the first argument
const numsArr = Array.from(String(num));

console.log(numsArr); // ["1", "2", "3", "4", "5", "6"]
```

### NOTE: We are converting the number into a string since `string` types in JavaScript can be array-like or iterable, which is what the first argument of the `Array.from()` method expects.

Now, if we examine the contents of the `numsArr`, we can see that the numbers have been converted to an array. There is only one problem: every element is a string version of the numbers, which is not what we need.

To convert the `string` elements into their corresponding `number`, we can pass the second argument of the `Number` constructor to the `Array.from()` method like this,

```js
// random number
const num = 123456;

// use Array.from() method to convert numbers into an array
// Pass the string version of number "123456" as the first argument
// and the Number constructor as the second argument
const numsArr = Array.from(String(num), Number);

console.log(numsArr); // [1, 2, 3, 4, 5, 6]
```

Now if we look into the contents we have the correct numbers as the array elements. Yay 🎊!

See the above code live in [JSBin](https://jsbin.com/luxunocuxe/2/edit?js,console).

That's all 😃!

### Feel free to share if you found this useful 😃.

---