teleren/devto huggingface dataset:
The Questions and the Rules to Props
Tags: react, javascript, components, jsx
Published: 2021-07-29 18:19:57

## The Questions


### What is Props?
Props represents data. Props allow a component to receive data from its parent component. 

### Why do we use Props?
We use Props because React is a component-based library.  React separates the user interface of an application into individual pieces, known as Components. Those components need to send data to each other and they do so, using props.

### How can we use Props?
To use Props effectively, consider these steps: 
+ Create a parent component that renders some JSX.
```js
class Parent extends React.Component{
      render(){
          return(
            <h1>Parent</h1>
          )
      }
}
```

+ Create a child component.
```js
const Child = () => {  
  return <h3>I'm a child!</h3> 
}
```

+ Import the child component in the parent component. 
```js
import Child from './Child'

class Parent extends React.Component{
      render(){
          return(
            <h1>Parent</h1>
          )
      }
}
```
+ Pass in Props into the child component as a parameter.

```js
const Child = (props) => {  
  return <h3>I'm a child!</h3> 
}
```
+ Render the child component in the parent component. 

```js
class Parent extends React.Component{
      render(){
          return(
            <>
              <h1>Parent</h1>
              <Child text={"Child!"}/>
            </>
          )
      }
}
```

+ Render the Props in the child component using string interpolation. 

```js
const Child = (props) => {  
  return <h3>{props.text}</h3> 
}
```



## The Rules


1. Props can only be sent from parent component to child component (This is called "unidirectional flow").
2. Props are immutable, meaning they cannot be changed.
3. Props is an object. 
4. Props represents data. 
5. Props are being passed down to components as a parameter. 


## Conclusion 
We use props to pass data between components. The ability to pass data in this manner makes application development more efficient and makes your code more DRY. Props is a special feature to ReactJS and continues to prove the ever-evolving nature of tech. Let's continue to evolve with it! 


Comment below + let's start a conversation. 
Thanks for reading!
Microsoft Learn Azure Health Bot: Adding Scenarios to a Healthbot – LIVE – Aug 9, 2021
Tags: azure, beginners, tutorial, ai
Published: 2021-07-29 16:36:18

## Adding Scenarios to a Healthbot

