teleren/devto huggingface dataset:
React Tutorial: Components, Hooks, and Performance
Tags: react
Published: 2020-01-05 10:52:27

<B>WHAT IS REACT?

AND WHAT IS COMPONENTS, HOOKS, AND PERFORMANCE?</B>

React is a JavaScript library for building for user interfaces built by Facebook. It’s also called as the view layer of web applications.

Components are the main part of the React as for human is heart, the heart is the main part to live likewise components in React. A component is a self-contained module that renders some output as well as we can write interface elements like a button or an input field as a React component. It might include one or more components in its output.

Kindly speaking, for writing the React apps we have to write React components that correspond the various interfaces and elements and after that organize these components inside higher-level components which define the structure of your application in React.

For instance, let take an example of the online form like as you fill much time for surveys or jobs and other purposes. A form consists of more than one element, like information/input fields, labels, as well as button and each element inside the form, is mention as a React component. We’d then write a higher-level component, the form component itself. The form component in React, would specify the structure of the form and include each of these elements inside it.


<H3>react</H3>

Meanwhile, each component in a React app has strict data management principles as well as it is a complex, interactive user interface often involve with complex data and application state.


<h3>TYPES OF REACT COMPONENTS</h3>

✔ Controlled and uncontrolled components:

In most of the applications, there is a need for input as well as some form of interaction with users, secondly, which allow them to type anything, upload the file, select fields, and so on. React deals with user interaction in two ways—controlled and uncontrolled components.

The controlled components by React which providing the value to an element that interacts with the user, whereas uncontrolled components don’t get the value property.

The function of Controlled Components that the developer has to run in the application is written below:

<a href="https://codersera.com/blog/react-tutorial-components-hooks-and-performance/">React Components, Hooks and Performance</a>
My TensorFlow Journey
Tags: machinelearning, udacity, ai
Published: 2020-01-05 09:36:02

Ever since my undergrad days, where I first got to know about Artificial Intelligence, I became so fond of the various disruptions that come with it and then a decision was made. I decided to specialise in AI.

Making such decisions like mine comes with a lot of commitment to self-development since undergrad lecturers only briefed about it. I decided to get books on Machine Learning and the approach was with the core Python and I was able to understand few concepts from it after which I left it to pursue few gigs since I was a grad already.

Fast forward to 2019, I was introduced to Tensorflow Lagos meetup, I signed up to attend, but so sad I couldn’t, make it there, but after the event the organizer did well to share the resources used at the meet up, and lo and behold they shared the link to the Udacity Course on Intro to TensorFlow for Deep Learning by TensorFlow

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/08cbpgcyitp9dc8vp7sd.png)


I have been on the course for some weeks now, and it has been very insightful. Thanks to the authors of the course

Paige Bailey
Magnus Hyttsten
Juan Delgado

I will be sharing in a series, which will be released every week what I have learnt, what I am learning and what I am expecting. You are welcome to join me on this wonderful experience of becoming a TensorFlow expert before the new year ends.




Each day holds a surprise. But only if we expect it can we see, hear, or feel it when it comes to us. Let’s not be afraid to receive each day’s surprise, whether it comes to us as sorrow or as joy It will open a new place in our hearts, a place where we can welcome new friends and celebrate more fully our shared humanity.
The Collab Lab Week 3 - Saturday
Tags: collablab
Published: 2020-01-05 09:25:16

Not much to say about today in collab lab land. Yesterday when I met with Mike I saw the code that would go into today's pull request. It was working and it was very smooth to approve it today as a team member. So Saturday was basically a day off. I'm really glad Mike and I got a chance to Zoom yesterday.  We got all the kinks worked out and today was easy peasy.
TIL: The path to CKA Week 5.
Tags: cka, kubernetes, preparecka
Published: 2020-01-05 09:13:28

