teleren/devto huggingface dataset:
React Core Concepts
Tags: react
Published: 2021-06-13 19:18:12

React is a library for javascript, It is used to create a user interface.

1.What is React?

React is a javascript library, It is helping developers build user interfaces. This is a front-end library it is using the website in the front-end. React is only focused on the front-end.

2.JSX

JSX means for Javascript XML, it is an extension to javascript. We can write an HTML tag in a javascript file and it is JSX code but the Browser does not understand the HTML code in the javascript file so this code converted to browser understandable code so JSX extension converted the JSX code to simple HTML-style code.

3.Virtual DOM

Virtual DOM is a copy of the site’s DOM. you update or add any code in your projects then virtual Dom has created a Virtual DOM and compare actual DOM or browser DOM if any difference between these two doms then updates only this different part in browser DOM or actual DOM.

4.Components

React components is a reusable code block that divides the UI into smaller pieces. The main benefit of components for do not duplicate or rewrite code same structure/view but data is different, you use your components dynamically.

5.Declarative

React is declarative, declarative means the developer writes how it should be, not how to do it. it is more readable and easy to understand. create a component where using declarative style.

6.React useState

useState is a hook in reactJs . It returns an array with two elements, first element in the value and the second element is a function for set the new value. you can set the new values in useState then automatically update/re-render in the browser or UI. you can store (string, number, boolean, array, object, etc..) in useState.

7.Conditionally Rendering

You need to show data on specific users then you can use conditionally rendering. That means you specific the data to show which user and rendering the specific data for a specific user. For the conditionally rendering we used the ‘if else’ or ternary operator.

8.props

props are using for basically two components connecting and pass the data for one component to other components and props data is read-only, that means you cannot update this data in child components.

9.Default props

Default props mean to set the default value and it is using for this time that other components cannot provide props values or provide undefined then use the default values. You can set the default value. props are undefined then use this default value.

10.React Hooks

Another most used case and beautiful thing in React is Hooks. The Hooks makes developer life easier. The Hooks is a “Function”. Hooks are used only in Functional Components it is not working on Class components. Basically, it’s used for sharing stateful logic between components.
Huddle-landing-page-with-single-introductory-section
Published: 2021-06-13 19:08:36

######I've just completed the "Huddle landing page with a single introductory section" challenge.

Here's a link to my solution: https://www.frontendmentor.io/solutions/semantic-html5-markup-css-custom-properties-mobilefirst-workflow-GRyOQsv3g

#####Any feedback and suggestions on how I can improve are very welcome!
New Coding Short Video: Should You Be Using Vue's Composition API?
Tags: vue, video, javascript
Published: 2021-09-19 20:06:49

---
title: New Coding Short Video: Should You Be Using Vue's Composition API?
published: true
date: 2021-06-13 18:38:49 UTC
tags: vuejs,video,JavaScript
canonical_url: http://wildermuth.com/2021/06/13/New-Coding-Short-Video-Should-You-Be-Using-Vue-s-Composition-API
---

If you've not noticed, I've been doing more video these days. I'm doing a weekly show called "Coding Shorts" where I cover topics that aren't course lengthed. The newest entry in this series is a demo of why I like Vue's Composition API. I convert an Options API to a Composition API and show you why I'm moving most of my Vue work to it.

Here's the video:

https://www.youtube.com/MssjemVqvgg

