teleren/devto huggingface dataset:
Compare Props in React Functional Components.
Tags: react, props, useref, hooks
Published: 2021-04-28 17:33:20

NextProps in React Functional Components 

Back in the day, when I was young (LOL), we use react 15, it was more verbose, convoluted, and lacking today's marvelous upgrades, but even when we have some live cycles you really know when to use each of them, besides the most important one "componentDidMount", there was another really important cycle to track props values "componentWillReceiveProps".

Back then you were able to compare the new props values against the current props values like

```javascript
componentWillReceiveProps(nextProps) {
 if(nextProps.count !== this.props.count) {
  // Do something here since count prop has a new value
 }
}
```

So let's say you need to do something like this in React 17 today, to skip an apollo query or to avoid any kinda side effects inside your components?

The first thing that may cross your mind is to set some states inside your component to track the props values using a useEffect hook:


```javascript
function ComponentGettingProps({count, ...restProps}) {
 const [localCount, setLocalCount] = React.useState(0)
 React.useEffect(() => {
  if(count === localCount) {
   // count prop has the same value
   setLocalCount(count)
   // ... do what ever you need to do if the count prop value is the same
  } else {
   // count has a new value, update the local state
   setLocalCount(count)
  }
 }, [count])
 return (...)
}
```

Although this works, it may get pretty dirty in with the time since you may be checking several props and the logic block may get hard to read.

So, is there any other solution for the case? The answer is yes! Looky for us we can create a custom hook using one of the greatest react native hooks out there: "useRef()"

Let's build our custom hook "usePrevPropValue"

```javascript
function usePrevPropValue(value) {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}
```

Magically these hooks will return the previous count value in every re-render, the reason why this happens is that the stored value of current in ref get saved but not re-computed in every render, therefore the value you are returning is the previously stored one instead of the current prop value :), pretty super amazing, this is a vivid example that the lack of reactivity is also great.

Now let's use our hook


```javascript
function ComponentGettingProps({count, ...restProps}) {
 const prevCount = usePrevPropValue(count)

 return (
    <div>
      New: {count} Prev: {prevCount}
    </div>
  );
}
```

Please notice that in practice we just get rid of defining a new state here, but in real life, we also get rid of re-render this component when updating the state we are not using any more :)

This is the live example in case you need the whole picture
https://codesandbox.io/s/naughty-snow-uoo48?file=/src/App.js

I hope this article helps you in your next project and thanks for reading. See ya in the next one!
Spring Bean Scopes – Singleton and Prototype
Tags: springbean, scope, singleton, prototype
Published: 2021-04-28 17:23:55

https://grokonez.com/spring-framework/spring-bean-scopes-singleton-prototype

Spring Bean Scopes – Singleton and Prototype


Spring Bean Scopes helps you control the scope of the objects which are created from bean definition. This approach is wonderful because you can choose the scope by configuring bean instead of working at Java class level.

The Spring Framework supports 7 scopes, but this tutorial introduces you 2 of them: <strong>singleton</strong> scope and <strong>prototype</strong> scope. The others will be discussed in next article.

<!--more-->
<div id="tuttoc" class="jsa-toc"></div>

