teleren/devto huggingface dataset:
Looking for Dev Python for blockchain project 
Tags: python, blockchain
Published: 2021-09-30 06:12:50

Hello everyone 

I am very happy to be here … I am the CEO of ALFCOIN project and great lifetime project on the blockchain and I am looking for a solid partner Dev for this project with knowledge in Python and Soludity ! 

You can visit the website for more info about my project !
www.alfcoin.net
React Sass
Tags: react, beginners
Published: 2021-09-30 05:59:11

## What is Sass
Sass is a CSS pre-processor.

Sass files are executed on the server and sends CSS to the browser.

### Can I use Sass?
If you use the create-react-app in your project, you can easily install and use Sass in your React projects.

Install Sass by running this command in your terminal:

**`$npm install node-sass`**

Now you are ready to include Sass files in your project!

### Create a Sass file
Create a Sass file the same way as you create CSS files, but Sass files have the file extension **.scss**

In Sass files you can use variables and other Sass functions:

### mysass.scss:
```
$myColor: red;

h1 {
  color: $myColor;
}
```Import the Sass file the same way as you imported a CSS file:
### index.js:
```
import React from 'react';
import ReactDOM from 'react-dom';
import './mysass.scss';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );
   
}
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));
```
### Output:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q41d35vxr7irrlstry3d.png)
here we will get this output as the text "hello Style!" is in Red color.
HTML tags | td
Tags: html, tags, td
Published: 2021-09-30 05:57:38

It is used to **define a cell that contains data**.

In the `headers` attribute you can put a list of IDs of the `<th>` that serve as the header to the cell. Example:

```
<table>
  <tr>
    <th id="name">Name</th>
    <th id="email">Email</th>
    <th id="phone">Phone</th>
    <th id="addr">Address</th>
  </tr>
  <tr>
    <td headers="name">John Doe</td>
    <td headers="email">someone@example.com</td>
    <td headers="phone">+45342323</td>
    <td headers="addr">Rosevn 56,4300 Sandnes,Norway</td>
  </tr>
</table>
```

The `headers` attribute has no visual translation in browsers but can be used by screen readers.

There are two other attributes that are similar to each other and related to table layout: `colspan` and `rowspan`.

* `colspan` contains a positive integer between `0` and `1000`, with `1` being its default value, **which indicates how many columns the cell extends over**. If set to `0`, the cell is extended to the last element of the `<colgroup>`.
* `rowspan` contains a positive integer between `0` and `65534`, with `1` being its default value, **which indicates how many rows a cell extends over**. If set to `0`, the cell extends to the last element of `<thead>`, `<tbody>`, or `<tfoot>`.

The text of a `<td>` appears by default aligned to the left, **to change this and other presentation properties you should not use attributes in the tag**, but CSS properties such as `background-color`, `font-weight`, `height`, `text-align`, `vertical-align` or `width`.

Its parent must be a `<tr>` element.

Has an **implicit ARIA role** `cell`.