Live on [LearnTV](https://aka.ms/learntv)
Date: August 9, 2021
Time: 08:00 AM - 09:00 AM (British Time)
Location: Global
Format: Livestream
Topic: AI Services
[Register Now](
https://developer.microsoft.com/en-us/reactor/eventseries/AzureHealthBot/?wt.mc_id=twitter_AzureHealthBot_organicsocial_reactor)

### Details:
Azure Health Bot enables users to build a health bot by using built-in or custom scenarios. In this 4 part series we will explore different learning paths that will guide you through the creation of both a basic and enhanced health bot. You'll learn about language understanding and how to use both built-in and template scenarios.

In **Part 2: Adding Scenarios to a Healthbot**, we will be covering the below learning modules:

**[Language understanding in Azure Health Bot](https://aka.ms/HealthBotLanguageUnderstanding)**
Language understanding plays a fundamental role in the working of Azure Health Bot. you'll Learn about LUIS and concepts like intents, utterances, and entities in the context of Health Bot. Understand the importance of different language models and how to add them to your Health Bot instance.
Learn how to integrate LUIS into your Health Bot instance.

**[Azure Health Bot built-in scenarios](https://aka.ms/HealthBotBuiltInScenarios)**
Azure Health Bot supports many built-in scenarios. Examples include triaging a medical condition, finding information about a disease or types of drugs, and getting user consent. Identify the different built-in scenarios associated with your Health Bot instance. Recognize built-in scenario use cases. Build a simple web page that allows users to communicate with your Health Bot instance through a Web Chat control.

**[Azure Health Bot scenario templates](https://aka.ms/HealthBotTemplateScenarios)**
Learn how to enrich the capabilities of your bot by using the prebuilt scenario templates. Learn what scenario templates are. Recognize use cases for scenario templates. Build a health bot by using a scenario template.

-----------
Live on [LearnTV](https://aka.ms/learntv)
Microsoft Learn Learning Path: [Create intelligent health bots with Azure Health Bot](https://docs.microsoft.com/el-gr/learn/paths/create-bots-azure-health-bot/)

**[Register Now](https://developer.microsoft.com/en-us/reactor/eventseries/AzureHealthBot/?wt.mc_id=twitter_AzureHealthBot_organicsocial_reactor)**
HTML TUTORIAL FOR BEGINNERS PART 9
Tags: html, programming, codenewbie, 100daysofcode
Published: 2021-07-29 16:30:55

## Table of contents
### 👉Audio🎶🔊
### 👉Video📽🎬
### 👉Embedding📎📌
#### Audio 🔊🎶
YouTube is one of the largest and famous video sharing platform.
Now you may wonder how to add video and audio in a website.
It's super easy like adding images into a website.
Look at the below Example:
```
<audio controls loop muted>
<source src="..." type="audio/mp3" type="audio/ogg">
</audio>
```
Audio has some attributes like👇
* controls
* loop
* muted

Controls attribute displays play button and speaker icon and audio duration.
Loop attribute plays audio continuously.
Muted attribute mutes the audio by default.
Inside audio source element comes.
Source element has some attributes like👇
* src
* type
* srcset 

#### Video🎬📽
Video is like audio but video has two more attributes than video like👇
* autoplay
* poster

Autoplay attribute plays video when the web page is loaded.
Poster is an overlay at the beginning of video.
Look at the video Examples below 👇
```
<video controls muted loop autoplay poster="...">
<source src="..." type="video/mp4" type="video/ogg">
</video>
```
Nowadays there lots of video formats like
* mp4
* webm
* mp 
* mp2
* avi
* mpeg
* mov
* qt

And many more.
Modern browsers support variety types of videos.
As well lots of audio formats available in today's world, modern browsers support them.
#### Embedding
Embedding means displaying external content or posts into our website.
In HTML we use `iframe` and `embed` elements.
#### An example from YouTube
```
<iframe width="344" height="194" src="https://www.youtube.com/embed/R_dwUR2HbZM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```
Beside YouTube Tiktok,  Twitter,  Instagram allow us to embed their posts and contents.

Hope you enjoy the story.
Please don't forget to like and share.
Snippets in C#: Offsets and substrings
Tags: beginners, csharp, snippet, tutorial
Published: 2021-07-29 16:29:09

Today we have two fun snippets for C#. The first is a less verbose syntax for retrieving elements from the end of a list. The second is a similar syntax for substrings.


#### Retrieve an offset from the end

```csharp
using System;
					
public class Program
{
	public static void Main()
	{
		int[] numbers = new int[] { 0, 1, 2, 3, 4, 5, 6 };
		
		// Equivalent to: 
		//    numbers[numbers.Length - 2].ToString()
		string number = numbers[^2].ToString();
		
		// Outputs: "Hello: 5"
		Console.WriteLine("Hello: " + number);
	}
}
```


#### Retrieve a substring

```csharp
using System;
					
public class Program
{
	public static void Main()
	{
		string sentence = "Roger is a good boy.";
		
		// Equivalent to: 
		//    sentence.Substring(9, sentence.Length - 9 - 1)
		string descriptionOfRoger = sentence[9..^1];
		
		// Outputs: "What is Roger? a good boy"
		Console.WriteLine("What is Roger? " + descriptionOfRoger);
	}
}
```
Activision Blizzard Discrimination and Harassment Suit, the Incredible Gail.com & more on DevNews!
Tags: news, podcast
Published: 2021-07-29 15:58:40

---
title: Activision Blizzard Discrimination and Harassment Suit, the Incredible Gail.com & more on DevNews!
published: true
description: Listen to S5E2 of the DevNews pod!
tags: news, podcast
series: DevNews Season 5
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

Listen to S5E2 of the DevNews podcast today!

{% podcast https://dev.to/devnews/s5-e2-activision-blizzard-discrimination-and-harassment-suit-security-issues-with-some-independent-phone-producers-and-the-incredible-gail-com %}

**Hosts:** @saronyitbarek & @joshpuetz 

**Guest:** [Kyle Rankin](https://twitter.com/kylerankin), Chief Security Officer at Purism, SPC and the author of a number of books on security and infrastructure, most recently Linux Hardening in Hostile Networks for Pearson. 

---

_You can [follow DevNews](dev.to/devnews) 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/s5-e2-activision-blizzard-discrimination-harassment/id1525581923?i=1000530367033)
- [Spotify](https://open.spotify.com/episode/1cUPPfVV5Zq5Vou66vUItb)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzM0?sa=X&ved=0CAQQkfYCahcKEwjwrq200ojyAhUAAAAAHQAAAAAQCA)
- [Stitcher](https://www.stitcher.com/show/devnews/episode/s5-e2-activision-blizzard-discrimination-and-harassment-suit-security-issues-with-some-independent-phone-producers-and-the-incredible-gail-com-85747955)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews/s5e2-activision-blizzard-SA8ukmYJFUZ/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=164783628)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods website](https://devpods.herokuapp.com/podcasts/devnews/episodes/175)

#### _Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season five sponsor, [Scout APM](https://scoutapm.com/devnews) ❤️ 


We hope you enjoy this episode of DevNews!
How to make Systemd have access to environment variables
Tags: systemd, linux, environment, docker
Published: 2021-07-29 15:51:13

Anyone who works with linux would have heard about [Systemd](https://www.freedesktop.org/wiki/Software/systemd/). Its great to manage your services as it runs as a daemon and can manage process lifecylce of your application, services etc. I use it to manage my application running using docker-compose. 

Every application requires some secrets or configs that are stored as environment variables and are accessible by apps via standard process initiation from your source environment.

When using systemd it was a surprise that it doesn't read the variable that are set in your environment. one of the easiest way to resolve that is to have a file with varaibles defined and use the `EnvironmentFile=` assignemnt in your service file to allow systemd access to your values. 

In the file variables are defined just as regular variables for example

```
TAG=test
```


Here is a sample file I use for managing my applications via docker-compose and have environement variables available to the containers for each run. 
```
[Unit]
Description=%i service with docker compose
Requires=docker.service
After=docker.service

[Service]
Restart=always

WorkingDirectory=/opt/%i
EnvironmentFile=/opt/env
# Remove old containers, images and volumes
ExecStartPre=/usr/local/bin/docker-compose down
ExecStartPre=/usr/local/bin/docker-compose rm -f
ExecStartPre=-/bin/bash -c 'docker network ls -qf "name=%i_" | xargs docker network rm'
ExecStartPre=-/bin/bash -c 'docker ps -aqf "name=%i_*" | xargs docker rm'

# Compose up
ExecStart=/usr/local/bin/docker-compose up

# Compose down, remove containers and volumes
ExecStop=/usr/local/bin/docker-compose down

[Install]
WantedBy=multi-user.target
```
ฟรี IOS Widget Covid ไทย ตัวเลขอัพเดททุกวัน
Tags: ios, widget, javascript
Published: 2021-07-29 15:48:08

---
title: ฟรี IOS Widget Covid ไทย ตัวเลขอัพเดททุกวัน
description: IOS Widget ตัวเลข COVID รายวัน ที่เดียวในไทย
published: true
tags: ios,widget,javascript
cover_image: https://soontobeprogrammer.com/posts/covid-ios-widget/1.png
---

สวัสดีครับ โพสนี้ทำขึ้นมาเพื่ออธิบายวิธีการเพิ่ม Widget ให้ iOS นะครับ

สำหรับ Android ดูได้ที่นี่ครับ
--> [Android Widget](https://www.facebook.com/GamingDoseTech/photos/a.320969531811686/958076258101007/)

## Scriptable

โหลดแอพ --> [scriptable.app](https://scriptable.app/)

## Script

https://github.com/SaKKo/scriptable-covid-ios-widget

หรือ

https://raw.githubusercontent.com/SaKKo/scriptable-covid-ios-widget/main/index.js

## วีดีโอเพิ่ม Script

วิธีการเพิ่ม สอนเป็นวีดีโอดูผ่าน youtube สำหรับคนอ่านข้างล่างไม่เข้าใจ

[![iOS Widget Covid 19 youtube](https://soontobeprogrammer.com/posts/covid-ios-widget/2.png)](https://www.youtube.com/watch?v=dUitlz1Cro0)

หรือถ้าไม่ชอบดูวีดีโอ สามารถทำตามนี้ได้ครับ

## ไม่ชอบดูวีดีโอ ดูรูปแทน

![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/1.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/2.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/3.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/4.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/5.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/6.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/7.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/8.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/9.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/10.PNG?raw=true)

## วิธีเพิ่ม Widget

![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/11.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/12.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/13.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/14.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/15.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/16.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/17.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/18.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/19.PNG?raw=true)
![](https://github.com/sakko/scriptable-covid-ios-widget/blob/main/assets/20.PNG?raw=true)

## เสร็จแล้วครับ

หวังว่าจะมีประโยชน์นะครับ
ใส่หน้ากากกันด้วยนะครับ
Formal Methods
Published: 2021-07-29 15:42:26

**One of the The Most Powerful and Valuable sentence** i have found in the chapter 7 of the Book *The Pragmatic Programmer* 

>But always remember that formal development methods are just one more tool in the toolbox. If, after careful analysis, you feel you need to use a formal method, then embrace it—but
remember who is in charge. Never become a slave to a methodology: circles and arrows make poor masters. Pragmatic Programmers look at methodologies critically, then extract the best from each and meld them into a set of working practices that gets better each month. This is crucial. You should work constantly to refine and improve your processes. Never accept the rigid confines of a methodology as
the limits of your world.
Fluent Terminal Themes
Tags: showdev, design, javascript
Published: 2021-07-29 15:23:34

Since the last couple of days I started using fluent terminal instead of my regular cmd shell. Which is pretty good by the way but fluent terminal is pretty dope because it offers something that all of us crave for. 

Switching themes 🙂 ikr

For more info. about fluent terminal is general you can checkout this post by [Robin Kretzschmar](https://dev.to/darksmile92)

{% post https://dev.to/darksmile92/windows-10-fluentterminal-5a24 %}

I'm here to present you with collection of themes that you can use in the fluent terminal. 

https://windowsterminalthemes.dev/ provides us with about **282+** themes more of less.
Yep that many. 

You can get a json file with an array of all those themes easily on the internet but you can't use it directly unless you change that into the proper format in which fluent terminal asks its file to by. Couple of tweaks nothing much.

And to do that I present you with a little script that I wrote to extract out all those themes into a separate folder.
You can pull it down from my Github. Just run the index file and you're good to go. 

{% github atulitanand/fluent-terminal-theme-generator %}

And finally my favourite [CyberPunk2077](https://windowsterminalthemes.dev/?theme=CyberPunk2077).
I love a lot of themes but a combination of pink and purple make it look my a delicious cup of sundae.

If you wish to take a preview, visit [windowsterminalthemes.dev](https://windowsterminalthemes.dev/). 
Good luck with finding your precious delight.

Thanks for reading have a great day.
Intranetus - the space for team work
Tags: productivity, webpack, projectbenatar
Published: 2021-07-29 15:19:42

Working on the different projects, you often have to use messengers to report the bugs, show layouts or discuss the week’s working plans. However, the list of actual and completed tasks is stored in a separate service. Task trackers rarely allow you to communicate in the chat format, messengers are not able to record tasks and deadlines.

Communicate more effectively
Intranetus separates business and private zones reliably without losing important information. Intranetus is the ability to communicate, conduct audio and video conferences and collect all working files in one place - without being distracted by a bunch of chats in different messengers.

Manage business 
Intranetus coordinates your team’s activities: allows you to manage projects, organize and quickly set up processes for everything from meetings to planning, and takes efficiency to the next level.

Share knowledge 
Intranetus is a culture of open teamwork. Each team member makes suggestions freely, shares ideas and receives feedback quickly. All notes, quarterly reports and important documents are collected and stored in the collective “Brain”.

https://intranetus.com/
Scraping Hotel Listings from Booking.com using Python and Beautiful Soup
Published: 2021-07-29 14:46:41

One of the biggest applications of Web Scraping is in scraping hotel listings from various sites. This could be to monitor prices, create an aggregator, or provide better UX on top of existing hotel booking websites.

Here is a simple script that does that. We will use BeautifulSoup to help us extract information and we will retrieve hotel information on Booking.com.

https://youtu.be/PRkOFgNAkio
The inside view on running a Developer Program
Tags: devrel
Published: 2021-07-29 14:40:25

The latest SlashData Session is now available! 

In this session, you will access direct insights on how professionals run their developer program. 

We look into the data from the latest Developer Program Leaders survey and the responses of 96+ developer marketing, relations, advocacy or evangelism professionals. We asked them what they do all day, how they measure success and more and now we will present the results. 

**Session content and chapters:**
Developer Program Benchmarking
The size of developer programs
What do developer relations practitioners do all day?
Money talks - Justifying your developer program
Measuring success
Segmentation and strategy
COVID-19 Impact on Developer Programs
Google dominates, but Amazon wins big
Developer Program Benchmarking – Industry leaders & preview

{% youtube NdgoPf72jcI %}
PHP __destruct (🧙‍♂️Lesson 2: PHP Magic Methods)
Tags: php, laravel, software, programming
Published: 2021-07-29 14:25:08

{% user cleancodestudio %}

[![Twitter Follow](https://img.shields.io/twitter/follow/cleancodestudio.svg?style=social)](https://twitter.com/cleancodestudio) 

---

## PHP __destruct Magic Method method 

{% youtube f8SeAh_pZ80 %}

During Lesson One of our Php Magic Methods Tutorial we learned about the infamous __construct Php Magic Method. 

What's the opposite of construction? Destruction! 

Dive in with me as we learn how to property utilize the PHP destruct magic method in the second lesson of our PHP Magic Methods series.

---

To use the destruct magic method we simply add the __destruct magic method as a public function on our class.

In the example below our constructor accepts the $lady and $gentleman in our constructor. The constructor is called when our object in instantiated or constructed.

The destructor magic method on the other hand is the exact opposite. The __destruct PHP magic method is going to be executed when the object is destroyed (using unset as shown below) or when the PHP run time is complete. 

```php
<?php

class Home
{
    public $lady;
    public $gentleman;

    public function __construct($lady, $gentleman)
    {
        $this->lady = $lady;
        $this->gentleman = $gentleman;

        echo "Welcome Home {$this->lady} & {$this->gentleman}!\n\n";
    }

    public function __destruct()
    {
        echo "You'll about to die {$this->lady} & {$this->gentleman}...guess it was a simulation after all \n";
    }
}

$home = new Home('Sarah', 'Tom');
$lake_house = new Home('Spicy Senorita', 'Surfer Cali Dude');

unset($home); // destroying or obliterating

// application ends and then $lake_house destructor will execute
```

**Output**
```
"Welcome Home Sarah & Tom"

You'll about to die Sarah and Tom...guess it was a simulation after all.
```

What if we use the `sleep` function to pause our runtime for 5 seconds before we call the unset function to destroy our object?
```php
<?php

class Home
{
    public $lady;
    public $gentleman;

    public function __construct($lady, $gentleman)
    {
        $this->lady = $lady;
        $this->gentleman = $gentleman;

        echo "Welcome Home {$this->lady} & {$this->gentleman}!\n\n";
    }

    public function __destruct()
    {
        echo "You'll about to die {$this->lady} & {$this->gentleman}...guess it was a simulation after all \n";
    }
}

$home = new Home('Sarah', 'Tom');
$lake_house = new Home('Spicy Senorita', 'Surfer Cali Dude');

sleep(5);

unset($home); // destroying or obliterating

// application ends and then $lake_house destructor will execute
```


**Output**
```
Welcome Home Sarah and Tom
```

_5 second pause_

**Output**
```
You'll about die Sarah and Tom...guess it was a simulation after all
```


If we removed the unset function all together, then the `__destruct` magic method is run when the PHP runtime is complete. 


{% youtube f8SeAh_pZ80 %}


---

{% user cleancodestudio %}

[PHP __destruct magic method](https://www.cleancode.studio/series/php-magic-methods/episodes/2)
Deconstructing Block Arguments In Ruby
Tags: ruby
Published: 2021-07-29 14:01:12

We usually use block arguments like so:

```ruby
[[1, 2, 3], [4, 5, 6]].map { |arr| arr[0] }
=> [1, 4]
```

We also know that we can deconstruct the arguments using the splat operator, like so:

```ruby
[[1, 2, 3], [4, 5, 6]].map { |first, *rest| rest }
=> [[2, 3], [5, 6]]
```

But what I recently found it is that we can also deconstruct block arguments like so:

```ruby
[[1, 2, 3], [4, 5, 6]].map { |first, second, third| first }
=> [1, 4]
```

We can also group arguments up with parentheses to deconstruct them, like so:

```ruby
{foo: "bar", bim: "baz"}.each_with_object({}) { |(key, val), memo| memo[key] = [key, val] }
=> {:foo=>[:foo, "bar"], :bim=>[:bim, "baz"]}
```