<div id="tutcontents">
<h2>I. Technology</h2>
- Java 1.8
- Maven 3.3.9
- Spring Tool Suite – Version 3.8.1.RELEASE
- Spring Boot: 1.4.0.RELEASE
<h2>II. Overview</h2>
<h3>1. Goal</h3>
To build a simple application that shows you the way <strong>singleton</strong> scope and <strong>prototype</strong> scope act and the difference between them.
<img class="alignnone size-full wp-image-1184" src="https://grokonez.com/wp-content/uploads/2016/09/springbeanscope-xgoal.jpg" alt="springbeanscope-xgoal" width="700" height="363" />
<h3>2. Project Structure</h3>
<img class="alignnone size-full wp-image-1182" src="https://grokonez.com/wp-content/uploads/2016/09/springbeanscope-project-structure.jpg" alt="springbeanscope-project-structure" width="286" height="167" />
- <strong>Customer</strong> and <strong>Name</strong> are Classes for Java Objects.
- <strong>SpringBeanScopeApplication</strong> is <strong>SpringBootApplication</strong> that includes function <strong>main</strong> to get Beans and run commands to illustrate example.
- <strong>bean.xml</strong> contains all important bean configuration.
<h3>3. Step to do</h3>
- Create Spring Boot project
- Create DataModels
- Create Spring Bean Configuration File
- Add commands to SpringBootApplication Class
- Run Spring Boot Application &amp; Enjoy Result
<h2>III. Practice</h2>
<h3>1. Create Spring Boot project</h3>
Open <strong>Spring Tool Suite</strong>, on <strong>Menu</strong>, choose <strong>File</strong> -&gt; <strong>New </strong>-&gt; <strong>Spring Starter Project</strong>, then fill each fields:
<img src="https://grokonez.com/wp-content/uploads/2016/09/springbeanscope-startproj.jpg" alt="springbeanscope-startproj" width="600" height="429" class="alignnone size-full wp-image-1185" />

Click <strong>Next</strong> and <strong>Finish</strong>. Spring Boot project will be created successfully.

https://grokonez.com/spring-framework/spring-bean-scopes-singleton-prototype

Spring Bean Scopes – Singleton and Prototype
Passing Hostname To Docker Services
Tags: notes, docker, linux, hostname
Published: 2021-05-18 19:55:55

---
title: Passing Hostname To Docker Services
published: true
date: 2021-04-28 17:00:00 UTC
tags: Notes,docker,linux,hostname
canonical_url: https://clavinjune.dev/en/blogs/passing-hostname-to-docker-services/
---

Passing hostname to docker container won’t work

```
environment:
  - "HOST_HOSTNAME=$HOSTNAME"
```

Do this instead

```
environment:
  - "HOST_HOSTNAME={{ .Node.Hostname }}"
```

It will fetch the hostname from docker placeholder

