teleren/devto huggingface dataset:
React useState - Quick guide
Tags: react, javascript, webdev
Published: 2021-11-08 20:26:21

# What is useState?
useState it's a react built in hook that allows you to create and handle component's state.

# How it works
To use this hook we just pass the initial state value and the hook will return us an array with two elements:
1. The current state.
2. A function to update the component's state.

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

React components state can be anything we may need to be: a string, array, objects you name it. We can also declare as many states as we may need on each component.

To set the initial state we can set it directly or use a function result.

# With examples everything is always more clear
Imagine we have a component that renders a button and a counter showing how many times the button has been clicked.

This component may be something like this:

```javascript
const App = () => {
  let counter = 0;

  const clickHandler = () => {
    counter++;
    console.log(counter);
  };

  return (
    <div className="container">
      <h1>Total clicks: {counter}</h1>
      <button onClick={clickHandler}>Click!</button>
    </div>
  );
};
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tknv2kbvpq8rs7bli5p5.png)

This component it's rendering a button and a counter and each time we click on the button prints on the console the counter value, however the Total clicks title it's stuck on the initial value that it's 0. Why? This is because variables only changes on the memory and has no sync with the view but we can solve this issue using the useState hook to update the counter:

First we need to import the useState:

```javascript
import { useState } from "react";

