teleren/devto huggingface dataset:
React Hooks Revisited: useState
Tags: react, javascript, webdev, tutorial
Published: 2020-09-07 17:34:21

---
title: "React Hooks Revisited: useState"
published: true
tags:
  - "react"
  - "javascript"
  - "webdev"
  - "tutorial"
series: React Hooks Revisited
canonical_url: https://ryanharris.dev/hooks-usestate/
---

One of the first hooks you'll probably encounter is `useState`, which replaces the `setState()` function used to update state in class components. The big difference here, however, is that `useState` allows function components to have multiple state values as opposed to one monolithic object. The snippet below illustrates this idea (don't worry about the syntax as we'll be covering that below):

```javascript
// Class component state
class Cart extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      apples: 10,
      oranges: 25,
      peaches: 40,
    }
  }
}

// Function component using hooks
function Cart(props) {
  const [apples, setApples] = useState(10)
  const [oranges, setOranges] = useState(25)
  const [peaches, setPeaches] = useState(40)
}
```

Not too crazy, right? In this example, all of our values are numbers but the value stored in `useState` can be any JavaScript type, including:

- Strings
- Booleans
- Objects
- Arrays
- Numbers
- `null`

### Anatomy of useState

Let's take one of the previous examples and look at it a bit more closely.

```javascript
const [apples, setApples] = useState(10)
```

First, let's look at what is happening on the right side of this expression. Here, we have the value of `10` being passed as the only argument to our `useState` hook. This sets its initial value to `10`.

On the left-hand side of the assignment, we are destructuring two values returned from `useState` as an array: `apples` and `setApples`. The first (i.e. `apples`), represents the current value of this state. In this case, the value would be `10`.

The second value in the array (i.e. `setApples`) is a setter function that allows you to update the value of `apples` by calling `setApples(200)`, which would update `apples` to be equal to `200`.

While you can technically give these setter functions whatever name you want, the common convention is to prepend the value's name with `set` (ex. `setApples`).

### In practice

To better illustrate the mental model of having multiple states instead of one, I built a simplified version of an e-commerce cart.

The first instance is a function component using three `useState` hooks to manage the quantity values of how many `apples`, `oranges` and `peaches` are in the user's cart. The second is a class component that is still using `setState()`.

As you can see, both components do the same things: keep track of how many of each item a user wants and increment/decrement that value based on button presses.

{% codesandbox hooksusestate-o64ve %}

Take a look at the code and see which one you prefer. While hooks may still be new to you, can you see any benefits from using them?
React Hooks Revisited: Introduction
Tags: react, javascript, webdev, tutorial
Published: 2020-09-07 17:33:06

---
title: "React Hooks Revisited: Introduction"
published: true
tags:
  - "react"
  - "javascript"
  - "webdev"
  - "tutorial"
series: React Hooks Revisited
canonical_url: https://ryanharris.dev/hooks-revisited/
---

