teleren/devto huggingface dataset:
React component types and their combinations.
Tags: react, components
Published: 2021-06-01 15:44:29

Hi volks,

### Introduction
I'm sure you are aware that there are different types of components. We will not consider the implementation and purpose in detail.
Let's list them, I tried to collect all types of components, and maybe it is not all list:
- Container Component
- Presentational Component
- Dumb Component
- Smart Component
- Stateful Component
- Stateless Component
- Functional Component
- Class Component
- Pure Component
- Sub Component
- Higher-Order Component (HOC)
- Proxy Component
- Style Component
- Layout Component

Each type from the list above comes from different "groups".
This is a conditional division into groups for a better understanding of the issue.

###### Group 1: patterns
Container, Presentational, Higher-Order, Proxy, Style, Layout Components.
You can find all these patterns in https://reactpatterns.com

###### Group 2: by the way of implementation
- Pure or not
    - Each Component can be Pure Component
- Sub or not
    - Each Component can be Sub Component
- Function or Class
    - Each Component can be Function Component
    - Each Component can be Class Component
- Stateful or Stateless
    - Each Component can be Stateful Component
    - Each Component can be Stateless Component
- Smart or Dumb
    - Each Component can be Smart or Dumb Component

### Summary
Each Component have full name. And the full name can combine names from 2 groups above. 
For example:

> some "Stateless Functional Pure Presentational Component" what is "Sub Component" of "Stateful Functional Container Component".

Usually it is unnecessary to name components like that, but it's honest, every word in the name of a component describes its properties, role and place in architecture, which adds transparency at least in theory.

---

Thank you for attention, these were my thoughts, which came from the lack of a stricter specifications. Did anyone think about something like that?
Weekly Challenge 115
Tags: perl, perlweeklychallenge
Published: 2021-06-01 14:13:16