const App = () => {
  // Initialize the components state on 0
  // useState hook returns the initial value (counter) and the function to update it (setCounter)
  const [counter, setCounter] = useState(0);

  const clickHandler = () => {
    console.log(counter);
    // state can never be modified, just overwritten
    setCounter((prevState) => prevState + 1);
  };

  return (
    <div className="container">
      {/* Now when clicking on the button the state gets updated and so does the counter */}
      <h1>Total clicks: {counter}</h1>
      <button onClick={clickHandler}>Click!</button>
    </div>
  );
};
```
When we are using `useState` the view shows the current value each time the state gets updated.

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

In react states can never be modified, must be overwritten. 

In situations like the counter example where you need the previous state to set the new one you have to pass a function that receives the previous value and returns the new one. On the counter example the new state will be always the previous state + 1. 

So variables on react are pointless? NOT AT ALL. I recommend you to use variable for anything that not needs to be rendered on the view as each time the states changes react re-renders the components to keep the view and the state up to date.
Password manager housecleaning
Tags: privacy
Published: 2021-11-08 20:02:48

---
title: Password manager housecleaning
published: true
tags: ["privacy"]
canonical_url: https://miku86.com/2021-04-06/
---

Last year, I migrated all my passwords from Firefox to [KeePassXC](https://en.wikipedia.org/wiki/KeePassXC) to have my passwords just saved locally, not in the hands of a third party.

Yesterday, I had a look into the database - 115 entries.

So looking at this data, I saw a lot of unused stuff, e.g. Zoom, some email accounts, some old tools and so on.

So I decided to do some housecleaning by deleting some of these accounts.

Before deleting the account, I set the account email address to something like `zoom-2021-04-06@mydomain.com` to have an unique address for each account.

Why? Because I hope to see, which company sells/leaks my email and/or doesn't delete it at all. This company will go to my personal "black list" of not trustworthy companies.

Some companies are already very sneaky:

- clicking on the deletion button doesn't work, even in different browsers
- the captcha isn't solvable, even after trying it for 10 minutes (no joke!)
- trying to [nudge me](https://en.wikipedia.org/wiki/Nudge_theory) with a blue, bold button to cancel the deletion and a just slightly-visible button to accept the deletion

Whatever, I managed to delete 13 accounts.
Taskforce 4.0 week 2.
Published: 2021-11-08 19:45:46

Hello Good people✌!

Please allow me to take you through the second week in taskforce 4.0. 

This week was really cool and amazing, during the first week, it was really hark to work in new environment with new faces, but as we had an opportunity to introduce ourselves to the big team of Awesomity lab and Code of Africa (CoA) and vice-versa, In this week I was somehow more comfortable.

During this week the taskforce team had a chance of working with the CTO of Awesomity lab who helped us to understand some crucial topics in Software Engineering.
those topics were:
* **Git workflow**
* **Software documentation**
* **DevOps**
* **Software containerization**

Not only technical skills have we acquired but we also had a chance to improve our soft skills with the help of different facilitators in different sessions.
* **Presentation skills**   _with Anja_
* **Values**   _with Axel_
* **Critical**   _thinking with Olaf_

Here there is a secret:🤐
The most wonderful part of the week comes on Friday after Weekly demo.
If you keep it a secret and tell it to no one🤐, next week I will tell you why everyone really like that part.

See you then!😉
Discussion is ephemeral
Tags: productivity, discuss, watercooler, writing
Published: 2021-11-08 19:39:42

Divide social activity in digital spaces into two categories: _discussion_ and _reference_.

Most activity is _discussion_: news or blog updates, shared links, forum discussions, microblogging hot takes, comments, private or group messages, livestreaming, newsletters. They speak to a particular moment in time.

Examples of _reference_ can include: wikis, git repositories, project documentation, question/answer sites or FAQs, indexes. These resources are not directly concerned with specific moments in time — they attempt to be organized according to context and relevance.

_Discussion_ begins to fade the moment it is published. It can be temporarily revived (bumped) by some kind of activity or update, but this itself is a form of _discussion_ that begins to fade on arrival.

The effect of this 'fading' is that whatever was gained through discourse becomes more difficult to find with time, as newer content takes precedence — the reverse-chronological organization of most technology makes things [designed to disappear](https://rosano.hmm.garden/01etag49zpy2jz472n6zyba998), and digital systems generally do not remind us that there is a cost to keeping things forever. [Technology is inconsiderate](https://rosano.hmm.garden/01etwewt0hsf6z5cgm3j1w4409).

Combat this ephemerality by

-   capturing ideas into _reference_ as often as possible
-   deliberately making older content less accessible
-   warning about any false sense of findability

Something needs to be lost, there must be some cost to keep things around. As an example, an [engineer at Stripe talks about](https://www.derrickreimer.com/essays/2019/05/17/im-walking-away-from-the-product-i-spent-a-year-building.html) how

> they automatically delete chat messages older than a few weeks to discourage relying on it for long-term archival. In retrospectives, team members often reflect on whether they chose the right medium (email, chat, or forum) for various conversations.

_Discussion_ is necessary for exploring possibilities without friction. _Reference_ gives longevity to the results.

Compare the possibilities enabled by these scenarios

| discussion | reference |
| --- | --- |
| send a quote of an article to a friend or post it on your timeline | compile similar resources and build a larger idea from small disparate pieces |
| search for an idea by scrolling through a reverse-chronological archive | browse by context and stumble upon something related but unexpected |

The [Wikum](http://wikum.csail.mit.edu/) project is a web-based platform that integrates discussion and collaborative summarization.

---

Follow my journey on [Twitter](https://twitter.com/rosano) (or via the [mailing list](https://rosano.ca/list))
Why we use useEffect? and  useEffect Hook more general knowledges
Tags: webdev, react, beginners, javascript
Published: 2021-11-08 19:31:52

# Why we use useEffect?
# -----------------------------------------------
Ans: 
We use useEffect when we need to handle "side works/side effects" of related state. It happens after component rendering. Good Example, 
See the axios api here, we use this external api axios and its code in useEffect hook function. 

Don't forget these,
- side works = side-effects.
- "axios" is an external api.
- "useEffect" related to passing response for side-effects after rendering component. 
- "dependency" of useEffect make sure that application side-effect need to act for given depency. 



# useEffect Hook more general knowledges
# -----------------------------------------------


- Perform side effects in function components.
      - Using Effect  
      - Data Fetching
      - Manually changing the DOM
      - API Calling 
      - Managing the outside world data
      - Timer setting
      - Replacement of  
            - componentDidMount(), 
            - componentDidUpdate(),
            - componentDidUnmount()          

- useEffect(callback, [dependencies array]) is the hook that manages the side-effects in functional components. 
   - Callback argument is a function to put the side-effect logic.
   - Dependencies is a list of dependencies of your side-effect:
         - If we don’t pass dependency variable then useEffect hook will only called 
            when our component is rendered.  
         - If we pass an empty array to useEffect then our component will be rendered for first time 
            when a component is rendered. To re-call useEffect hook we have to refresh our page. 
         - If we pass dependencies to useEffect hook,  
            then useEffect will executed every time passed variable data is updated.  
            
- useEffect will run after every render.
- Need to Use multiple useEffect for explaining multiple effects. 

# -----------------------------------------------
Best of Luck all of you.....

Thanks to my loving teachers,
Sumit Saha, HM Nayem, Vishwash, Anisul Islam, Rabbil Hasan Rupom
We all make mistakes. We're only human
Tags: product, testing, programming, startup
Published: 2021-11-08 19:28:33

Building anything technical is hard.

Even if you’re just a developer working on your own, there are a ton of moving pieces.

We're connecting increasingly complex systems, and our end users come in every shape and size imaginable. It's many hands, in many pots.

With so much complexity and the added pressure of trying to ship early, we make mistakes.

We misunderstand requirements. Code gets sloppy. We’re off in our vision or miss business requirements. Plans go sideways.

These mistakes add up. They compound, and they result in buggy, poorly working and at times unsecure products.

There has to be a better way.

We have to properly and fully test what we build.

#### Software failures in the US cost the economy USD 2.08 trillion in 2021.

Can you afford to contribute to that cost?

### Welcome to the world of software testing
Software (or app) testing is how we check whether our finished product matches the expected requirements and ensures that our software is bug-free and performs well.

Whether you're a solopreneur wanting to introduce more rigorous testing methodologies, or a growing business hiring a QA team, it's clear that development projects of all sizes can benefit from a defined QA process.

Software testing can also provide an objective, independent view of your software to allow you to appreciate and understand the risks in what you’re looking to build.

### The cost of poor testing
Need more convincing on the value of testing?

To start, software defects can damage a brand's reputation — leading to frustrated and lost customers.

For startups and products just trying to get off the ground, bugs and incomplete features can mean the difference between a killer launch or the scrap heap.

Small dev teams have the magical ability to address issues swiftly, but your time is so much better spent building new than fixing old.

Focus on testing and stay focused on the new.

Continue reading: https://testingmonkey.io/blog/importance-of-testing
How to be a successful software engineer? [TaskForce V4.0 BootCamp Week Two] 
Tags: awesomitylab, taskforce, codeofafrica
Published: 2021-11-08 19:26:54

Many people ask themselves that becoming a world classic software engineer is about knowing how to code only! In reality, becoming a competent software engineer requires much knowledge. Before that, I am thankful that #Awesomity Lab and #Code of Africa make me experience the necessary skills to become a competitive software engineer. Some of these skills are development operations (DevOps), Git workflow, software documentation, problem-solving, and software containerization; the required skills are so many, but these shown above are helpful in software development. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t87g4flnq33nsrjge14.png)
Everyone can wonder what DevOps is! DevOps is a group of practices, tools, and cultures that automate and integrate the processes between development and operation teams to deliver products on time and efficiently. In DevOps, we structure a project by planning what we will do, how, and what we will test to ensure we are providing a working and productive product. After that operation team communicate with the development team to work together, where and how we will deploy a product so that everyone can access it appropriately; then after a product must be monitored by the operation team. 

As a classic world software developer, you will need to share your source code and review other source code among your teammates; in that case, git will help you do so. You will follow the best practice by branch naming, conventional message committing, formulated pull request describing what the PR does, testing it manually, and merge restrictions. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cy4ckyih11duf275cz0n.PNG)
We also need to document software in other to help someone will use it. Software documentation is categorized into Development documentation, end-user understanding the product, and assisting customer and support how to use the product.

Software containerization is a process of packaging all codes and dependencies together to make software libraries and dependencies required to run executable codes by increasing software product's security, portable, and re-versioning our software. 

To make all these steps successful, it is all about critical thinking and problem solving, understanding a question and thinking about what to do and so that no longer facing that again! I recommend you to use these steps in other be a successful world-class software engineer.

I hope you enjoyed the blog! let see what the next weeks will bring :)
Thank you for reading !!
Why useState??? and Some important basic things of React useState Hook,I have noticed....

Tags: webdev, react, beginners, javascript
Published: 2021-11-08 19:21:57

# ----------------------------------------------- 
- "useState" related to taking/getting a state and updatingState function for any updating state.  
               Ex: const [count,setCount] = useState(0); 
- We can use any "premetive data" or "array object" for useState argument (argument not parameter)
- "premetive data" is more preferable for beginner
- "array object" is difficult to implement and understand the code for a beginner.
-  Implemented argument in useState function," "premetive data" or "array object" " return two this such an state and state updating function. 
Ex: const [count,setCount] = useState(0); //Here , "count" is a state and "setCount" is a state updating function. "0" is a premetive data.  


# ----------------------------------------------- 
Best of Luck all of you.....



Thanks to my loving teachers,
Sumit Saha, HM Nayem, Vishwash, Anisul Islam, Rabbil Hasan Rupom
5 important things to keep in mind as a programmer
Tags: beginners, programming
Published: 2021-11-08 19:02:55

Here is a list of 5 important things to keep in mind when starting programming.

## 1- Languages are just tools

The most common mistake for a beginner - even for some experienced developers - is focusing too much on languages/frameworks rather than solving problems. It's a good thing to be a "Jack of all trades" but keep in mind that it will get you nowhere if you know all languages/frameworks in the world.
Pick a random one, learn to solve problems with it. Believe me, at the beginning it doesn't matter which programming language you are using. They all make sense.
I am not saying it's bad to learn a new language but make sure to focus on how you can use the language to solve some real-life problems.
Remember, programming is not about what language you use. It's about how you think.

## 2- Understand the underlying concepts

Don't just focus on solving a problem and then jumping directly to the next one. Programming is not just a typing statement. You have to pay attention to what you're doing while you are doing it - [care about your craft](https://www.youtube.com/watch?v=17vTLSkXTOo).
Also, you have to understand the programming core skills - the fundamentals. Programming can be a highly competitive industry, so it's advisable to highlight your skills.

## 3 - Complex Is Better Than Complicated

Don't be afraid of having a complex solution to a problem. It's true that Simple Is Better Than Complex but usually, complex problems require complex solutions. Just don't make it complicated - make it understandable.

## 4-  Never Panic

Some people panic when they cannot solve a problem the first time. Don't be like that, even if the deadline is close. Most of the time the solution is around. Otherwise, you can find an alternative that might work. Make sure you understand what you are doing. Most importantly, never ever copy/paste code from StackOverflow without a complete understanding of it.

## 5- Build a routine of continuous learning

Things evolve rapidly in programming. So you better focus on continuous learning.
Reading can be a great way to improve yourself and get up to date. It's a regular investment in your knowledge portfolio. But you should critically analyze what you read. Do not believe everything.
Simular un array asociativo(map) con tipos dinámicos en Golang
Tags: go, spanish, espaniol
Published: 2021-11-08 18:57:04

Seguramente si venís de lenguajes de programación con tipado dinámico como Javascript o Python, te preguntaste como es posible guardar en un map distintos tipos de datos incluso sin saber que tipo de dato estás guardando. La respuesta es que si nos llevamos solamente por las reglas que Golang nos impone para programar, esto no se podría ni debería hacer. Pero por obvias razones en algún momento vas a necesitar hacerlo, y para lograrlo hay que utilizar interfaces vacías.

¿Por qué utilizar interfaces vacías? Porque estas pueden almacenar cualquier tipo de dato, tan simple como eso.


Vamos a ver un ejemplo sencillo:

```golang