After finished the [Kubernetes installation the hard way](https://github.com/kelseyhightower/kubernetes-the-hard-way),
I moved on the the **CKA with Practice Tests** that I bought in udemy.

This course contains lots of online hand-on labs, which improve the kubernetes troubleshooting skill.

---
## ETCD

etcd is a key-value storage for all of the data about the whole information of a k8s cluster.

And you can deploy etcd from by downloading a released binary and execute it.
Or, if you install kubernetes cluster by `kubeadm`, your etcd will run as container. For example, you can get the keys of your cluster by
`kubectl exec etcd-master -n kube-system etcdctl get / --perfix -keys-only`

---
## kube-apiserver

In kubernetes, there are some operation/component related with kube-apiserver. 
1. Authenticate User
2. Validate Request
3. Retrieve data
4. Interactive with ETCD
5. Scheduler
6. Kubelet

You can see your kebe-apiserver configuration by checking `cat /etc/systemd/system/kube-apiserver.service` or 
`cat /etc/kubernetes/manifests/kube-apiserver` if your cluster is installed by `kubeadm`
Or you can search a running api-server process by 
`ps -aux | grep kube-apiserver`, and you can see the all configurations.

---
## kube-controller-manager

When install kube-controller-manager there are some different controller will be installed. Eg, development controller, replication controller, etc.

And if your cluster is install by `kubeadm`, like other components, the kube-controller-manager will run as a pod in kube-system namespace on master node.
For other non-kubeadm setups, the configurations can be checked in `/etc/systemd/system/kube-controller-manager.service`



---
## kube-scheduler 

In k8s, kube-scheduler will decides and only decides which pod goes to which worker node.
By considering the pod's resources requirements, taints, node selectors and affinity, etc.

Again, for a cluster set by `kubeadm` the kube-scheduler configuration will be in `/etc/kubernetes/manifests/kube-scheduler.yaml`.
And it run as a pod in the kube-system namespace.


---
## kubelet.

kubelet is where the `dirty work` happends in kubernetes cluster.
It receives the command from the scheduler and to interact with the container run time to start or to delete a container.
If you use kubeadm to install k8s cluster, **it WILL NOT install kubelet**.
**You must download and install it by your own.**

You can search your kubelet process by 
`ps aux | grep kubelet`


---
## kube-proxy.

kube-proxy will setup the iptables for the services in kubernetes.
Since the service ip and the pod ip are in different subnet.
So the kube-proxy's job is to monitor the services and the pod ips, and maintains the proper rules to forward the traffic.

### Notes.

1. Create pod by `kubectl run` commnad.
`kubectl run nginx --image=nginx --restart=Never`

2. Create deployment by `kubectl run`
`kubectl run nginx --image=nginx --restart=Always`

3. Create job by `kubectl run`
`kubectl run nginx --image=nginx --restart=OnFailure`
Create a simple API using Django Rest Framework in Python
Tags: django, djangorestframework, rest, api
Published: 2020-01-05 08:45:15

#Intro
**Django Rest Framework** is a powerful library that sits on top of existing Django projects to add robust web APIs.

**REST** is an "architectural style' that basically exploits the existing technology and protocols of the web.

**API** a set of rules and mechanisms by which one application or component interacts with the others.

In this tutorial we’ll create a basic Django **ToDo app** and then convert it into a web API using serializers, viewsets, and routers.

Complete source code is available on [Github](https://github.com/J3ffu633zy/ToDo)  .

## 1.Initial setup
Will commence by executing the following in the command line;

        $ cd ~/Destkop
        $ mkdir todo && cd todo
        $ pipenv install django==2.2.5
        $ pipenv shell
        (todo) $ django-admin startproject todo_project .
        (todo) $ python manage.py startapp todos

We've used pipenv to install django and started both a django project (todo_project) and an app(todos).
Now we need to update our app in the settings file.

           # todo_project/settings.py
           INSTALLED_APPS = [
                  ...
           'todos.apps.TodosConfig',
            ]

Perform our first migration to set up the initial database at this point.

           (todo) $ python manage.py migrate

###2.Models
We create a basic model for our Todo app database.

           # todos/models.py
           from django.db import models

          class Todo(models.Model):
              title = models.CharField(max_length=200)
              description = models.TextField()

             def __str__(self):
                return self.title

Makemigrations for the project database to the Server.
         
          (todo) $ python manage.py makemigrations todos
          (todo) $ python manage.py migrate

Register the app on the admin file to showcase the models on the server dashboard.

         # todos/admin.py
         from django.contrib import admin

         from .models import Todo

         admin.site.register(Todo)

In a normal Django app at this point we would need to add urls, views, and templates to display our content. But since our end goal is an API that will transmit the data over the internet, we don’t actually need anything beyond our models.py file!

Lets create a superuser to act as an ADMIN and then power off the django project to the server.

         (todo) $ python manage.py createsuperuser
         (todo) $ python manage.py runserver
Navigate to [http://127.0.0.1:8000/admin](http://127.0.0.1:8000/admin) and log in with your new superuser account.

![Django Admin Dashboard](https://i.imgur.com/83X7wuh.png)

Click on Todos and add your entries.I added the following;

          1st todo = Learn DRF
          2nd item = Learn Python too

![Entries for Todo app](https://i.imgur.com/UWNKTd4.png)

Now it’s time to use Django Rest Framework.

**Part 2**.....
Add new VUE reactive property to an object
Tags: vue, reactive, properties
Published: 2020-01-05 08:18:13

Hey guys! 
Just a quick hint on VUE reactive properties.

If you want a new property of an object to be reactive, do it this way.

**Bad**:

```javascript
const vueObj = {}
vueObj.newProperty = {}
```

**Good**:

```javascript
const vueObj = {}
Vue.set(vueObj, 'newProperty', {})`
```

For example you may have a button, which adds a new empty object, like this:

```html
<template>
  <my-field-editor v-model="field" v-id="showEdit" />
</template>
```

**Bad**:

```javascript
 methods: {
    addField () {
      this.field = {}
      this.field.id = uuidv4()
      this.field.required = false
      this.field.name = ''

      this.showEdit = true

    },
```

**Good**:

```javascript
 methods: {
    addField () {
      this.field = {}
      Vue.set(field, 'id', uuidv4())
      Vue.set(field, 'required', false)
      Vue.set(field, 'name',  '')

      this.showEdit = true
    },
```
My only 2 plans for 2020 😖
Tags: 2020, career, yearinreview
Published: 2020-01-05 07:09:07

## Everyone does it
Whenever a year begins, one of the things you will hear here and there is a plan for the year or a todo list. This has been what I've been hearing from most of my friends but funny thing is that I never had one. All I knew was that it's a new year and life still goes on but some time ago I realized that this thing kind of help. Because I've been passing through the years just like that.
## When I decided to do it
Hence, I decided to start using a plan or a todo list and the year was 2019 😅😅.
In December 2018 I has sat down and listed almost everything I wanted to do in 2019. It was an interesting list that I was very passionate about but I ended doing just one throughout the whole year. I touched some pieces but never completed them. So this year I came with a new strategy to make sure I'm able to complete the list.
## What I realized
At the end of 2019, I realized something about me that might apply to you too.
1. My list for 2019 was too long.
2. It wasn't a year based todo list. It was what I wanted in life.
3. I didn't weight the time for completion of each task before listing them.
4. I always thought there is enough time in a year and even when In September I still see more time.

And these are the reasons I'm going for just 2 plans this year. These plans are to help me in my subsequent plans.

## My 2 plans
These plans are very simple than you might have been guessing.
1. I want to learn Machine learning(and all the math involved) and improve my Algorithms this year.
2. I need a source of income.

The second point is very important to me because I'll be 20 this year and I still rely on my parents. Over here it's quite normal and happens all the time because of the high unemployment rate but I'm not okay with that. Hence this year, I''m going to try a variety of stuff from Youtube to small Saas software. I love open source tho

##### Please help with your ideas in the comment box
Talk About Code
Tags: coding, coderstalk
Published: 2020-01-05 06:30:34

---
title: Talk About Code
published: true
description: I'ts been a while I haven't talk about it
tags: 
 - coding
 - coderstalk
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3h3ag7ishjsefn1310d1.jpg
---

Long time ago, I was writing about code and my journey in helping other coders in my blog http://coderstalk.blogspot.com

It's been a while that I haven't doing that anymore since I got super busy with my screen printing hobby and business. 

Last year, I found this `dev.to` platform. And this is my first post. 

The fact that in all these years of silence, I'm not totally stop writing about coding and my experiences. It's just I'm not really motivated to write for public readers. I just wrote a lot of notes for myself in `markdown` and keep it all in my `note` folder for myself. 

## I'm back

While writing this first **dev.to** post, I feel like home. Because I'm still writing in `Markdown` and I can paste my code as usual:

```bash
#!/bin/bash

echo "Hello world, Coder's Talk is back!!"
```

This post is basically my exploration in `dev.to` platform. 

The `Markdown` feels the same like `github` but mermaid is not working.

<pre>```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
  D-->A;
```</pre>

However, I love the way **syntax highlighting** like this `diff` is working
```diff
+ hello reader
- heyo who ever you are
```

and `php`...

```php
<?php
$title = "apogee @ dev.to";
// who ever you are reading this...
echo "Welcome to ".$title;
?>
```

and `c`...
```c
void function read_me() {
   printf("I'm glad you still reading this!");
}
```

and `python`...
```python
# this is python greetings
print("Greetings to my reader!")
```

Anyway, I'm okay with it and I'm feeling grateful to whatever it is.

Feel free to have conversation with me by dropping your comment below. So I know who enjoy reading this.

Thanks for reading!
Easy Timeline Animation with Plaintext
Tags: animation, javascript
Published: 2020-01-05 06:16:25

---
title: Easy Timeline Animation with Plaintext
published: true
description: 
tags: animation, JavaScript
---

I love Adobe Flash's timeline UI.
It's super easy to create complex timeline animations.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/m24yxhzwug0fw2kfd819.png)

But actually Flash is dead... (still Adobe Animate is living)

Okay, I have an idea. **Expressing the timeline UI with plaintext**.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lfb2umunl6vp8k6kttq3.png)

Then I made an animation library.

# timelineDown

Please watch how it works.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/uwmm4nuuugkbz19uu22g.gif)

Yey. It's useful for tweaking animation timings, isn't it?

It's also work with data attibutes. No JS config required.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cnw62vp156wfcrvys354.gif)

but I think writing JS is the best way to manage multiple timelines.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ghlpntrin63fg7y0ukmh.gif)

# Source

It's only 27 lines of code, because it is actually an wrapper of [gsap.timeline](https://greensock.com/docs/v3/GSAP/Timeline).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dbu9axy0shfie2x1e8jw.png)

This library is still PoC, I'm planning to make breaking changes for support ScrollMagic.

# Repository

https://github.com/hashrock/timelineDown

I also published this to npm. Enjoy!
How can I get rendered innerHTML that includes Shadow DOM?
Tags: help, html, javascript
Published: 2020-01-05 05:48:51

---
title: How can I get rendered innerHTML that includes Shadow DOM?
published: true
description: 
tags: #help #html #js
---

I'm using web components with shadow DOM on a project and I would like to copy the innerHTML of the page as rendered.

I think I need to write a function loops over each DOM node and gets either the shadow DOM children if available or else the light DOM children.

```js
node.shadowRoot ? node.shadowRoot.children : node.children
```

I've been having trouble getting it right, and I'm surprised I can't find anything on Google.
HOW TO USE GIT FOR WORDPRESS DEVELOPMENT???
Published: 2020-01-05 05:44:02

Let's first understand GIT:-

GIT : A BRIEF INTRODUCTION 

Git is a version control system.This version control is used to keep track of the revisions or changes you have 

HOW TO USE GIT:-

1.The first step is obvious- you need to install Git to your computer. You can choose the Git version based on the operating system you are using. The download link is available on the homepage of the Git site

2. Next on, you need to introduce yourself to the Git version control system. This is so that whenever you make a change to the project, your name is added, and everyone knows who has made the necessary change
Git config –-global name.name “Your Name”
Replace “your name” with your actual name in the code to save your project with your name.

3.Once you have signed up using your email address and also configured Git with your name, you need to create the local repository, which will allow you to save all the files that you have created as part of the project. Whenever you need to check on a particular file, document or revision you have made, you simply need to visit the repository. You will need to choose the version control system before you make the repository. In this case, it is git. You can always use the command line tool to create the repository

4.Once you have created the repository, you can get started with the project. Upload the current status of the project. There are two statuses- staged and unstaged. When you have committed the project, it is a staged version of the project.
deno.town a web REPL for Deno
Tags: deno, repl
Published: 2020-01-05 05:00:50

---
title: deno.town a web REPL for Deno
published: true
description: 
tags: deno, repl 
---

Deno is a new experimental JavaScript runtime. Get to know API with a web REPL playground with linting and code completion at [Deno.town](https://deno.town).
Unity - Criar uma barra de vida
Tags: unity3d, tutorial, csharp, game
Published: 2020-01-05 03:59:48

## Olá!

Estou fazendo este artigo a partir do breve vídeo que acabei de publicar no [meu canal no YouTube](https://www.youtube.com/watch?v=vdRDT7VymMk)

> Primeiro vídeo, primeiro artigo -> por isso talvez algumas coisas não estejam tão boas, me perdoe por isso; aceito suas sugestões.

### Introdução

O que vamos fazer: Vamos fazer uma barra de vida horizontal simples.
Utilizei a versão 2019.3.0f3 da Unity.
Repositório: [acesse aqui](https://github.com/HenriqueDerosa/tutorial-lifebar)

### Mão na massa

1. Precisamos de uma imagem branca, convertida para Sprite, na configuração de importação.

2. Criar um Canvas com a Image de background e de preenchimento da barra de vida

![Como deve ficar a hierarquia](https://thepracticaldev.s3.amazonaws.com/i/a482161wrkf5qi5zchet.png)

3. Ao criar o preenchimento, altere o `ImageType` para *Filled*, e o `Fill Method` para *Horizontal*

![Configurar preenchimento](https://thepracticaldev.s3.amazonaws.com/i/9fflbhbaut6lgv7hzval.png)

> Esse valor `FillAmount` controla o quanto de preenchimento nós temos, sendo ele entre `0` e `1`
Obs.: você só consegue alterar o `ImageType` se adicionar um Sprite no componente.

Pronto!
Agora crie o Script `HealthController.cs`

---

### Code

Este é o código que utilizamos no vídeo, e que está disponível no repositório:

```cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class HealthController : MonoBehaviour
{
    public float health = 2;
    public float Health {
        get {
            return health;
        }
        set {
            health = Mathf.Clamp(value, 0, healthMax);
        }
    }
    public float healthMax = 14;

    public Image healthBar;

    private void Update() {
        if (Input.GetKey(KeyCode.UpArrow)) {
            Health += 0.5f;
        }
        if (Input.GetKey(KeyCode.DownArrow)) {
            Health -= 0.5f;
        }
        UpdateHealthBar();
    }

    private void UpdateHealthBar() {
        healthBar.fillAmount = Health / healthMax;
    }
}
```

Você pode remover as linhas de `Input`. Elas foram criadas apenas para teste, já que não temos eventos de dano ou ganho de vida.

Espero que tenha ajudado de alguma forma. Qualquer dúvida ou sugestão, eu gostaria de saber. 

---

No meu canal, pretendo adicionar mais vídeos, não tão iniciantes, mas que espero ajudar muita gente; de forma direta e sem rodeios. 😄

Obrigado!
HTTP vs Websocket
Published: 2020-01-05 02:43:37

In this blog I will explore the differences between HTTP and Websockets, as well as explain when it is best to use Websocket over HTTP. I will do my best to keep this **short and sweet** ;)

HTTP is a computer protocol through which the client sends a request to and receives a response from the server. Each request results in a high cost and performance loss. Thanks to the ability to send two-way messages over TCP connection with Websocket technology, we can get rid of the high cost and have the opportunity to implement real-time applications perfectly.

Indeed, Websocket technology is a protocol that can send two-way messages over a continuously open TCP connection. Through this open TCP protocol, it is possible for the parties to send each other message and there is no obligation to respond to the sent messages as there is in the HTTP protocol. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/waogyvxwmd282t7r5x1b.png)

If you examine the HTTP / REST Request functionality from the above scheme, you will see that there is a response to each request. In the HTTP protocol, it is mandatory to return a response whether or not a request is returned.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/q75siv6hxauho2aetqwf.png)

If you examine the Websocket schema, the whole process is running over an open TCP connection. After the handshake process, once the acknowledgement is done, the bi-directional message process starts and goes until the connection ends.

In short, Websocket technology may be preferable to HTTP because of its:
- Bi-directional protocol - Unlike HTTP protocol, which is uni-directional, the request can be initiated by both the client and the server. 
- The parties can send messages **without expecting any response** from the receiver. 
- Full-duplex communication - The parties can send messages **at the same time**. 
- Single TCP connection - The parties communicate over that **same TCP connection** throughout the lifecycle of Websocket connection.