[Challenge](https://perlweeklychallenge.org/blog/perl-weekly-challenge-115/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-115/sgreen)

# TASK #1 › String Chain

## Task

You are given an array of strings.

Write a script to find out if the given strings can be chained to form a circle. Print 1 if found otherwise 0.

A string `$S` can be put before another string `$T` in circle if the last character of `$S` is same as first character of `$T`.

## My solution

I thought this was straight and even submitted a [pull request](https://github.com/manwar/perlweeklychallenge-club/pull/4174) last night. My logic was to get a sorted order of the first letter and last letter of each word. If they matched, we had a solution. And it worked for the two examples. However, I realised a few minute later that it didn't cover the cases where we had two different circles (for example `ab bc ca ij jk ki`).

This had me thinking today (sorry boss!) about what the best way of finding a solution that didn't involve a recursive sub-routine. I failed.

So I now have a solution that works, but I'm not overly happy with it, but I believe it works. It will be interesting to see how other Team PWC members tackle the task.

I have a recursive subroutine `_reduce_list` that takes two parameters, the words used and the words remaining. The first call puts the first word in the list in the used value. It doesn't really matter what word we used first, as we need to make a circle.

For each call, I find possible words we can add to the list (where there first letter is the same as the last letter of the last word), and recursively call the subroutine. If there is no solution, I return 0. If we have found a possible solution, we need to do one final check that the first letter of the first word is the same as the last letter of the last word to complete the circle.

## Examples

```
$ ./ch-1.pl abc dea cd 
1

$ ./ch-1.pl ade cbd fgh
0
```

# TASK #2 › Largest Multiple

## Task

You are given a list of positive integers (0-9), single digit.

Write a script to find the largest multiple of 2 that can be formed from the list.

## My solution

Hopefully this is as straight forward as I think it is. After checking all inputs are a single digit, I sort the numbers in decreasing order in an array called `@numbers`. I then find the position (index) of the last even number. If it is not already in the last position, I move that digit to the end.

I also display a message if no even digits can be found.

## Examples

```
$ ./ch-2.pl 1 0 2 6
6210

$ ./ch-2.pl 1 4 2 8
8412

$ ./ch-2.pl 4 1 7 6
```
Spring Boot and MongoDB Tutorial
Tags: java, mongodb, springboot, programming
Published: 2021-06-01 15:30:49

# Course Description
The Spring Data MongoDB project provides integration with the MongoDB document database. In this course you will how to set a project from scratch and a fully functional Restful API using MongoDB for the backend.

# Topics Covered
* Bootstrap Application using Spring Initializr
* Setup MongoDB running on Docker
* MongoDB Collections and Documents
* CRUD operations using MongoRepository
* Queries using MongoTemplate
* Indexes for unique constraints
* Building a Restful API
* Exercise

{% youtube ssj0CGxv60k %}
One doesn't simply exit VIM
Tags: bash, vim, git, linux
Published: 2021-06-01 15:27:19

Around four years ago, I introduced myself to VIM. I had joined a Discord Community composed of Sophisticated Developers, Linux Users. And among these were VIM users. They had a certain vibe to them that made me desire their company. That is how my journey to a better path began.

No, this path was not better because it involved VIM. It was better as it made me acquire an attitude that most never aim for but should.

The attitude was to KEEP EXPLORING FOREVER.

My journey began with writing that first letter on VIM after learning how to enter Insert Mode and then exiting the same to navigate the document.
VIM showed me the beauty that simplicity could hold and the complexity that minimalism could contain.
It enabled me to explore solutions for even the most basic features that other text editors contain.

During this journey that began from VIM and shall continue forever, I encountered a MEME similar to this one
![VIM MEME](https://149351115.v2.pressablecdn.com/wp-content/uploads/2017/05/meme.jpeg)

And it made me realise the great significance VIM holds for me. It enabled me to keep learning and exploring to find solutions and inspired me to apply the same to other aspects of my life.

I shall now like to end this brief to encourage the reader to always seek learning in every endeavour that you undertake. Yes, you will fail and fall but, soon, you will learn how to pick yourself up.
What is exactly Dom and Dom manipulation in a snap  
Tags: javascript, dom, interview
Published: 2021-06-01 15:06:24

In this article, we will go through the dom and dom manipulation.

# what is exactly dom?
DOM (document object model ) is basically a programming API for HTML and XML documents, with dom you can specify how your document should be structured.
with dom, we can easily manipulate the elements of our document.

![Dom_210601_193748_1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1622558791388/Mflhz9jSV.jpeg)

According to the dom model, every element is an object, and even the nested tags are the objects and chile of the enclosing one. HTML dome basically looks like a tree. it is also called a tree.


![Dom_210601_193748_2.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1622558821751/Q_XCHL7Qx.jpeg)

# try is yourself

open the console of your browser right now. 
**press ctrl + shift + j**
enter this in the console of your browser.

```
console.log(document);
``` 

what do you get?
you will get the entire HTML document returned.
here the document object represents the entire web page.


if we want to access any element in the web page we need to start accessing that with the help of the document object.

for example, if you want to get the domain of the page ...  just type 


```
console.log(document.domain)
``` 
# How can I manipulate dom?

well, there are many many ways to do that...
you can use query selectors, getElement by class, or id


```
 document.querySelector(".myclass");
var x = document.querySelectorAll(".myclasses");

// if I want to change the background...
x.style.backgroundColor = "dark" ;
``` 
this is how you can easily manipulate dom.


# wrap up

This is just a beginner article of my javascript series. where I would be sharing everything I am learning to prepare for interviews. positive or negative please leave your feedback.


you can connect with me on  [Twitter](https://twitter.com/OyeTewari) 

you can support me on.
[buymeacoffe](https://www.buymeacoffee.com/tewarig0)
How to Optimize Cost on AWS
Tags: cloudcomputing, aws, pricing, cloud
Published: 2021-06-14 07:31:05

---
title: How to Optimize Cost on AWS
published: true
date: 2021-06-01 15:04:09 UTC
tags: cloudcomputing,aws,pricing,cloud
canonical_url: https://towardsaws.com/how-to-optimize-cost-on-aws-abf609e6288d
---

[![](https://cdn-images-1.medium.com/max/2600/1*5rXejhcKLorK7JiXnQH-tg.jpeg)](https://towardsaws.com/how-to-optimize-cost-on-aws-abf609e6288d?source=rss-6a5fd2acfac------2)

[Continue reading on Towards AWS »](https://towardsaws.com/how-to-optimize-cost-on-aws-abf609e6288d?source=rss-6a5fd2acfac------2)
🔥 Happy path vs. Unhappy path
Tags: agile, test
Published: 2021-06-01 15:00:06

🛠️ During product design and development: 

Stakeholders focus on intended user behavior. Product owners describe this happy path with business requirements. Engineers push code to enable users to do these things. A user who demonstrates this expected behavior follows the happy path.

🧐 These are examples of happy paths: 

User creates a new account
User signs in with their new credentials
User retrieves information about their account
But what happens when there’s unintended behavior, like when a user submits invalid inputs? These unhappy path scenarios are often neglected in design and development. But with enough traffic, unexpected inputs will inevitably come from both well-intentioned and malicious users.

🧐 Examples of unhappy paths:

User creates a new account without providing all required inputs
User signs in with invalid credentials
User pastes a SQL query that gets executed (maliciously or unintentionally)

💻 Conclusion: 

A strong test plan covers both happy and unhappy paths. Positive test cases describe happy path scenarios, where errors result in failed tests. Negative test cases describe unhappy path scenarios, where expected errors result in passed tests.
How to start competitive coding!
Tags: programming, watercooler, discuss, showdev
Published: 2021-06-01 14:54:38

### Competitive programming(CP) is a mind sport usually held over the Internet or a local network, involving participants trying to program according to provided specifications.

## Basic requirement for CP is.
* **Participation**

Basically CP demands regular participation on various contest which held over internet.
* **Learning**

If you are participation but not learning new concepts then it is of no use. You need to maintain both.
* **Patience**

Most important thing you need to learn is patience while doing the problems. Some time you will not get AC or green tick for particular problem but must not loose hope. You need to explore it.

### Basic steps in learning Competitive programming:
1. **Choose well known programming language.**
Choosing a correct programming language is great concert here. Although you can do CP in any language but usually C++/C or JAVA is most preferred because of speed and time of execution which is great in this language. Python is slow as compared to C/C++ and JAVA, that's why very less number of programmers used to do Competitive Programming.

2. **Choosing some platform for practising competitive programming.**
There are many platform present where you can practice and take part in contest.
Some of them are.
> **[Codechef](https://www.codechef.com/)**
> **[Codeforces](https://codeforces.com/)**
> **[Leetcode](https://leetcode.com/)**
> **[GeeksforGeeks](https://practice.geeksforgeeks.org/)**
> **[Hackerrank](https://www.hackerrank.com/)**

3. **Learn Data Structures and Algorithms.**
Data Structures are something that helps you in making the program more efficient. Algorithms are something that use various data structures to implement the logic and solve the program.

**Learn them from here.**
>[GeeksforGeeks-DS](https://www.geeksforgeeks.org/data-structures/)
>[GeeksforGeeks-Algo](https://www.geeksforgeeks.org/fundamentals-of-algorithms/)

**Last--> Practice practice Practice a lot.**
If you want to become excel on that you need to practice and keep learning from your mistake .


### Start your journey as soon as possible and enjoy this sports.

Visit my *codechef* profile--> [Rishabh](https://www.codechef.com/users/rishabh062)

**Follow me here.**
**[Twitter](https://twitter.com/Rishabh07147212)**
**[Linkedln](https://www.linkedin.com/in/rishabh-dwivedi-28737b1a0)**

Thanks for reading.
React Interview Questions
Published: 2021-06-01 11:43:01

**1) What is React?**
Ans :

1. React is an open-source frontend JavaScript library.
2. Used for building user interfaces especially for single page applications.
3. It is used to handle presentation layer for web and mobile apps.
4. It was developed by Facebook in 2011.


**2) What is JSX in react?**
Ans :

1. JSX stands for JavaScript XML.
2. JSX allows us to write HTML elements in JavaScript


**3) What is component in react?**
Ans :

 1. Components are main building block of react.
 2. Components are independent and reusable bits of code.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxt5fqbfg0stxlfy23nr.png)
 
**4) What are props in react?**
Ans: 
 1. Props are properties of a component.
 2. Props are read only/ Immutable
 3. Makes component dynamic
 4. Data can be shared with the help of props.
 5. Props are arguments passed into React components.	

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

**5) What is Fragments in React?**
Ans :

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

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

**6) What are defaultProps in React?**
Ans:

defaultProps is a property in React component used to set default values for the props argument. It will be changed if the prop property is passed.

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

**7) What is props.children in react?**
Ans :
props.children represents the content between the opening and the closing tags when

**8) What is Lifting State Up in React?**
Ans : 
In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called “lifting state up”. 
 
**9) Why fragments are better than container divs?**
Ans :

1) Reduces un-necessary adding of elements in DOM.
2) Helps to keep html elements structure like in table


If you like you can visit my YouTube videos

**10) What is reconciliation?**
Ans :

Reconciliation is the process through which React updates the DOM.



 {% youtube 9OtC5I6XyGY %}
J'avais juste envie de vous montrer ma nouvelle animation de formulaire
Tags: french, showdev, css, webdev
Published: 2021-06-01 14:17:13

---
title: J'avais juste envie de vous montrer ma nouvelle animation de formulaire
published: true
description: 
tags: french, showdev, css, webdev
cover_image: https://images.unsplash.com/photo-1522096823084-2d1aa8411c13?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80
---

Chère Dev(.to)lopers,
J'ai eu par le passé le privilège de vous présentez quelques boutons et autres pop-up. 
Vos retours furent très encourageants à chaque fois. Si bien qu'ils me donnèrent envie de continuer en ce sens.

C'est pourquoi, aujourd'hui, j'ai l'honneur de vous présenter....

**UN FOMRULAIRE**
__La foule applaudis et crie, le champagne coule à flots dans un climat emplie de joie__

{% codepen https://codepen.io/JeremyMonatte/pen/XWpyOPa %}


PS : (faut soumettre le formulaire pour voir l'anim. CLIQUE VAS-Y)

La version Anglaise est juste ici : 
{% link https://dev.to/jeremymonatte/i-just-wanted-to-show-you-this-form-animation-4k1j %}
I just wanted to show you this form Animation
Tags: showdev, javascript, css, webdev
Published: 2021-06-01 14:17:06

---
title: I just wanted to show you this form Animation
published: true
description: 
tags: showdev, javascript, css, webdev
cover_image: https://images.unsplash.com/photo-1522096823084-2d1aa8411c13?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80---

Dear Dev(.to)lopers,
I already got the privelges to show you some buttons and a pop-up. Your returns where great each time, and that make me want to continue on this path.

So today, I'm glad to introduce you...
My newest, sweetest, smoothest form animation I ever created. I hope it will draw you a large smile. 

{% codepen https://codepen.io/JeremyMonatte/pen/XWpyOPa %}


PS : You should try to submit it

French version of this post just here : 
{% link https://dev.to/jeremymonatte/j-avais-juste-envie-de-vous-montrer-ma-nouvelle-animation-de-formulaire-m6n %}
Matt's Tidbits #97 - Running/Debugging individual Jest unit tests
Tags: mattstidbits, reactnative, jest, tidbittuesday
Published: 2021-06-01 14:16:06

[Last week I wrote about React Fragments.](https://medium.com/nerd-for-tech/matts-tidbits-96-cleaner-components-with-react-fragments-aef93ffdf18c) This week, I have a quick tidbit about running tests in VS Code.

I hope you all had a restful long weekend! [I've written about the importance of vacation before](https://matthew-b-groves.medium.com/matts-tidbits-81-the-importance-of-vacation-fcff932cda71), and in this pandemic that just seems to keep on going (although hopefully we're starting to see the end), it's more important now than ever to prioritize your health and take care of yourself!

As you may have noticed, since I've been writing about it a bunch recently, my current project is using React Native. We're using [Jest](https://jestjs.io) for our unit tests, and it's a pretty decent tool. However, it caught me slightly by surprise that the only way (that I knew of) to run our tests was via a `yarn test` command that ran them all at once. This became especially troublesome when I had to debug a failing unit test (perhaps I'll write about that next time), and was trying to find a way to shorten my write/test cycle.

Thankfully, one of my coworkers pointed me at a VERY helpful VS Code extension: https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner

This extension provides links next to each unit test to let you run or debug them individually! If you're using Jest & VS Code, you really MUST download this extension - I guarantee you it will come in handy!

What are your favorite VS Code extensions? Let me know in the comments below!

Interested in working with me in the awesome Digital Products team here at Accenture? [We're hiring!](https://www.accenture.com/us-en/careers/jobsearch?jk=%22Digital%20Products%22&sb=0&pg=1&is_rj=0)
𝐖𝐚𝐧𝐭𝐞𝐝 𝐭𝐨 𝐰𝐨𝐫𝐤 𝐰𝐢𝐭𝐡 𝐭𝐡𝐞 𝐀𝐏𝐈𝐬 𝐢𝐧 𝐟𝐥𝐮𝐭𝐭𝐞𝐫?
Tags: flutter, restapi
Published: 2021-06-01 14:05:50

This series can help you with the,
📌📌 Getting the data through Rest API and using it on flutter
📌📌 Model class Creation
📌📌 Posting the data from the flutter app to the back end using Rest API.
📌📌 It will help you handle all the types of JSON data like a single object, list object, nested objects, etc.

Link of series: https://youtube.com/playlist?list=PLtIU0BH0pkKpXE-1vC7NswofFPby1OYh-

find the repo link in the description and subscribe to the channel for more awesome videos.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u46ssmglxgkl37cygz3b.jpg)
IF YOU'RE A BEGINNER IN CODING, READ THIS
Tags: beginners, tutorial, career
Published: 2021-06-01 14:00:47

DON'T FALL IN TUTORIAL HELL. And, if you haven't heard of it, then you're at the right place at the right time. When many start out, they keep on watching tutorials on Youtube, attend their classes for some online course they enrolled in etc. But do you think that will be worth it? Just learning the concepts? Understanding them, but not applying them anywhere? NO. Never. Until you apply your knowledge in a project, it's a waste. 

Computer Science is something that can be only learnt through practice and more practice. Start building something, do something. At first, you might make mistakes, make them, who's stopping you? If you feel like you need help, refer to StackOverflow or Youtube or your instructor. In these times, the best thing that has happened is that most of our doubts have already been someone else's doubts and therefore, there answers are readily available. You can easily find solution to your problems on the internet. If you need help with ideas, refer to google, [geeksforgeeks](https://www.geeksforgeeks.org/computer-science-projects/) has some amazing project ideas too or BE CREATIVE and make something that's unthought of before!

So, go on, build something! You can do this! 
Keep Learning! Keep Coding!