claveValor := make(map[string]interface{})
claveValor["uno"] = 4
claveValor["dos"] = false
claveValor["tres"] = "Esto es una cadena"
claveValor["cuatro"] = 20.54

fmt.Println(claveValor)

=> map[cuatro:20.54 dos:false tres:Esto es una cadena uno:4]
```

Por lo que ya sabes, sino sabes que tipo de datos vas a almacenar en un map, o simplemente te es indiferente, cuando  lo declares especificale que e tipo de valor es una interface y te olvidas del problema.

Incluso si queremos ponernos más sucios, podemos declarar que tanto clave como valor serán interfaces, entonces da igual todo:

```golang
claveValor := make(map[interface{}]interface{})

claveValor[5] = 4
claveValor[true] = false
claveValor["tres"] = "Esto es una cadena"
claveValor["cuatro"] = 20.54

fmt.Println(claveValor)
=> map[true:false 5:4 cuatro:20.54 tres:Esto es una cadena]
```

Porsupuesto que esto es solo para mostrar lo que se puede logar, no creo que sea muy recomendable hacer esto último.
Boilerplate Blog
Published: 2021-09-14 22:13:00

###**Similarities:**
There were a decent amount of similarities found between the boilerplates in Angular, React, VueJS, and StencilJS frameworks.  One similarity I noticed initially was the composition and organization of folders contained within the boilerplate.  For instance, they were mostly organized containing similar files/folders like .editorconfigs and package.jsons.  The README.md files were also formatted in a similar way, with an explanation presented at the top, and example code/instructions presented towards the bottom.  They also had licenses that elaborated to the user the functions in which they are permitted to use the product, and a disclosure of which person/people are granting these permissions.

###**Easiest DX:**  
I believe the easiest DX to use would be React.  I feel as though it looks somewhat easier to employ regularly and has a large community presence.  The large community presence will be useful for research and tutorials so I may learn React quicker and easier than other frameworks that have less of a presence.  Although React primarily uses Javascript and JSX, I believe that Javascript will be useful for me to learn and help me in other areas besides developing in React.  If I was to develop an app tomorrow, I would most likely use React because Angular has a steep learning curve whereas React has an easier learning curve and is quicker to learn.  Also, React has more improved mobile cross-platform framework solutions compared to Angular.  

{% github kxm5816/boilerplates no-readme %}
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5u2cuh5sgor4194l6bod.jpeg)
{% github PaddysHub/boilerplates no-readme %}

###**React Boilerplate Github:**
{% github react-boilerplate/react-boilerplate no-readme %}