Let me know what you think. Love a like and subscribe as it really helps with the YouTube algorithm.

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

 This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
 Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
 ![](http://feeds.feedburner.com/~r/ShawnWildermuth/~4/kGtqhuvW_6I)
The Ultimate React Native Boilerplate with TypeScript
Tags: reactnative, boilerplate, mobileapp, typescript
Published: 2021-06-13 18:22:36

---
title: The Ultimate React Native Boilerplate with TypeScript
published: true
description: All-In-One Template, designed for smart (lazy) developers
tags: reactnative, boilerplate, mobileapp, typescript
cover_image: https://raw.githubusercontent.com/joeygoksu/LightReactNative/main/showcase/1.png
---

The template for React Native that includes all you need to build amazing projects 🔥

    📱 React Native — version 0.64.0
    🎉 TypeScript - Type checking
    📏 ESLint — Pluggable JavaScript linter
    💖 Prettier - Opinionated Code Formatter
    🌘 Dark Mode - Support dark mode
    🌆 UI Kit - Beautiful UI
    ⚙️ RN Dotenv Environment variable with RN env

👉 Let's try: https://github.com/joeygoksu/LightReactNative

🌸 Built with template

   - [Vocabulary Builder App](https://github.com/joeygoksu/VocabularyBuilderApp)
   - [Animal Finder Game](https://github.com/joeygoksu/AnimalFinderGame)

--- 
My other blog posts:
- [Kubernetes on AWS EKS for Beginners(Part 1)](https://joeygoksu.com/software/kubernetes-on-aws-eks-for-beginners-part-1/)
- [Apache NiFi on AWS](https://joeygoksu.com/software/apache-nifi-on-aws/)
- [Using lottie animations in gatsby](https://joeygoksu.com/software/lottie-and-gatsby/)
- [Coding Criteria](https://joeygoksu.com/software/coding-criteria/)
- [AWS Amplify @auth directives](https://joeygoksu.com/software/aws-amplify-auth-directives/)
Activity Lifecycle
Tags: android, kotlin, womanintech
Published: 2021-06-13 17:34:19

A activity de uma aplicação é basicamente a tela do aplicativo, é por onde o usuário interage com o aplicativo a partir do layout que aparece nesta tela.

Toda activity tem um ciclo de vida e conforme o usuário interage com o aplicativo essa activity passa por diferentes estados, desde o momento que é criada, quando o usuário entra no aplicativo, até o momento que é destruída, quando o usuário fecha totalmente o aplicativo.

Seguindo o exemplo abaixo, quando o usuário entra na aplicativo e navega por ele o comportamento das activities será:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9c6utooyjr52llf36fe.png)

No ciclo de vida da activity existem alguns métodos: **onCreate()**, **onPause()**, **onResume()**, **onStop()**, **onDestroy()** e abaixo vou resumir de forma objetiva o que cada um faz.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1oo155qn75fwg3s3487z.png) 

###onCreate()

    • Primeiro método a ser executado;
    • É executado uma única vez;
    • "o que quero ver na tela";
    • Define a interface gráfica (imagens, texto, botões que serão carregados no layout);
    • Inicialização de variáveis imutáveis.

###OnStart()

    • É chamado na inicialização da activity, após o onCreate, e também quando uma activity que estava em background volta a ter foco;
    • Pode ser chamada mais de uma vez;
    • Torna a activity visível para o usuário;
    • É nesse método que o aplicativo inicializa o código que mantém a UI (user interface).

###OnResume()

    • É o último método chamado antes do app estar pronto para o usuário interagir;
    • Assim como o onStart, este método é chamado logo após o onCreate, e também quando uma activity que estava em background volta a ter foco;
    • Pode ser chamada mais de uma vez;
    • A maior parte das funcionalidades do app são implementadas neste método (listeners, funcionalidade como mapa, vídeos, etc.).

###onPause()

    • Primeiro método executado quando a aplicação deixa de estar disponível;
    • Pode ser executado vários vezes;
    • Chamado quando a activity "perde o foco";
    • Utilizado, por exemplo, para "cancelar" o registro de listeners, parar tarefas iniciadas no onResume();
    • Ocorre quando o usuário clica no "voltar" ou "recentes".

###OnStop()

    • Chamado quando a activity não está mais visível para o usuário;
    • Pode ser chamado várias vezes.

###onDestroy()

    • Chamado antes da activity ser destruída;
    • Último método a ser executado;
    • Limpa os recursos que ainda estejam sendo utilizados.

O ciclo de vida permite o gerencimento da transição de informações entre uma atividade e outra dentro do aplicativo, nos auxiliam a adicionar certas características para as nossas telas.

______________________________________________________
Link para pesquisa e mais informações:

https://developer.android.com/guide/components/activities/activity-lifecycle?hl=pt-br
How to host image for free ? and use anywhere...
Tags: javascript, html, beginners, codenewbie
Published: 2021-06-13 17:09:43

Hello, If you want to add image in codepen editor then its not going to work if you are not a pro user.
So using this simple trick you can host image from github and use anywhere on the internet.
1 : Go to github.com and create a empty repo ex- host-image
2 : got to issue section and create a issue
3 : Drag and drop the image you want to host 
4 : Then it will generate a url 
5 : Use this url to codepen or anywhere 


I hope you like it if you know some other tricks please share!
you can follow me on twitter @codezada to more web dev tricks.
How do you implement notifications?
Tags: firebase, go, vue, discuss
Published: 2021-06-13 16:53:53

Checking the collective wisdom for ways of improvement.

* What's your solution?
* How do you treat read notifications?
* Do you use email and mobile notifications?

I use raw Firestore. I created a notifications collection with user documents that restricts access only to the user using the Firestore policies.

In view I created a "notification center" where all notifications are gathered.

On the backend I built several notification types. I send the relevant type to Firestore using the admin SDK, saved under the relevant receiving user. There's also a sender field. The whole thing is being managed by an internal notification service.

```go
type CoLearnRequestNotification struct {
	ID					string				`json:"ID"`
	ActionID			string				`firestore:"actionID" json:"actionID"`
	Type				string				`firestore:"type" json:"type"`
	CreatedAt			string 				`firestore:"createdAt" json:"createdAt"`
	Requester			User          		`firestore:"requester" json:"requester"`
	Read				bool				`firestore:"read" json:"read"`
}
```

On the front-end I use a Firestore listener. I use VueFire and VuexFire since I'm on VueJS. I store them in the Vuex store.

In order for a notification to be considered as "read", the user has to click an "x" button and remove it from the notification gadget.

Email: Currently building an internal email service. Mobile: we don't have a mobile app... yet.
Python Unit Testing
Tags: python, unittest, pytest, testing
Published: 2021-06-13 16:47:49

**Originally Posted on [Ashraful's Blog](https://blog.ashraful.dev/posts/python-unittesting.html)**
## What is Testing:question:
Testing is basically checking the features are okay or not and finding bugs on the system. Basically, there are many types of testing we do with software. Today we will talk about the most famous unit testing process. Let's keep going.

## What is a unit testing:question:
A unit test is a way of testing a unit - the smallest piece of code that can be logically isolated in a system. In most programming languages, that is a function, a subroutine, a method or property.

## Python's builtin unittest :boom:
Let's try some functions and their unit tests
```python
# test_add.py
# A very basic function for adding two numbers
def add(a: int, b: int) -> int:
    return a + b

# Writing Unit Test
import unittest

class TryingTheAwesomeUnitTest(unittest.TestCase):
    def test_add(self):
        self.assertEqual(add(5, 7), 12)

if __name__ == '__main__':
    unittest.main()
```

Save the file as `test_add.py` and run the file `python3 test_add.py` and see the following output.
```
.
----------------------------------------------------------------------
Ran 1 test in 0.000s

OK
```

## Introduction to PyTest :rocket:
> [pytest](https://docs.pytest.org/): helps you write better programs

Pytest is another testing library for Python. Let's dig into it.

### Installation:bulb:
```
pip install pytest
```

```python
# test_2_add.py

# The same old function
def add(a: int, b: int) -> int:
    return a + b

def test_add():
    assert add(3, 5) == 9 # I want see the fail response
```

### Run the tests:bug:
Just type `pytest` on the directory where you have saved the file.
```
$ pytest
```

### Result:see_no_evil:
```
============================================ test session starts =============================================
platform darwin -- Python 3.8.1, pytest-6.2.4, py-1.10.0, pluggy-0.13.1
rootdir: /Users/ashraful/Public/scripts
collected 1 item

test_2_add.py F                                                                                        [100%]

================================================== FAILURES ==================================================
__________________________________________________ test_add __________________________________________________

    def test_add():
>       assert add(3, 5) == 9 # I want see the fail response
E       assert 8 == 9
E        +  where 8 = add(3, 5)

test_2_add.py:8: AssertionError
========================================== short test summary info ===========================================
FAILED test_2_add.py::test_add - assert 8 == 9
============================================= 1 failed in 0.04s ==============================================
```

**Tips:** Don't forget to put the filename `test_` as prefix otherwise pytest can't detect the file. Whatever `test_` as prefix is mandatory convention for test case.
Day 91 of 100 Days of SwiftUI
Tags: swift, 100daysofswift
Published: 2021-06-13 16:42:26

I just completed day 91 of 100 days of swiftui. Today i worked on the app challenge for the FlashZilla app. I add a replay alert after the counter ends and i also added a feature to enable "retry guessing"

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82umimfj6b5c624o7w78.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7ppuip73e7aqxiuop3u.png)
Best Amazon EC2 for Docker servers in 7 shell lines
Tags: aws, docker, shell, devops
Published: 2021-06-13 16:39:17

Hi 

With the Amazon Linux 2 Centos based instance, here is the best initialisation to start with Docker !

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orxivjvnoa9iwki8o0e2.png)

```shell
sudo yum update -y && sudo yum install git -y
sudo amazon-linux-extras install docker -y
sudo service docker start
sudo curl -L https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose;
sudo docker network create web
```

try 
`sudo docker run hello-world`

In order:

- Update centos repo
- Install Git
- Install Docker
- Start docker
- Download Docker-compose
- relative link for docker-compose
- Docker-compose executable
- Create base network

Love ❤️
[pt-br] ObjectMapper: Convertendo para tipos genericos.
Tags: java, objectmapper, generics
Published: 2021-06-13 16:08:20

Olá pessoal!

Decidi fazer esse post, pois precisei fazer uma conversão usando classes genéricas.

É um tanto simples, mas que acredito que posso servir de ajuda futuramente, tanto pra mim quanto para outros devs.

O que eu precisava, era pegar um retorno JSON vindo de um serviço rest.

O código fico parecido com isso:
```
CloseableHttpClient client = HttpClients.createDefault();

// Codigos omitidos...
response = client.execute(request);
//Codigos omitidos...

BufferedReader br = new BufferedReader(new InputStreamReader((response.getEntity().getContent())));
ObjectMapper mapper = new ObjectMapper().disable(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);
MensagemApiDTO<ProdutoDTO> resposta = mapper.readValue(br.readLine(), new TypeReference<MensagemApiDTO<ProdutoDTO>>() {});

ProdutoDTO dto = resposta.getDto();
```

O responsável por fazer a conversão é esse cara:

```
mapper.readValue(br.readLine(), new TypeReference<MensagemApiDTO<ProdutoDTO>>() {});
```

O _TypeReference_ faz a conversão para o seu objeto genérico. 

Basicamente foi isso.
Como o projeto não usa spring, essa foi a maneira implementada.

Bom é isso, espero que esse post possa ter ajudado.
Criticas e sugestões são bem-vindas.

Obrigado
Minimal Cover
Tags: database, computerscience
Published: 2021-06-13 15:56:31

A minimal cover is a simplified and reduced version of the given  set of functional dependencies.
Since it is a reduced version, it is also called as **Irreducible set**.
It is also called as **Canonical Cover**.

**Steps to Find Minimal Cover**

**1) Split the right-hand attributes of all FDs.**
**Example** 
A->XY  => A->X, A->Y

**2) Remove all  redundant FDs.**
**Example**
{ A->B, B->C, A->C }
Here A->C is redundant since it can already be achieved using the Transitivity Property.

**3) Find the Extraneous attribute and remove it.**
**Example**
AB->C, either A or B or none can be extraneous.
If A closure contains B then B is extraneous and it can be removed.
If B closure contains A then A is extraneous and it can be removed. 

**Example 1**
Minimize {A->C, AC->D, E->H, E->AD}

**Step 1**: {A->C, AC->D, E->H, E->A, E->D}

**Step 2**: {A->C, AC->D, E->H, E->A}
Here Redundant FD : {E->D}

**Step 3**: {AC->D}
{A}+ = {A,C}
Therefore C is extraneous and is removed.
{A->D}

Minimal Cover = {A->C, A->D, E->H, E->A}  

**Example 2**
Minimize {AB->C, D->E, AB->E, E->C}

**Step 1**: {AB->C, D->E, AB->E, E->C}

**Step 2**: {D->E, AB->E, E->C}
Here Redundant FD = {AB->C}

**Step 3**: {AB->E}
{A}+ = {A}
{B}+ = {B}
There is no extraneous attribute.

Therefore, Minimal cover = {D->E, AB->E, E->C}
Building Multi Architecture Docker Images with buildx
Tags: docker, arm, kubernetes, containers
Published: 2021-06-13 15:37:07

---
canonical_url: https://unixorn.github.io/post/multi-architecture-images/
---
I've got a mix of architectures in my basement cluster - some Odroid HC2s that are arm7, some Raspberry Pi 4s that are arm64, and am soon going to add an Intel node as well. It's more hassle than it's worth to have to specify different images for the different architectures. I already build my own copies of images, so I decided to start building all my images as multiarchitecture images.

This turned out to be a lot easier than I was expecting - recent stable builds (2.0.4.0 (33772) or higher) of Docker Desktop can build for other architectures by running virtual machines in QEMU, so I can do the whole build on my MacBook Pro instead of baking each architecture separately and stitching them together with a manifest file.

1. Install the latest Docker Desktop for macOS
2. Enable experimental mode either by setting `DOCKER_CLI_EXPERIMENTAL=enabled` in your environment or by adding `"experimental" : "enabled"` to `~/.docker/config.json`
3. Do `docker buildx ls` to see the current builders
4. `docker buildx create --name multiarch`
5. `docker buildx use multiarch`
6. `docker buildx inspect --bootstrap`

Now you're ready to build. Go into one of your docker projects, then do `docker buildx --platform linux/amd64,linux/arm64,linux/arm/v7 -t username/demo --push .`

If you're not ready to push your image to docker hub, do `--load` instead of `--push` to have it build the image and copy it out of the buildx system and into your local docker.
Visual Studio Code adds Workplace Trust on May 2021 Version
Tags: vscode, javascript, programming, news
Published: 2021-06-13 15:28:15

A Workplace Trust capability in the upgrade is intended to provide for safe browsing and editing of code, regardless of the source or original authors. Workplace Trust lets developers decide whether project folders should allow or restrict automatic code execution. With Workplace Trust, an extra layer of security is provided when working with unfamiliar code when a workspace is open in Restricted Mode. This mode tries to prevent automatic code execution by disabling or limiting the operation of several VS Code features, including tasks, debugging, workspace settings, and extensions.
Notification Budge Using HTML & CSS
Tags: html, css, webdev, beginners
Published: 2021-06-13 15:19:26

Hello Guys,

Today I created a Amazing Notification Budge Using HTML & CSS. Currently I am at my native place to some days I am posting sum simple topics. 
In this post I only using Font Awesome Icon for image and Simple Span tag to display count number. If you find this useful in a post like and save this post also comments about your thoughts and new ideas for post.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/PopxbwZ %}
Verifying SSL connection for PostgreSQL
Tags: aws, postgres, ssl, pgadmin
Published: 2021-06-13 15:14:19

**Steps**

* Download PGAdmin from [https://www.pgadmin.org/]

* After installing, the tool gui will run in your default browser, select *Object->Create->Server*

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

* Populate the General and Connection tab.

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

* Once the connection is fine, right click *“Database=postgres”*, select Query Tool as below and execute below SQL.

![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zscvl84cdhzi1349mnl.png)
Docker setup on Windows
Tags: aws, docker, windows, ecr
Published: 2021-06-13 15:09:27

**Steps**

a. Install Docker Desktop for Windows.

[https://hub.docker.com/editions/community/docker-ce-desktop-windows]

b. Install WSL2.

[https://docs.microsoft.com/en-us/windows/wsl/install-win10]

c. Make sure awscli is up to date.

[https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2-windows.html]

d. Run the following command to login to the ECR repo.
```
aws ecr get-login-password --region <aws-region> | docker login --username AWS --password-stdin <ecr-repo-name>
```
Or if you are using an older awscli, you can try
```
aws ecr get-login --no-include-email --region <aws-region> > ./run.sh
```
Then run the shell file — *run.sh*

e. If you encounter error in step 4 (d) →

*"Error saving credentials: error storing credentials - err: exit status 1"*

then you need to rename the following exe file.

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

And also rename *~/.docker/config.json* to *~/.docker/config.json.original*

Run the shell script *run.sh* again.

**Copy AWS ECR repo between 2 AWS accounts**

a. To pull a repo:
```
docker pull <repo/image>
```
b. Create the same repo in second account.
```
aws ecr create-repository — repository-name <repo-name> --profile account2
```
c. Tag the image and push to target repo.
```
docker tag <account1-image> <account2-image>
```
```
docker push <account2-image>
```