[Reference](https://docs.docker.com/engine/reference/commandline/service_create/#create-services-using-templates)
rToken Management (rAsset App)
Published: 2021-04-28 16:56:11

StaFi has been working tirelessly on making sure their users are very much in control of their assets so they released the rToken management app.

               HOW rASSET APP WORKS
 ​rAsset App is the dashboard product for rToken holders. So all the rToken holders could use rAsset App to manage their rToken assets, like knowing the amount of rTokens in the wallet, total values of held rTokens and redeemable native tokens etc..

At the same time, the cross-chain App rBridge has been integrated into rAsset App. So from now, the rToken holders could use the “Swap” function of rAsset App to swap rTokens between StaFi chain and Ethereum, then leverage “Trade” function of rAsset App to trade the ERC-20 wrapped rTokens on Uniswap directly.

StaFi will keep updating the rAsset App to make it more and more friendly UI/UX for all rToken holders.

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


About StaFi Protocol
StaFi is the first DeFi protocol unlocking liquidity of staked assets. Users can stake PoS tokens through StaFi and receive rTokens in return, which are available for trading, while still earning staking rewards. FIS is the native token on StaFi Chain. FIS is required to provide security to the network by staking, pay for transaction fees on the StaFi chain, and mint & redeem rTokens.
Website: www.stafi.io
Twitter:@Stafi_Protocol
Telegram Chat: https://t.me/stafi_protocol
Telegram Announcements: https://t.me/stafi_ann
Discord: https://discord.com/invite/jB77etn
Forum：https://commonwealth.im/stafi
How to compare accented strings in JS
Tags: javascript
Published: 2021-04-28 16:52:03

It's a very common scenario when you have to compare strings ignoring their case. The usual approach is to convert both of them to upper or lower case:

```javascript
const a = 'JavaScript';
const b = 'JAVASCRIPT';

console.log(
  a.toLowerCase() === a.toLowerCase()
); // true
```

But what about when comparing accented strings (with diacritics) like Café, Jalapeño or résumé ? Here's where the `localeCompare` method comes in handy. From [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare):

> The **`localeCompare()`** method returns a number indicating whether a reference string comes before, or after, or is the same as the given string in sort order.

A number `0` means that strings match.

```javascript
const a = 'Café';
const b = 'cafe';

console.log(
  a.localeCompare(b, 'en', { sensitivity: 'base' })
); // 0 (strings match)
```

The second argument is the locale and indicates the language, whose formatting conventions should be used. You can omit it by providing a value of `undefined`.
Dealing with objects in javascript
Tags: algorithms
Published: 2021-04-28 16:47:54

in javascript, we deal with objects a lot for example in reactjs there is no way you can implement react application without knowing how to manipulate objects. Also, there can be a possibility where you can use objects in sorting data from the database. even some styling frameworks use objects
here I am going to show some ways of using and manipulating objects.
we are going to use the example below:
*var Fiacre={
'firstname':'Fiacre',
'lastname':'Giraneza',
'sex':'Male',
'height': 1.75,
'weight':65,
'favoriteColor':'brown'
}*
###To create new field###

you may need to add field in object
*Fiacre.skills='IT';
//another way
Fiacre['skills']='IT';
console.log('object with added field in Fiacre object:',Fiacre)*

###to update field###
*Fiacre.weight=70;
console.log('updated object:',Fiacre)*

###to read all keys###
*console.log('object keys:',Object.keys(Fiacre))*

###to read all values###
*console.log('object values:',Object.values(Fiacre))*

###to read one field###
*console.log('firstname field:{',Object.keys(Fiacre)[0],':',Object.values(Fiacre)[0],'}')*

###to read one key###
*console.log('firstname key:{',Object.keys(Fiacre)[0],'}')*

###to read on value###
*console.log('firstname value:{',Object.values(Fiacre)[0],'}')
console.log('forth way to read firstname:{',Fiacre[Object.keys(Fiacre)[0]],'}')

console.log('third way to read firstname value:{',Fiacre['firstname'],'}')
console.log('forth way to read firstname value:{',Fiacre.firstname,'}')*

###to delete field###

*delete Fiacre.favoriteColor;
delete Fiacre['sex'];
console.log('object without favoriteColor and sex:',Fiacre)*

###delete all values in fields###

*Object.keys(Fiacre).forEach(function(key){
    Fiacre[key]='';
})
console.log('empty values in object:',Fiacre)*
###to delete all field###
*Object.keys(Fiacre).forEach(function(key){
    delete Fiacre[key]
})
//or
Fiacre={};
console.log('empty object:',Fiacre)*

###to sort objects in an array based on certain property###

you may need to sort objects in array which has same value for certain property.for example:

*let arrayOfObjects=[{
    'id':21058,
    'full name':'Fiacre Giraneza',
    'gender':'male'
},
{
    'id':20938,
    'full name':'Pacifique Tuyizere',
    'gender':'male'
},
{
    'id':20430,
    'full name':'Clemence Nyiramariza',
    'gender':'female'
},
{
    'id':20311,
    'full name':'Celine Mugeni',
    'gender':'female'
}
];*
    
*const groups = arrayOfObjects.reduce((s, item) => {
      const group = s[item.gender] || [];
      group.push(item);
      s[item.gender] = group;
      return s;
    }, {});
    //if you display groups it will come as an object which has arrays inside
    console.log(groups)*

thank you Happy coding!!
Spring Bean Scope Annotation: @RequestScope | @SessionScope | @ApplicationScope
Tags: springboot, annotation, requestscope, sessionscope
Published: 2021-04-28 16:47:45

https://grokonez.com/spring-framework/spring-bean-scope-annotation-requestscope-sessionscope-applicationscope

Spring Bean Scope Annotation: @RequestScope | @SessionScope | @ApplicationScope

Spring Framework new release 4.3 make some Web Improvements. Among that, it simplifies way to implement Bean Scopes (Request, Session and Application scopes) using Annotation: <strong>@RequestScope</strong> | <strong>@SessionScope</strong> | <strong>@ApplicationScope</strong>. They are only valid in the context of a web-aware Application.

Related Articles:
- <a href="https://grokonez.com/spring-framework/spring-bean-scopes-singleton-prototype" target="_blank">Spring Bean Scope - Singleton and Prototype</a>
- <a href="https://grokonez.com/spring-framework/spring-core/spring-bean-scope-using-annotation-singleton-prototype-request-session-global-session-application">Spring Bean Scope using Annotation – Singleton, Prototype, Request, Session, Global Session, Application</a>

<!--more-->
<div id="tuttoc" class="jsa-toc"></div>

<div id="tutcontents">
<h2>I. Technology</h2>
- Java 1.8
- Maven 3.3.9
- Spring Tool Suite – Version 3.8.1.RELEASE
- Spring Boot: 1.5.1.RELEASE
<h2>II. Overview</h2>
<h3>1. Goal</h3>
To build a simple application using <strong>@RequestScope</strong> and <strong>@SessionScope</strong> annotation that shows you the way <strong>request</strong>, <strong>session</strong> act and the difference between them.
Beside, we also have a lean introduction of <strong>@ApplicationScope</strong>.
<h3>2. Scope Annotation</h3>
With old approach, we usually annotate the class which bean has scope by:
<pre><code class="language-java">
@Scope(value = [scope], proxyMode = ScopedProxyMode.TARGET_CLASS)
</code></pre>
- Proxy Mode <em><strong>TARGET_CLASS</strong></em>: is used for creating AOP proxy of the bean. We must do it when injecting short lived bean scope (<strong>request</strong>, <strong>session</strong>...) to long lived bean scope (<strong>singleton</strong>, <strong>prototype</strong>) or injecting <strong>prototype</strong> to <strong>singleton</strong> scope.
- We have some type of <strong>scope</strong>:
+ <strong>singleton</strong>: only one instance is created (default scope)
+ <strong>prototype</strong>: new instance is created everytime prototype bean is referenced.
+ <strong>request</strong>: one instance for a single HTTP request.
+ <strong>session</strong>: one instance for an HTTP Session
+ <strong>globalSession</strong>: one instance for a global HTTP Session. Typically only valid when used in a <em>Portlet</em> context.
+ <strong>application</strong>: Scopes a single bean definition to the lifecycle of a ServletContext (Only valid in the context of a web-aware Spring ApplicationContext).

https://grokonez.com/spring-framework/spring-bean-scope-annotation-requestscope-sessionscope-applicationscope

Spring Bean Scope Annotation: @RequestScope | @SessionScope | @ApplicationScope
Python Type Annotations
Tags: python, programming, datascience, analyst
Published: 2021-04-28 16:44:31

{% medium https://towardsdatascience.com/type-annotations-in-python-d90990b172dc %}

[Friend Link](https://towardsdatascience.com/type-annotations-in-python-d90990b172dc?sk=29bc29ab5478a842363963b421781b47)

Type annotations - also known as type signatures - are used to indicate the datatypes of variables and input/outputs of functions and methods.

In many languages, datatypes are explicitly stated. In these languages, if you don't declare your datatype - the code will not run.

Type annotations have a long and convoluted history with Python, going all the way back to the first release of Python 3 with the initial implementation of function annotations.

Type annotations in Python are not make-or-break like in other languages (like C). They're optional chunks of syntax that we can add to make our code more explicit.

Erroneous type annotations will do nothing more than highlight the incorrect annotation in our code editor - no errors are ever raised due to annotations.

So, if type annotations are not enforced, why use them?

Well, as we touched upon already - declaring types makes our code more explicit, and if done well, easier to read - both for ourselves and others.
Different Types of Mobile Apps for your business app development
Published: 2021-04-28 16:42:49

An Application is the digital face of your brand/business and it has to be powerful”.

Type of application a business owns directly affects its reach in the market. For instance, some applications are limited to a single OS restricting business reach to specific OS users while some are flexible with both Android and iOS which means more audience can engage and use the app. Prior to building an application, the business owner needs to be clear with what type of application goes well with his business goals?

For those planning to own an app, this article will help you narrow down your search to the best application type useful for your business’s growth. Hopefully, by the end of this article, you will come up with a concrete decision. Stay Tuned..!!

Highlights:

-> Native Applications – OS centric applications

-> Web Apps – Web pages using features and functions of an application.

-> Hybrid Applications – The combination of Native and Web Apps

Read full post [Different Types of Mobile Apps?](https://www.vervelogic.com/blog/different-types-of-mobile-apps/)
We are looking for Technical consultant have knowledge of Web development experience.
Published: 2021-04-28 16:29:06

I run a software and consumer electronics outsourcing business with Europe Developers. We’ve developed many mobile and web projects and are now planning to expand to the US.

While we have a skilled team with great technical expertise, our level of spoken English isn't quite good enough to interview US clients

To address this, I am seeking a partner who will be able to complete technical interviews with potential US clients. Is this something you’d be interested in?
How To Choose Which JavaScript Libraries To Use (Part 2)
Tags: javascript, webdev
Published: 2021-04-28 16:28:08

**Choosing the right tools is one of the most important decisions that you'll have to make when you start a new JavaScript project.**  In this four-article series, I'll give you my tips and tactics so you can choose the best libraries for your JS project.

## Are New Libraries Better Than Old, "Obsolete" Ones?

The JavaScript ecosystem moves extremely fast. And we, JS devs, always have the temptation or the pressure to always choose the most recent libraries over older ones. We are hooked to the hype. But that's not always the best solution.

As developers, we all know that no QA process can spot all the bugs in a piece of software. There will always be bugs that reach production. But over time, these bugs are discovered and the team eventually fixes them.

New libraries, precisely because they are new, have little time running in production. And it means that many of these bugs are still there. Of course, older libraries have bugs too, but **younger libraries are generally more bug-prone.**

Also, **with older, established libraries, it's easy to find help if you run into problems.** For example, if you build a SPA with React and you find a problem, you'll find literally tons of free information online, and it will be way easier to find possible solutions. The same situation will be harder if you use Svelte, for example.

However, this doesn't always mean that older libraries are always better. Mootools is way older than React, but nobody would use Mootools now. Innovation exists, and it's essential. But choosing always the new and shiny is a mistake too.

In the next article of this series, I'll talk about how to evaluate libraries according to their documentation.

---

p.s. Did you like what you've read? Every week I send an email with free tips and insights to become a better JavaScript dev. If you're interested, [click here to subscribe](https://nicozerpa.com/newsletter/).
Welcome Thread - v122
Tags: welcome
Published: 2021-04-28 16:23:42

---
title: Welcome Thread - v122
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Star Trek Welcome](https://media.giphy.com/media/J6PSuK1xecAuFXeRUy/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Spa for the fyi (my first api project)
Published: 2021-04-28 16:20:10

Creating a Single page application sounds very easy when reading the steps for it ,but when putting code together for it I quickly seen how tedious it truly was. I first begun planning my project by writing down notes and bookmarking google links that explained the process of it. A few of my coding friends had got together and studied the functions and helped put code together that at least showed a blank slate. The challenges I faced was getting my button to work for my SPA it was truly nerve racking as the days got closer to Sunday. I had to change api's several times because of Qauth and because as I wrote the functions I seen how hard it was going to be to try in get a reaction from site so I just went with the same topic but different end points. My Spa was about an anime generator that gave out different quotes every time you pressed the next button. The code I had to perfect and to get things working was basically on in the JavaScript and after I posted this code after the api link to basically get the topics of the objects which is important when declaring a function everything that is an object must be the same as the html to get the information and button to work. (code below)
 
//author, character, quote//
const makeQuoteDiv = (quote) => {
    const div = document.createElement('div')
    const p = document.createElement('p')
    const h3 = document.createElement('h3')
    const h4 = document.createElement('h4')
    h3.textContent = quote.anime
    p.textContent = quote.quote
    h4.textContent = quote. Character
    div.appendChild(h3)
    div.appendChild(p)
    div.appendChild(h4)
    const quote Container = document.getElementById('quote-container');
    quoteContainer.innerHTML = ""
        // quoteContainer.appendChild(div);
    return div

The lessons I truly learned was to take it one function at a time and to remember what you named certain things! Always make it memorable.