- Type: *table-cell*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) | [Support](https://caniuse.com/mdn-html_elements_td)
AWS Load balancer
Tags: devops, aws, linux, networking
Published: 2021-09-30 05:55:39

AWS EC2 load balancer is one of the most popular service offer by Amazon Web Service. In this post we shall be exploring AWS load balancer, types of AWS load balancers, when to use them and how to setup load balancers on AWS Management console.

load Balancers are servers that forward internet traffic to multiple servers (EC2 instances) downstream.
 ![load balancer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dpz6yhdak8dkdlb9df0.PNG)

###Why use a load balancer?
1.Spread load across multiple downstream instances
2.Expose a single point of access(DNS) to your application
3.Seamlessly handle failures of downstream instances
4.Do regular health checks to your instances
5.Provide SSL termination (HTTPs) for your website
6.High availability across zones
7.Separate public traffic from private traffic(inbound and outbound)

###Why use an EC2 Load Balancer 

An ELB(EC2 Load Balancer ) is a managed load balancers by AWS. Meaning AWS guarantees that it will be working. AWS takes care of upgrades ,maintenance, high availability across multiple zones. It costs less to setup your own load balancers but it would be a lot of effort on your end.

##Health checks

They are support important for load balancers. They enable the load balancer to know if instances it forward traffic to are available to reply to requests. The health check is done on a port and a route. If  the response is not 200 (OK) ,then the instance is unhealthy.
![eee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0urhr0pikzpaxyyduatf.PNG)

###Type of load balances in AWS

1.Classic load Balances(V1 -old generation)-2009
supports HTTP,HTTPS AND TCP
2.Application load Balancer (V2 - new generation) --2016 support HTTP, HTTPS , Web Socket
3.Network Load Balancer(V2 -new generation) -2017
support TCP,TLS(secure TCP) and UDP
Please try to remember this they common questions ask in the AWS Exam.
4.Gateway load balancer(Out of scope)
It recommended to use newer version of load balancers has they have more feature

Load Balancer can scale but not instantaneously if you have a massive scale to do you need to contact AWS for a "Warm-up".

For Troubleshooting
1.4xx errors are client induces errors
2.5xx errors are application induced errors
3.Load Balancer Errors 503 means at a capacity or no registered target.

In the next post we shall be setting up ELb .Thanks for reading.
React LifeCycle
Tags: react, beginners
Published: 2021-09-30 05:15:02

## Lifecycle of Components
Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.

The three phases are: **Mounting**, **Updating**, and **Unmounting**.

### Mounting
Mounting means putting elements into the DOM.

React has four built-in methods that gets called, in this order, when mounting a component:

* constructor()
* getDerivedStateFromProps()
* render()
* componentDidMount()

The render() method is required and will always be called, the others are optional and will be called if you define them.

### Updating
The next phase in the lifecycle is when a component is updated.

A component is updated whenever there is a change in the component's state or props.

React has five built-in methods that gets called, in this order, when a component is updated:

* getDerivedStateFromProps()
* shouldComponentUpdate()
* render()
* getSnapshotBeforeUpdate()
* componentDidUpdate()
The render() method is required and will always be called, the others are optional and will be called if you define them.

### Unmounting
The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.

React has only one built-in method that gets called when a component is unmounted:

* componentWillUnmount()
Vs Code Stater Kit
Tags: vscode, webdev, codenewbie
Published: 2021-09-30 05:11:28

__Vs Code is one the tools while in software development you'll use a lot, and it has a big library of extensions that can make it easy for you to do some common things while coding__

These are the set of extensions i install when starting with a fresh install of VS Code.

## 🌟Extensions 
* [ Live Server ]( https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer )
* [ Bracket Pair Colorizer ](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
* [ Thunder Client ](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)
* [ Prettier ](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
* [ Live share ](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
* [ Better Comments ](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
* [ Sublime Text Keymap ](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings)
* [ Atom Keymap ](https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings)
* [ Color Highlight ](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

## 🌟Themes 
* [ One Dark pro ](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
* [ Github Theme ](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)
* [ Vscode material icon Theme ](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
* [ Night owl ](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl)
* [ Material Theme ](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme)
* [ Cobalt 2 ](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)
* [ Synthwave ](https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode)


If found the starter kit useful than share it with your developer friends and also follow me on [Instagram](https://www.instagram.com/gaurav_vaala/) and [Twitter](https://twitter.com/gaurav_vaala)
AutoDL celebrates Hacktoberfest 2021
Tags: hacktoberfest, opensource, codenewbie, github
Published: 2021-09-30 05:02:14

At last it's "that time" of the year again! The month of October is right around the corner, and surely you might've already guessed it... :eyes:

The much awaited **[Hacktoberfest](https://hacktoberfest.digitalocean.com)** is back for the year 2021!

What's more, **[AutoDL](https://twitter.com/auto_dl)** is geared up for participants to contribute as well!

{% twitter 1441415078494945281 %}

Now if you're unaware, Hacktoberfest is _[DigitalOcean](https://www.digitalocean.com/blog/hacktoberfest-is-back-2021)'s_ month-long celebration of Open-Source software and communities.

Code Newbies and Open-Source Connoisseurs alike are all welcome to take up Issues on AutoDL's [GitHub](https://github.com/Auto-DL/Auto-DL) repositories and submit a _valid_ Pull Request (abiding by the [quality standards](https://hacktoberfest.digitalocean.com/resources/qualitystandards)) pertaining to close open issues on GitHub.

P.s. Look for issues with the `hacktoberfest` label on it. :wink:

Make **4 valid PRs** throughout the month to stand a chance to be rewarded with a commemorative t-shirt pack as official swag from DigitalOcean! Additionally, AutoDL would be distributing swags for top contributors in its repositories too! 🤩

Do make sure to read the [Contributing](https://github.com/Auto-DL/Auto-DL/blob/v1-beta/CONTRIBUTING.md) guidelines and the [Code of Conduct](https://github.com/Auto-DL/Auto-DL/blob/v1-beta/CODE_OF_CONDUCT.md) to gain an insight on how to contribute!

If you feel stuck, need any help, or you need to tackle a different issue not addressed on GitHub entirely, feel free to discuss on AutoDL's **[Slack](https://join.slack.com/t/autodl/shared_invite/zt-qagxiwub-ywRM_oBvvF~F7YNtlBqy_Q)** Workspace. :sparkles:

P.s. There's a separate channel for hacktoberfest as well :blush:

Now, as tantalizing (or lucrative) the perks may sound, remember that as mentioned on the official website of Hacktoberfest -

> Quantity is fun, quality is key

Quality pull requests showcase you as a responsible member of the Open-Source community! Do utilize this exciting opportunity to contribute, be it your first pull request or your bazillianth one! ✌️
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 66
Tags: php, javascript, webdev, tutorial
Published: 2021-09-30 04:54:49

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will be Updating the video progress as the video play
{% youtube Nx3Q7Ys2YTA %}



If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
JS Coding Question #10: Is Balanced Parenthesis [Very Common Question]
Tags: challenge, javascript, tutorial, career
Published: 2021-09-30 04:40:45

#### Interview Question #10:
Write a function or program that checks if a string is a balanced parenthesis.🤔 

> If you need practice, try to solve this on your own without looking at the solution below.

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

#### Codepen: 
If you want to play around and experiment with the code: https://codepen.io/angelo_jin/pen/OJgwaed

Solution below uses a stack which is a great algorithm to use in this kind of problem. With a small tweak on the code below, you can solve problem that checks for balanced curly braces, brackets and parenthesis as well.

```js
function isBalanced(str) {
  const stack = []
  
  for (let char of str) {
    if ( char === '(' ) {
      stack.push(char)
    } else {
      if ( stack.pop() !== '(' ) {
        return false
      }
    }
  }
  
  if (stack.length !== 0) return false 
  
  return true
}
```


Small Cleanup/Refactor
```js 
function isBalanced(str) {
  const stack = []
  
  for (let char of str) {
    if ( char === '(' ) {
      stack.push(char)
    } else if ( stack.pop() !== '(' ) {
      return false
    }
  }
  
  return stack.length !== 0 ? false : true
}
```

Happy coding and good luck if you are interviewing!

If you want to support me - [Buy Me A Coffee](https://www.buymeacoffee.com/letscode77)


Video below if you prefer instead of bunch of text/code 👍😊
{% youtube 1TjtX4HR44w %}
How to Perform Selection in Blazor Tree Grid
Tags: blazor, dotnet, webdev, csharp
Published: 2021-09-30 03:49:42

Learn how to select a row or cell with different types and modes in a [tree grid](https://www.syncfusion.com/blazor-components/blazor-tree-grid). You can also learn how to perform checkbox selection, toggle selection, and a few of its APIs. 

[Blazor TreeGrid - High-performance Component](https://www.syncfusion.com/blazor-components/blazor-tree-grid)

- Load large amounts of data by dynamically loading child data on demand.
- Include flexible UI interactions like expanding and collapsing parent records, dialog editing, and more.
- Attractive UI appearance with built-in themes such as fabric, bootstrap, etc.

Download an example from GitHub: https://bit.ly/3kNRcxX 

Refer to the following documentation to check all the select options available in the TreeGrid: https://bit.ly/2XVvNtA 

Check this online example of selection in the TreeGrid: https://bit.ly/3AP0kIh 


{% youtube 0RkHAO5pS5s %}
Traffic Controlling
Published: 2021-09-30 03:45:26

Network infrastructure devices are the components of a network that transport communications needed for data, applications, services, and multi-media. These devices include routers, firewalls, switches, servers, load-balancers, intrusion detection systems, domain name systems, honey pots and storage area networks.

These devices are ideal targets for malicious cyber actors because most or all organizational and customer traffic must pass through them. An attacker with presence on an organization’s gateway router can monitor, modify, and deny traffic to and from the organization.

Techniques to Monitor Traffic Over a network:
1. Choose the right data source(s)
Whatever your motive for monitoring network traffic, you have two main data sources to choose from:

Flow data, which can be acquired from layer 3 devices like routers
Packet data, which can be sourced from SPAN, mirror ports, or via TAPs


2. Pick the correct points on the network to monitor
A common mistake many people make when deploying a NTA tool is that they include too many data sources at the start. There is no need to monitor every network point. Instead, pick points where data converges. Examples of this would be internet gateways, Ethernet ports on WAN routers, or VLANs associated with critical servers.

3. Sometimes real-time data is not enough
The ability to monitor network traffic in real time is sufficient to achieve many objectives of network traffic monitoring, but sometimes, real-time data is not enough. Historical traffic metadata is ideal for network forensics and is just as important if you want to analyze past events, identify trends or compare current network activity with the previous week.

4. Associate the data with usernames
Traditional network traffic monitoring tools usually report on activity using IP or MAC addresses. While this is useful information, it can be problematic in DHCP environments if you are trying to find a problematic device. One piece of information that can bring together network activity and devices is usernames. Username association will let you know who is doing what on the network.

5. Check the flows and packet payloads for suspicious content
Many networks have intrusion detection systems at the edge, but very few have this type of technology monitoring internal traffic. All it takes is one rogue mobile or IoT device to compromise a network. Another issue I often see are firewalls allowing suspicious traffic through where a rule was misconfigured.
記憶體、儲存空間和處理器？
Tags: 名詞解釋
Published: 2021-09-30 03:43:02

在手機的規格中, 通常會出現這樣的描述：

```
6GB RAM / 128GB ROM
```
若是筆電的規格中, 現在常見的類似這樣：

```
內建記憶體: 8GB DDR4 on board
硬碟:"512GB M.2 NVMe™ PCIe® 3.0 SSD
```
不論是手機或是筆電, 比較小的那個數值, 例如前面例子中的 6GB 與 8GB, 稱為**記憶體**, 比較大的那個, 例如前面例子中的 128GB 與 512GB, 可以通稱**儲存空間**, 要瞭解這兩個數值代表的意義, 我們可以用廚房來比擬手機。

**儲存空間就像是冰箱**, 所有需要的食材都可以存放在冰箱中, 冰箱越大, 可以存放的食材就越多。因此, 儲存空間越大, 你可以下載安裝的 App 就越多、可以存放的照片、影片等資料就越多。

**記憶體就像是你的流理台**, 真正需要做菜的時候, 得從冰箱裡面把食材拿出來處理, 流理台越大, 做菜時處理食材越方便, 同時間可以擺放多種食材, 而不需要先處理完一部份食材, 或是將其他食材移回冰箱空出位子輪流處理。

實際使用手機時就像是料理的過程, 必須從儲存空間 (冰箱) 中把 App 或是照片等資料 (食材) 移到記憶體 (流理台) 中才能開始運作 (料理), 記憶體越大, 切換 App 或是觀看不同影片時, 就比較不會遇到記憶體不夠, 需要先將其他 App 關閉讓出空間的情況, 當然就會比較順, 就很像是你不用一直來回開關冰箱搬動食材, 料理過程自然就會快一些。

因此, 簡單來說, 儲存空間越大, 你可以存放的東西越多, 但是用起來會不會卡頓, 記憶體大小就會比較重要。不過記憶體僅是處理速度的因素之一。就像是料理一樣, 你有夠大的冰箱、寬廣的流理台, 但是如果廚師刀工慢、廚藝不精熟, 料理起來速度一定也快不起來, 這裡的**廚師**就是你在規格上看到的**處理器**, 例如手機可能是：

```
◎ Qualcomm Snapdragon 730G, 2.2GHz + 1.8GHz 八核心處理器 
```

或是筆電是：

```
CPU: Intel® Core™ i5-1135G7 Processor 2.4 GHz (8M Cache, up to 4.2 GHz, 4 cores) 
```

其中 2.2GHz 或是 2.4GHz 指的是處理器的速度, 理論上當然越快越好, 而八核心或是 4 cores 指的是廚房裡可以有幾位廚師同時料理, 理論上當然只要料理台夠大, 越多位廚師就可以同時料理更多樣菜、或是越快把菜做好。

不過以上都是純看理論值, 就像是冰箱, 即使同樣大的冰箱, 還是有耗不耗電、冷卻速度快不快等差異, 不是單純看容量大小就可以區分好壞。這些細節我們就不多談, 只是讓大家能夠有基本的認識, 希望這樣可以讓你瞭解規格上的這些數字到底代表什麼意思？也能知道如何選擇手機或是筆電囉。
LaTeX: Boxed Math and Multicolumns
Tags: codenewbie, latex
Published: 2021-09-30 03:07:55

Hello, how are you?

In this post I tell you how to put mathematical expressions in boxes and multicolumns in a document. Let's start!!!

## Mathematical Expressions in Boxes

To finish with the math section in LaTeX i tell you how to put mathematical expressions in boxes. 

You need to import the `amsmath` package and then use the `\boxed{}` command 

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzd1im2vr4bcvb3bww3r.png)

Produces

![Screenshot from 2021-09-29 10-34-56](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvjs5fhr9auguzyh5tyj.png)

## Multicolumns

What if we want to put something in a multicolumn mode? 

Well, we just need to import the `multicol` package and use the environment multicols 

```LaTeX
\begin{multicols}{n}
    content
\end{multicols}
```

Where `n` is the number of columns in the document

We have two options to work with multicolumns: just some text in multicolumns or an entire page

### Some text in multicolumns

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78zste2ve3925a3vtv8v.png)

Produces

![Screenshot from 2021-09-29 10-51-54](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04quzf8z2wt8okr85g5a.png)

### An entire page 

If we want to create a multicolumn in a page, this will be created from the declaration of the command to the end of the page, this is, if  you declare the command in the middle of the page, then, the multicolumn will be from the middle of the page to the end

- We just need to add an `*` in the command 

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vthgql1xt0x4g4smouqn.png)

Produces

![Screenshot from 2021-09-29 10-56-59](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hj0k6b2ojhxdqbe3g3a4.png)


Did you notice? there is no text *after* the double column because the *next* text is on the following page, also all the text is in *one column* because it will be a double column page

Thanks, this is all for today!!

Do not forget to follow me on Twitter `@latexteada`

Greetings!!!
How to make the most out of HacktoberFest 2021
Tags: hacktoberfest, beginners, opensource, tutorial
Published: 2021-09-30 02:48:34

Hey there folks, HacktoberFest 2021 is right around the corner. It would be beneficial for you to make the most out of HacktoberFest and get started into Open Source Contributions. Lets start with some basics.

##What is HacktoberFest and Why should I care?

Well, in simple language, HacktoberFest is a event hosted by DigitalOcean every year throughout the month of October in order to encourgae more and more folks regardless of wheather they have development skills or not to start contributing to Open Source Projects. Open Source is a great way to build up your online presence and get known by folks around the world. This will open up plently of opportunites for you based on your skills. 

For example, lets say you are not great at development but you are great at creating graphics. You can find a project that needs some sort of Graphics Designs, and sumbmit your designs to that project. This way folks will come to know about your designing skills and could very well reach out to you.

##How do I get started with HacktoberFest?

First thing you will need to do is learn [Git and Github](https://www.youtube.com/watch?v=apGV9Kg7ics&t=1584s). You should learn how to make commits, push your commits and make a Pull Request(PR). There are more things but these are the basics you will need for Hacktober.

Next, head over to the official website of [HacktoberFest 2021](https://hacktoberfest.digitalocean.com/) and register yourself for the event. Note that you will require a GitHub or a GitLab account in order to sign up. Github is the most famous open source website, but there are others as well.

Now, starting on October 1, till the end of the month, you will require to make good, meaningfull PRs on repositories which have the tag `HacktoberFest 2021`. Pull requests which are Spam will not be counted towards the progress on this event. These PR's will count towards your progress towards HacktoberFest. Once 5 PR's that you make get approved and merged with the repositores, you will be eligible to get HacktoberFest swag which includes a HacktoberFest T-shirt. There is a possibility of other swags as well. 

Please make a note of the following not just for hacktoberfest but for any, and every event: **Don't let the Swag be your main motivation for joining the event. Let the motivation be of learning something new, networking and innovation.**

##Benefits of HacktoberFest 

HacktoberFest is a great way to show that you are involved with communities and are keen on contributing to various projects. It will help you to get into Open Source which in itself is a great place to devleop your skills, get guidance, network and a lot more. 


I look forward to seeing all you folks participate in HacktoberFest this year and start getting into Open Source.
Be well and continue learning.