teleren/devto huggingface dataset:
What is Redux? Why we should use it?
Tags: redux, react, javascript, webdev
Published: 2022-02-25 11:55:19

**What is Redux**: Redux is a state management library that manages our application's all data and states. It is mostly used as a state management tool with React, Although we are discussing the use of Redax with React here, it is not the only one that can be used with React. We can use Redux in Angular, Vue, Vanila js if we want.

By now we understand that Redux is mainly used to manage the application state. So let's take a look at the state at a glance.

**State** is basically an object that contains specific information or data of a component. Since everything in the React is a component, when we work with the component state of the React, we need to transfer data from different component states to another component. Then we can manage the state by sending data through "Props".

## Why we should use Redux: 
Suppose we have a lot of child components inside a parent. Now we want to change from one child component to another child component, so how do we do that? Let's look at the diagram below.

![component example](https://res.cloudinary.com/techdiary-dev/image/upload/c_scale,f_auto,q_auto/v1/techdiary-article-assets/cxxbsryeor4q7fazj4gt)

If we do not use Redux then we need to do props drilling to send data from one child component to another.

**What is Prop drilling:** Reacts data flow system is unidirectional. When we need to pass data from one component to another component of a tree need to use the prop drilling process. In this process, props are passed from one component to another component that does not need the data but only helps in passing it through the tree. It’s called prop drilling.


## Why we should avoid prop drilling?
React is a very popular JavaScript library. The reason is that it is easy to implement and its great performance in a single-page application. But one of the biggest obstacles developers face when working with the library is components re-rendering excessively, which slows down the application performance. And component re-rendering is especially damaging when developers need components to communicate with each other in a process known as prop drilling. 
That is why we should avoid prop drilling, And the Redux will help us to get rid of this problem.

![prop drilling](https://qph.fs.quoracdn.net/main-qimg-efd97474733f1fb58c76b37ba1bbd5fd-pjlq)
---


Now let us know about the hook of Redux. Redux basically stands on three concepts

1.Store: Redux saves all the data of the application in one place and that is called Store

2.Reducer: Redux will not allow changes directly to this store. Redux has to be told in advance what changes need to be made in the store if this happens.

3.Action: And the message that needs to be sent to Redux to tell 'what happened' is Action.


![react-redux](https://res.cloudinary.com/techdiary-dev/image/upload/c_scale,f_auto,q_auto/v1/techdiary-article-assets/x6dwfac6naz4r9oezijy)
I became a Fullstack Developer 💻☕️ in 24 HOURS and got a JOB 🚀
Tags: javascript, beginners, webdev, tutorial
Published: 2022-02-25 11:43:28

We only use a small percentage of our brain power. However, technology is growing every second and you can use it to unleash all your learning capacity. I used these techniques to learn faster and I was able to master web development, frontend and backend, in 24 hours with no previous experience.

***

Well, talk about clickbait.

First of all, I want to apologize, because the tags and the title are a lie. The first paragraph too, that's only for the post preview.

> Thanks to [Lukas](https://www.pexels.com/@goumbik) for the cover image.

## What is the purpose of this post? 🤔

This is a little experiment, a little *travesura*. This is not my real account, this is not a real post. 

Every few months I read someone in DEV talking about the low quality content and giving tutorials on how to launch your blog. I don't like to follow the implicit rules of social media content to manipulate the attention of the readers/watchers and trick the algorithm in my favor (which I'm not even trying, as I don't know SEO). But I wanted to see how far I can take a post only with a clickbaity title and some trending tags.

With this post I just want to see **how popular can become a post with zero value content**.

### Why?

Curiosity. In my main account (some of you may guess it) I get very little attention to the posts about the topics I like. But just once I wrote an article on javascript and in hours it became the most popular post I've written. So I started to wonder how easy could it be.

However I'm making it in a separate account.

### Hi moderators and curators 😅

I apologize once more, I know moderating this community is not easy and this is not the best way to help. Feel free to mark this post as low quality, but if you feel curious about how far can this get, at least let it be (I won't ask you to mark it as high quality).

## Feedback is appreciated 🪶

I'm sorry if you feel tricked. I'm happy if you feel surprised. I hope you found this somewhat funny. I hope you also feel curious about this.

I wrote this in a few minutes. I wonder how many views and reactions can it get. If this doesn't die two hours after being posted (that wouldn't surprise me either) I'll be updating this post with the number of views 👀.

- *Number of views 25/02/22*: 0
- *Number of views 26/02/22*: 445
- *Number of views 28/02/22*: 548
- *Number of views 03/03/22*: 576

*Note: It didn't get that much views, but definitely much more that my average viewcount. Not surprising nor disappointing.*

And they say you have to ask for engagement, so:

Don't forget to tell me your thoughts in the comments, react with a heart 💓 unicorn 🦄 and bookmark 🔖 and share this on your social media 😉
Lavish Ghostwriting | LavishGhostwriting
Tags: lavishghostwriting
Published: 2022-02-25 11:34:44

Putting your creative notions and ideas on paper is not an easy job. It takes the right skills and know-how in order to bring a book to completion. We know that captivating and well-versed book writing is not everyone’s forte. You need people who are expert and qualified enough, with years of experience to write your book and guide you. This is where [Lavish Ghostwriting](https://www.lavishghostwriting.com/) comes in. We take pride in the thousands of books we have successfully published and the customers that we have pleased with our unmatched and efficient services.

The writers that we hire and knowledgeable and well-trained in the art of writing. They can take your ideas and spin them into an awe-inspiring and captivating masterpiece. The way we write your content inspires people and keeps them intrigued and mesmerized with our remarkable skills. Our writers have been hired from around the globe after being sifted through carefully. They are trained in different genres of writing so we have all-rounded services when it comes to writing any kind of book.

Be it action, romance, memoir, informative, or self-help, we have the tools to produce a wide array of captivating material that is fun to read and keeps readers absorbed. Lavish Ghostwriting delivers your work on time and takes into consideration all of our clients’ ideas and feedback. Your creative input means a lot to us as we give you a hands-on writing experience by letting you contribute and revise the content we write.

Our writing process includes outlining and the writing of your book’s content. Then we edit and proofread your work to make sure it is flawless and optimized. After this, the draft is sent to our clients for review countless times before the time it is published. We then offer marketing services that help promote your work and create a following.

We guarantee 100% satisfaction. Our payment plans are affordable and easily payable. The thousands of books that we have helped publish speak for our quality and commitment. We want to help your dream of becoming a best-seller author be recognized and come true!

Let us help take you on an exciting trip of numerous possibilities as we guide you through the challenging process of book-writing. We provide you with the most exceptional ghostwriting experience. So just sit back and let LavishGhostwriting do the work for you!
Redux!! A state container!
Tags: redux, react, javascript, beginners
Published: 2022-02-25 11:32:53

**Redux** is kind of a JavaScript library where we can handle and centralize the application state. It is also called “store container”. It can be implemented In front-end frameworks like React, Angular, or Vue to manage each of their component’s state.
As we know about React’s prop drilling nature Redux helps to get over this, it holds all the states within the app and each component have access to this store.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70nub3ce4mykbfwwwqil.JPG)

**Redux Flows**
We can describe Redux workflow as following these steps given below:
A user basically interacts with UI which is actually a combination of a couple of React Components, by triggering state updates.
When the User interacts, React components dispatch an action.
Reducer is a JavaScript function that takes that action from dispatch and updates the state the way action describe
The UI is subscribed to store where states are being stored and listen if any changes happen.
Finally, the changes are notified by subscription method React Component and change UI accordingly.
So, we can say Redux Flows is made of 3 major components: Action Reducer and Store.

**Benefits of using Redux**
- Redux makes the state predictable.
- Redux is easily maintainable.
- For debugging an application Redux makes it so easy.
- Redux is easy to test and also optimizes the performance of the application.
- We can easily persist some of the state to the local store.
Redux can be used client and server-side both.

**Redux Toolkit**
Though Redux has many advantages to use but also has some challenges to implement. To avoid these challenges we can use Redux Toolkit with Redux. Redux Toolkit is an approach for writing Redux logic. In Redux Toolkit, the basic structure of the Redux and its needed packages are included, which makes our code and folder structure more understandable and organized.
Redux-A technology to know
Tags: react, redux, programming
Published: 2022-02-25 11:31:50

**What is Redux?**

Considering Javascript Redux is a predictable state management library and for React, Redux is the most popular State container. It basically helps to avoid the Prop drilling nature of React. It holds all the states within the app and each component have access to this store. The core concepts of Redux are:

**The Store:** Everything that changes within an app is actually represented by a javascript object called the store. Store stored all the states of an application.

**Application state is immutable:** When states changes in an application Redux clone the state object and modify it and it replaces the original state with the new copy.

**Reducers:** Reducers are pure JavaScript functions that perform the action to update the state and return the new state. It takes the current value of a state, takes the action depending on the action type, and returns the new state.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jls0f9nmqz5aqj1m1mw.png)

**Redux data flow:**

1. Store stores the states
2. Event occurs in the UI
3. That Event dispatch an action
4. In a predictable way, Reducer updates the states
5. UI accept the updated states

**Advantages of Redux:**

- Redux can be used client and server-side both.
- Redux is easy to test and also optimizes the performance of the application.
- We can easily persist some of state to the local store.
- We can maintain Redux easily

**Disadvantages of Redux:**

- In a small project, everyone tries to avoid complex patterns like Redux.
- When data come from a single data source per view.
Never write another Getter-Setter method in Java again!
Tags: java, programming, tutorial, beginners
Published: 2022-02-25 11:23:36

With Project Lombok you can say goodbye to the code clutter that is getter-setter methods in your code. Adding but a few annotations to your fields/classes you will automagically get getter-setter methods available. This demo uses Spring Boot but that is not a requirement to use Project Lombok.

{% youtube 2ga6xAPxANE %}
Next JS - 2022
Tags: nextjs, react
Published: 2022-02-25 11:22:00

**Text JS**
Next JS is a React JS framework for production. Simply, Next is a package that uses React JS for building the user interface. It has a lot of features that enable developers to build fledged production-ready applications. It has so many features like routing, styling authentication, bundle optimization, SEO, etc. There’s no need to install additional packages, everything it provides us automatically.
**Why Learn Next JS?**
There are so many reasons to use Next JS instead of React JS. Next JS simplifies the process of building a React application for production. Some major benefits of Next JS are,

1. File-based routing
2. Pre-rendering
3. API routes
4. Support of CSS modules
5. Authentication
6. Development and production build system

**File-based Routing**: In Next JS no need to configure any url for routing. All files in pages folder automatically works as route.
**Pre-rendering**: Next JS allows to set pre-rendering method for each page where most of pages follow static generation and other pages will use server side rendering.
**API routes**: This week we have worked on four major features in our website. API routes provide a solution to build your API with Next. js. Any file inside the folder pages will be treated as an API endpoint instead of a page.
Python Project- Terminal Game- Minesweeper
Published: 2022-02-25 11:20:48

With this post I finish my project to complete the Codacademy's course CS101.
This is my very first program created in python.
I have built my version of the Minesweeper terminal game.
Of course it can be improve, so I am open to sujestions that will help me to improve my knowledge in programming.

https://github.com/Othamae/Minesweeper.git

Thanks!!!
Next JS - Easy to Implement
Published: 2022-02-25 11:18:04

I started a project with Next JS  but I never did any projects using next js so it was challenging for me. According to project requirements, I implement and build my confidence so that implemented how to work with next js, how to work with next js authentication(firebase), how to redux use in next js app, etc. As a jr. developer, every step was most challenging and finally, I overcome it. So this project helps me a lot in gathering my new skills.

when implemented with next js for the first time it's getting so many errors/bugs after error/bugs desperate me but I won't give up. hence, I'm analyzing StackOverflow, Github, videos, demo projects(to properly how they behave) and now I have the confidence to start any projects using next js. 

Every errors/bugs teach me to learn new things, which things are encourages me to complete my project with satisfaction so that I'm enjoying it.
Day 5 of 100 days of Code
Tags: javascript, beginners, webdev
Published: 2022-02-23 20:13:19

Today I learnt about loops.looping through a sequence and an array. A loop is a sequence of instruction that is continually repeated until a condition is reached.
    • for loop
    • while loop
    • do while loop
      
The for loop has the following syntax

```
for (statement 1; statement 2; statement 3) {
  // code block to be executed
}
```

```
for (let i = 0; i < 5; i += 1) {
    console.log(i)
}
```

Statement 1 is the let i=0; is the initial vairable. It sets the initial number to be zero.
Statement 2 is the condition that is to be met, in this case i < 5. This means it should keep looping while i is less than 5. 
Statement 3 is executed (every time) after the code block has been executed. 

```
In this case it will output 
0
1
2
3
4
```


The while loops loops through a code as long until the condition is met

```
while (condition) {
  // code block to be executed
}
```

```
let i = 0
while ( i < 5) {
console.log(i)
i++
}
```

This does the same as the for loop example above.

Do while
This is a variant of the while. It instructs the program to execute a program while condition remains true. 

```
do {
  // code block to be executed
}
while (condition);
```

```
let i= 0
do {
console.log (i)
i++
while(i < 5)
}
```

Honestly for some untapped reasons I do not like this do/while loop.

Looping through an array

```
let messages = [
    "Hey, how's it going?",        
    "I'm great, thank you! How about you?",
    "All good. Been working on my portfolio lately.",
    "Same here!",
    "Great to hear"
]


for (let i = 0; i < messages.length; i += 1) {
    console.log(messages[i])
}

```
Data Science Algorithms
Published: 2022-02-25 11:04:18

It is a process or collection of rules or set to complete a task. It is one of the primary concepts in, or building blocks of, computer science: the basis of the design of elegant and efficient code, data processing and preparation, and software engineering.

Machine learning is used to predict, categorize, classify, finding polarity, etc from the given datasets and concerned with minimizing the error.

It uses training data for artificial intelligence.

Since there are many algorithms like SVM Algorithm in Python, Bayes algorithm, logistic regression, etc. which will use training data to match with input data and then it will provide a conclusion with maximum accuracy.

Resources  -

https://intellipaat.com/blog/tutorial/data-science-tutorial/data-science-algorithms/

https://www.youtube.com/watch?v=a5KmkeQ714k

https://www.youtube.com/watch?v=RsIX6--BGB4

https://en.wikipedia.org/wiki/Data_science
Secrets App Management
Tags: opensource, javascript, programming, webdev
Published: 2022-02-25 10:53:18

## What Are Secrets? 🔒
An authentication & security app where a user can sign up and write messages anonymously. Used OAuth2 security to authorize the user using passport.js. Used EJS, node.js, express.js to develop the app, and MongoDB as the database. Further used HTML5, CSS3 and JavaScript.

## Deployed: 🤯

https://secrets-live.herokuapp.com/

## Version Control + Documentation 🤐

https://hr21don.github.io/levelsixsecurity/

## License: 📝

This project is under the MIT license. See the [LICENSE](https://secrets-live.herokuapp.com/) for more information.

## Contributions

Contributions are always welcome...

🔹 Fork the repository
🔹 Improve current program by
🔹 improving functionality
🔹 adding a new feature
🔹 bug fixes
🔹 Push your work and Create a Pull Request
Build a Stunning Portfolio website with React JS
Published: 2022-02-25 10:38:15

Hi there👋,

I wanted to build a portfolio which is different and unique with design and little bit animations.
Here is the Demo Link:
https://react-portfolio-sigma.vercel.app/

For this project I have used these libraries,
▶️ React JS
▶️ Framer-motion for Cool transitions and animations
▶️ Styled-Components
▶️ Particle JS
▶️ React Router
Deploying a (static) create-react-app
Tags: react, githubpages
Published: 2022-02-25 10:35:35

So there's probably already a ton of blog posts out there on this subject.
But I've been trying to get a nice and easy way to deploy my create-react-app (CRA) to Github Pages, and I finally found out how to! I found a guide, but it seemed overly complicated, so now I wanted to make a simple guide/blog post about it.

## Step 1: npm package
To make it easy, we're using an npm package called "gh-pages".

> _I won't go into detail about this package, but its mentioned by CRAs own documentation, so I trust it._ 

Install it:
```copy
npm install gh-pages
```

## Step 2: Homepage
Github Pages follows a pattern for your url (if you're using the default one given by Github):
`your-github-username.github.io/your-repo`

Following this pattern, add a "Homepage" attribute to your package.json:
```diff
{
  "name": "business-card",
  "version": "0.1.0",
+  "homepage": "https://username.github.io/repo",
  "private": true,
  "dependencies": {...},
```


## Step 3: Scripts
Also in your package.json, we need to add 2 scripts:
```diff
  "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
    ...
  }
```

## Step 4: Deploy
```
npm run deploy
```

## Step 5: Done
Or at least, that should be it, if you're having problems, and cannot see it, make sure these two things are as it should be:
Visit your repo on GitHub, and go to Settings and then Pages.
And then you should see:
![successful deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbftdz86619coxdun1yy.png)

If not, make sure you've chosen the gh-pages branch:
![show branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9gyusfyzrfb5kjjl50a.png)

## Caveats:
There's 2 caveats I am currently aware of.
1. You need to do some slight changes if you want to deploy a user page
2. If you are using routing in your react app, you need to use hash routes instead.
Python Functions *args and **kwargs Structure
Tags: python, tutorial, programming, beginners
Published: 2022-02-25 10:25:16

> [Sign up to my newsletter!](https://baransel.dev/newsletter/).


## What are `*args` and `**kwargs`?

These structures are sometimes used when we do not know the number of parameters to import or the number of parameters varies. Thus, we bring dynamism to our function. Let's show it with an example; For example, let's write a function that sums the entered numbers.

```python
def add(number1, number2):
    print(sum([number1, number2]))
 
add(6, 9)
```

It works very well, so let's add another number, this time add three numbers.

```python
def add(number1, number2):
    print(sum([number1, number2]))
 
add(6, 9, 1)
```

```
TypeError: add() takes 2 positional arguments but 3 were given
```

Yes, we got an error because we stated that it can take two parameters while writing the function, so let's fix it.

```python
def add(number1, number2, number3):
    print(sum([number1, number2, number3]))
 
add(6, 9, 1)
```

This is how we fixed it. This is not a correct usage because if I want to add two numbers together again, I will have to change the function again. The function I wrote here is just a function that adds two numbers, but I don't want that. I want to add 2 when I want and 10 when I want. Then we will use `*args` and `**kwargs` structures.

## Using `*args`


```python
def add(*args):
    print(sum(args))
 
add(6, 9, 1)
add(6, 9, 1, 10, 14)

# 16
# 40
```

You can now enter as many numbers as you want. No matter how many numbers the function gets, it will do the necessary operations.

## Using `**kwargs`

Yes, we learned what `*args` is and how to use it. But what is `**kwargs`? And what is the difference between them? Likewise, we use `**kwargs` in situations where we do not know how many parameters to use, but `**kwargs` is based on a **key value** relationship. Did you remember this from somewhere because this is nothing but the dictionary data type we are talking about. Let's show it with an example.

```python
def printOutput(**kwargs):
    print(kwargs)
 
printOutput(number1 = 6, number2 = 9, number3 = 1) 
 
# {'number1': 6, 'number2': 9, 'number3': 1}
```

As you can see, it returned us a dictionary data type as output.

## Combining `*args` and `**kwargs`

Well, you have a question, can I use `*args` and `**kwags` parameters? Let's see now;

```python
def printOutput(*args,**kwargs):
    print(kwargs)
    print(args)
 
printOutput(6, 9, 1, number = 6, number2 = 9, number3 = 2) 
 
# {'number': 6, 'number2': 9, 'number3': 2}
# (6, 9, 1)
```

## You might also like

[Python Functions](https://baransel.dev/post/python-functions/)
[Python File Operations](https://baransel.dev/post/python-file-operations/)
[Python Set and Frozenset](https://baransel.dev/post/python-set-and-frozenset/)
[Python dictionary and dictionary methods](https://baransel.dev/post/python-dictionary-and-dictionary-methods/)
[Python tuple and tuple methods](https://baransel.dev/post/python-tuple-and-tuple-methods/)

> [Sign up to my newsletter!](https://baransel.dev/newsletter/).