> Hooks are functions that let you “hook into” React state and lifecycle features from function components ~ [React docs](https://reactjs.org/docs/hooks-overview.html#but-what-is-a-hook)

Introduced in <a href="https://github.com/facebook/react/blob/master/CHANGELOG.md#1680-february-6-2019" target="_blank">React v16.8</a>, the hooks API represents a change in how developers compose their components. Intended to compartmentalize blocks of functionality, they make reusing code across your application easier. They also mark a shift away from using `class` components and the use of lifecycle methods.

When hooks were first introduced at [React Conf 2018](https://www.youtube.com/playlist?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ), the React team explained the motivations behind them. Essentially, they wanted to solve many problems all at once:

1. It can be hard to re-use logic between components
2. Complex component files are huge
3. Understanding classes in JavaScript can be difficult to understand (for humans and compilers)

For a **much** more detailed explanation about the origin of hooks, make sure to check out the team's full talk featuring [Dan Abramov](https://overreacted.io/), [Sophie Alpert](https://sophiebits.com/) and [Ryan Florence](https://reacttraining.com/).

{% youtube dpw9EHDh2bM %}

### Goals for the series

When the hooks API moved out of beta, my team started using them almost immediately. However, most of the logic for the feature I was working on at the time was contained within class components still using lifecycle methods. When creating new components, I was using function components and hooks; however, the components usually weren't complex enough to leverage more than `useState` or `useEffect`.

Currently, I work in a codebase that was all written "post-class components" and I want to revisit (hence the title of this series) how they **all** work, as well as when to use them.

To do that, I've written an article about each hook in the standard React library. Each piece is linked below and will cover the hook in depth, including code samples illustrating how it works.
Hoisting
Tags: javascript
Published: 2020-09-07 17:27:17

Hoisting variables and function declarations in Javascript happens when the variable object is created for an execution context. *[See my last article to read about execution contexts.](https://dev.to/javila35/what-is-the-execution-context-in-js-in)* Before running any code your browsers [javascript engine](https://en.wikipedia.org/wiki/JavaScript_engine)  scans the current execution context for variable and function declarations. In plain terms, functions and variables are found before code is executed so javascript knows how to compute once it encounters them in execution mode. This process is known as hoisting by the javascript community.

### Function declaration hoisting
For each function declaration (`function myFunc()`) encountered, a property is created in the variable object that acts as a pointer to that function. This pointer allows you to call a function in your code before it has been declared. Try the code below in your console.

```javascript
myFunc(10);

function myFunc(num) {
   console.log(`Your number is ` + num)
};
```

It's worth mentioning that **function expressions are treated as variables**. Calling a function expression before the declaration will not run the function.

```javascript
runCode();

var runCode = () => {
   console.log("I'm a variable, that points to a function. I don't get defined until execution.")
}
```

### Variable declaration hoisting
Your browsers engine also looks for variable declarations. For each variable declaration, a property is created in the variable object and (depending on the keyword used) set to undefined.

#### var
Declaring a variable using `var` will set that variable to `undefined` when hoisting. This allows you to call your variable before declaring. Of course, the value will be `undefined`. Try the code below in your console.

```javascript
console.log(age);

var age = 23;

console.log(age);
```

#### const && let
Using `const` or `let`  to declare your variable will create the pointer like normal, but the variable will not be initialized *(aka set to `undefined`)*. If you call your variable you'll get an `Uncaught ReferenceError`.

```javascript

console.log( cat, dog );

const cat = "Ozma";
let dog = "Pippin";
```

___ 

#### What hoisting does not do.

> a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.
###### [From the MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)


###### *Cover image: just a cool photo found while searching hoisting on [creative commons](https://search.creativecommons.org/photos/c64dc13c-e745-42ad-b133-c1c622fad58a)*

###### *"Great hoists, Hulett and Brown electric at work" by Boston Public Library is licensed under CC BY 2.0*
𝗖𝗢𝗠𝗢 𝗰𝗼𝗿𝗿𝗶𝗴𝗶𝗿 𝗼 𝘀𝘁𝗿𝗶𝗰𝘁 𝗰𝗵𝗲𝗰𝗸 𝗱𝗼 𝗰𝗼𝗱𝗲 𝘀𝗻𝗶𝗽𝗽𝗲𝘁?
Published: 2020-09-07 17:24:19

[𝚃𝚈𝙿𝙴𝚂𝙲𝚁𝙸𝙿𝚃] [𝚃𝙸𝙿𝚂]
𝗖𝗢𝗠𝗢 𝗰𝗼𝗿𝗿𝗶𝗴𝗶𝗿 𝗼 "𝘀𝘁𝗿𝗶𝗰𝘁 𝗰𝗵𝗲𝗰𝗸" 𝗱𝗼 𝗰𝗼𝗱𝗲 𝘀𝗻𝗶𝗽𝗽𝗲𝘁 𝗮𝗯𝗮𝗶𝘅𝗼?
Um erro que de certeza todos iniciantes em desenvolvimento web passam é não 𝙧𝙚𝙛𝙪𝙩𝙖𝙧 𝙤 𝙘𝙤𝙢𝙥𝙞𝙡𝙖𝙙𝙤𝙧. Como assim?!

Muitas vezes quando recebemos response de uma chamada de REST, "nós" (beginners), esquecemos de realizar 𝒏𝒖𝒍𝒍 𝒄𝒉𝒆𝒄𝒌𝒔, quando a Promise dessa "response" é resolvida (...𝘳𝘦𝘴𝘰𝘭𝘷𝘦𝘥)

neste caso da imagem não é sobre promises, mas o objecto global seria equivalente (mas não exatamente) a uma.

Precisamos criar "Schemas" para o compilador entender do que se trata uma "Future": valor que está guardado mas está para chegar ao passo em que o "Event Loop" do Node volta nessa promise para proceder com o restante do algoritmo.

(っ◔◡◔)っ ♥ Solution ♥: no ECS6 do javascript existe o "Irrefutable pattern", (basicamente utilizar o "?" em objetos para sobrescrever o tipo antes que ele carregue de fato, devido a poderosa inferência de tipos do javascript). E que agora o typescript faz automaticamente com a opção de compilação "Strict Checks" ligada, isso ajuda muito pois ele automaticamente te diz se você fez cagada em não fazer "null checks" ou não. R: (event?.target?.value)
Notes on Angular development (1/4)
Tags: web, programming, angular, frontend
Published: 2020-09-07 17:23:40

This article consists of notes on Angular Basics, Debugging, Components, Data Binding, Directives, Services, Dependency Injection and Routing taken while doing the course Angular – The Complete Guide (2020 Edition) from Maximilian Schwarzmüller. I do want to do at least three more articles any time in the future covering the following respective aspects

1. Observables, Forms, Pipes, HTTP Requests and Authentication.
2. Dynamic Components, Angular Modules, Deployment, NgRX and Angular Universal.
3. Angular Animations, Offline Capabilities, Unit Testing and Typescript.

Read it here - https://weblog.tiagoperes.eu/notes-on-angular-development-1-4/
Howto: Wie man ein WordPress Bestellformular mit Online-Zahlung erstellt
Tags: wordpress, formular, wordpressplugins, wpforms
Published: 2020-09-08 09:06:42

---
title: Howto: Wie man ein WordPress Bestellformular mit Online-Zahlung erstellt
published: true
date: 2020-09-07 17:20:38 UTC
tags: Wordpress,formular,WordPressPlugins,WPForms
canonical_url: https://j0e.org/bestellformular/
---

![WordPress Bestellformular mit Bezahlmöglichkeit](https://j0e.org/wp-content/uploads/2020/09/wordpress-bestellformular.png)

    Ich zeige dir, wie du ein WordPress Bestellformular mit Paypal und Stripe erstellst. 5 einfache …

[Howto: Wie man ein WordPress Bestellformular mit Online-Zahlung erstellt](https://j0e.org/bestellformular/)
5 Programming Skills That Never Get Outdated
Tags: programming, productivity, career, codenewbie
Published: 2020-09-07 17:13:53

Technology will always move forward. No matter what stack or technique you are using at the moment will probably be replaced with another one soon. Therefore we must not stop learning, especially the special skills below that will never be outdated to be used as a software engineer.

### Math & Logic
It's true that you don't really have to be good at math to survive in the world of programming, but at the lowest level, we'll always need math, at least in the logic part. Besides, we know that sometimes we just can't avoid using combinations, recursions, permutations, etc. So it never goes out of style.

### Algorithms
Creating step-by-step procedures for desired goals and then executing it is an essential skill for fellow developers. Over time, you will face various cases that must be resolved. Therefore, continuing to practice algorithmic skills will go a long way toward solving more complex things.

### Problem Solving
The key to a programmer's job is to solve problems. You shouldn't raise other issues, such as bugs, when solving one. So the expertise to find the most efficient way of dealing with problems has always been a very important skill in this subject.

### Debugging
It's hard to have zero bugs when developing software, this makes debugging is important. Ability to locate the bugs, reproduce it in development-mode, and find a solution to handle the bugs will always be needed, regardless of the tech stack that you currently use.

### Learn New Language
Even though there are many programming languages ​​around, the concept will always be the same: as a tool of communication. Therefore, the ability to learn a new language is an important skill that must be possessed. With this, you can switch to any programming language easily.

## Conclusion
You can use any stack or language to code, but don't forget to remember to practice and improve the skills above. This will help you regardless of the technology you are currently using.
New project, what system?
Tags: question, project
Published: 2020-09-07 16:52:04

Hi guys,
I'm not exactly sure this is the right place to ask my question. If so, please excuse it.

I would like to renew the website for an old friend (painter). The website is now 4 years old and was created with Contao. The performance, the design and the maintenance of the content is a disaster. The website has 10-15 pages. The most important aspect will be that the images (approx. 60 - 70 images per page, max. 5 pages) are displayed in decent quality. The site should be available in German and English.

So far I only know myself with CMS such as Wordpress, Contao and Typo3. I'm pretty good at HTML and CSS now. JavaScript can get even better. I started the relaunch in Typo3. However, I have read more and more of JAMStack & Co. in recent months.

I would like to try something new, but to be honest, I am overwhelmed by what would be "the" right thing for this website. In the end there are a few pages of text and 5 galleries with 60 - 70 pictures each.

Or does someone know a great picture gallery? Maybe a simple grid as an overview for the "thumbnails" + PhotoSwipe for the large view?

What kind of systems do you use?

thank you
steevn
Mistakes I Made Releasing A Podcasting Book- The Building an Indie Business
Tags: podcast
Published: 2020-09-07 17:12:46

[Listen Here](https://baib-podcast.com/book-mistakes.html)

In this episode, I discuss mistakes that I made while releasing a book, what I should have done, and what I will do next time I release a product

**Show Notes:**

[Buy the book I wrote](https://openpodcast.xyz/)
[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)
Learning Vs Working
Tags: productivity, codenewbie, beginners, javascript
Published: 2020-09-07 17:05:31

Learning is a process of acquiring new skills in your portfolio. To learn anything one needs to devote dedicated time to understand the hooks of the skill. This is a passive style of learning where one understands how to pull out any task. 

Working is when we apply that learning to pull out that creates value for the other. Generally, people live with this mindset that they are learning to get a job so that they can have a decent amount of money to run their families.

These people do not like getting up. Show up in the job and they live for the weekends. This is a choice but people who practice this becomes miserable as they have to spend a huge amount of time in their workplace where they hate to be at. When the experience of life is miserable it reduces our productivity and living itself is a challenge.

If you have chosen a life of coding, you must be prepared with the set of expectations that comes along with that. Those who do not understand the expectations are living in their imaginary world and when their imaginary expectations are not fulfilled they start blaming the circumstances. You can be that guy but do you want to be that guy?

There is another way of life where you can love what you do. No, I am not talking about finding purpose or your passion. I have a simple workable plan for you. Try to give at least 1 hour to your learning every day. While you learn, apply that learning to create something, this is your practice. By practicing it every day will not only make it a habit but life works in compound interest. In the beginning, it may appear you are not growing but with consistent and persistent efforts you will not just good in your job but will add huge value. Things that may appear impossible to many will look like a child play to you.
Convert PDF Documents to MS Word, Excel, and PowerPoint using C# or Java
Tags: java, csharp
Published: 2020-09-07 16:44:08

As a file format enthusiast, I have seen various use cases where there is a need for PDF conversion to other formats such as DOCX, XLSX, PPTX and etc. programmatically. C# and Java being two of the most popular and widely adopted languages have been part of the popular search queries for PDF conversion. For the ease of other developers, I am listing down the articles that demonstrate how to convert PDF documents to other file formats using C# and Java code samples.

# Java
* [Convert PDF to MS Word Documents in Java](https://blog.aspose.com/2020/01/17/convert-pdf-to-word-doc-docx-in-java/)
* [Convert PDF to MS Excel Worksheets in Java](https://blog.aspose.com/2020/06/24/convert-pdf-to-excel-xls-xlsx-using-java/)
* [Convert PDF to MS PowerPoint Slides in Java](https://blog.aspose.com/2020/07/23/convert-pdf-to-powerpoint-ppt-pptx-using-java/)

# C#.NET
* [Convert PDF to MS Excel Worksheets in C#](https://blog.aspose.com/2020/01/03/convert-pdf-to-excel-in-csharp-net-pdf-to-xls-pdf-to-xlsx/)
* [Convert PDF to MS PowerPoint Slides in C#](https://blog.aspose.com/2020/03/18/convert-pdf-to-powerpoint-ppt-pptx-in-csharp-net/)
* [Convert PDF to MS Word Document using C#](https://blog.aspose.com/2019/11/24/convert-pdf-to-word-doc-docx-in-csharp-vb-net/)

Cheers!
Spring boot or Django?Why?
Tags: django, java, python, spring
Published: 2020-09-07 16:41:57

Being a tech enthusiast I always find myself exploring various areas of technologies.
Currently I am about to start backend development but I need to choose a path. Since Spring and Django both are used I am confused about choosing one of them. Tell me your opinions down in comments, why did you choose either of them? What mades you felt that? Do they need improvement?
Configure MappingJackson2MessageConverter's ObjectMapper
Tags: java, springboot, springcloud, womenintech
Published: 2020-09-07 16:40:58

In our service, we are expecting a `ZonedDateTime` data type from a queue (AWS SQS) message (that is subscribed to a AWS SNS) to be mapped in our POJO.

I kept getting this error
```
Caused by: org.springframework.messaging.converter.MessageConversionException: Could not read JSON: Cannot construct instance of `java.time.ZonedDateTime` (no Creators, like default construct, exist): no String-argument constructor/factory method to deserialize from String value ('2020-09-07T18:02:51.099+0000')
```

I thought that the solution was to override the `ObjectMapper` to be able to register the module `JavaTimeModule` so the message could be deserialized.
The solution was right but it still didn't solve the error.
I came to a realization (by the help of my coworker) that since we're using Spring Cloud to receive the message from the queue, messages that are received are handled by `MappingJackson2MessageConverter`.
https://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/jms/support/converter/MappingJackson2MessageConverter.html

The solution was to configure the `MappingJackson2MessageConverter`'s object mapper (see to it that your `ObjectMapper` has a `JavaTimeModule`), and set other configurations as well.

```
@Bean
public MappingJackson2MessageConverter mappingJackson2MessageConverter(ObjectMapper objectMapper) {
    MappingJackson2MessageConverter jacksonMessageConverter = new MappingJackson2MessageConverter();
    jacksonMessageConverter.setObjectMapper(objectMapper);
    jacksonMessageConverter.setSerializedPayloadClass(String.class);
    jacksonMessageConverter.setStrictContentTypeMatch(true);
    return jacksonMessageConverter;
}
```

Hope this post helped you in any way!
Banana Pi R64 + MTK 7615
Tags: bananapi, pantavisor
Published: 2020-09-07 16:40:56

With Banana Pi R64 another real beauty came on our plate.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pag7zpi3vdhhd391j5x2.jpg)

Can't wait to see this one in action ...
How to add basic localization to your HTML page with just jQuery
Tags: html, javascript
Published: 2020-09-07 16:31:21

---
title: How to add basic localization to your HTML page with just jQuery
published: true
description: Sometimes, we need simple solutions
tags: ['html','js']
//cover_image: https://direct_url_to_image.jpg
---

> I want basic translation on my single, static HTML page but I don't want to import no complex JS lib... What do I do?

## Very simple my friend

HTML structure
```HTML
<html lang="en">
  <body>
    <p lang="en">English please!</p>
    <p lang="fr">Hon hon croissant baguette!</p>
    <button type="button" lang="fr" data-toggle="lang" data-lang="en">English</button>
    <button type="button" lang="en" data-toggle="lang" data-lang="fr">Français</button>
    <script src="jquery.js"></script>
    <script src="language.js"></script>
  </body>
</html>
```

Go get jQuery [here](https://jquery.com/). If you don't want it I think you can make your own vanilla version of the script below.

The JS script
```JS
$('[data-toggle="lang"]').click(function(event) {
  event.preventDefault();
  $('html').attr('lang', $(this).attr('data-lang'));
});

// auto-detect the best lang setting
const params = new URLSearchParams(window.location.search);

if (params.has('lang')) {
  $('html').attr('lang', params.get('lang'));
} else if (navigator.language.match(/^(en|fr)/)) {
  $('html').attr('lang', navigator.language.substr(0, 2))
}
```

That's it. The HTML will now respond to the `lang` attribute in the `<html>` tag. You can control it adding `?lang=fr` to the URL or let the browser decide with `navigator.language`.

Enjoy!
Day 53: Trying out Relations in MongoDB + Design Implementation
Tags: 100daysofcode
Published: 2020-09-07 16:18:15

I was very excited today after reverting to mongodb and discovering this article on [How to Create Relationships with Mongoose and Node.js](https://dev.to/mkilmer/how-create-relationships-with-mongoose-and-node-js-with-real-example-43ei) I thought i was safe from relational databases until i read the comment section hours after attempting the relationship implementation in MongoDB. It's a sad day for me, the code is not working correctly and I am silently thinking about going back to typeORM. I think i finally figured out why most people dread back-end development. Databases are a whole new level of stress. 

####Brighter side
On the brighter side of my day, I'm almost done with the design implementation, css was very kind today. I discovered a filter property to reduce image brightness. 
```css
filter: brightness(50%);
```
That's it for _Day 53_