teleren/devto huggingface dataset:
Zustand: Yet another state management library for react
Tags: javascript, react, beginners, tutorial
Published: 2022-03-10 14:31:37

When it comes to state management library the first thing that comes to mind is Redux and I think redux does the job pretty well but it becomes overkill for small projects. To fix this issue there are lots of libraries and one of them is Zustand. Let's try to understand why and when to consider zustand.

## What is Zustand?
Zustand is a lightweight, fast, scalable, and open-source state management library for react based on hooks with no boilerplate. It works on the same flux principles as redux. As of today it has more than 350000 Weekly downloads.

## Why Zustand?
So you might be thinking isn't it the same as redux, What's the difference then? Here's some key features which make it different.

1. Simple API (With almost no boilerplate)
2. Lightweight (Almost 1.5kb in size)
3. Supports asynchronous action out the box
4. Un-opinionated

It also uses some performance optimisation techniques like memoization. Let's understand this with an example.

Let’s assume we have a state model `{ apples: 1, oranges: 1 }` and two component one uses `apples` and another uses `oranges`. Now in case of context api or redux any one of these state changes will re-render both components but in case of Zustand it will render only component which is consuming the particular state.
```javascript
function Apples() {
  // This component will *only* render when the amount of apple changes
  const apples = useStore(state => state.apples)
  return <div>{apples}</div>
}
```

Now that we know it is better for some use cases like small applications which need small data to be stored globally let's take a look at its implementation.

### Adding zustand to our project

1. Create a store.

```javascript
import create from 'zustand'

const useStore = create(set => ({
  bears: 0,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}))
```

2. Start accessing the data inside store.

Getting total bear counts.
```javascript
function BearCounter() {
  const bears = useStore(state => state.bears)
  return <h1>{bears} around here ...</h1>
}
```

Calling increment function.
```javascript
function Controls() {
  const increasePopulation = useStore(state => state.increasePopulation)
  return <button onClick={increasePopulation}>Add bear</button>
}
```

Handling async actions
```javascript
import axios from "axios";

const useStore = create(set => ({
  bears: 0,
  getMoreBears: async () => {
    const response = await axios.get('api endpoint')
    set({ bears: response.data })
  }
}))
```

That's pretty much it. In just a few lines of code, you can setup your global state.

Hope it will save some of your time. Let's catch up in the next one until then goodbye.
Clientes com medo de freelancers?
Tags: braziliandevs, career, freelancer
Published: 2022-03-10 14:21:46

Clientes com medo de freelancers?

Eu sou programadora e sempre estou atendendo clientes para desenvolver seus novos sites em Wordpress com e-commerce e blog. Conversando com uma cliente eu fiquei sabendo que duas de suas amigas passaram por problema com desenvolvedores independentes. Uma não entendia o que tinha sido feito, queria realizar alterações e estava brava que não conseguia de jeito nenhum. Já a outra não tinha autonomia para adicionar seus produtos no próprio e-commerce. Isso é um problema sério que eu trouxe para entendermos melhor o que está acontecendo e pensar o que pode ser feito para evitar esse tipo de situação.

**Clientes de programadores independentes estão ficando traumatizados e com muito medo de fazer negócio com esse tipo de profissional (freelancers)**. Isso não é bom, porque nem todo mundo quer trabalhar em empresa.

Sim, eu sei que existem clientes que não querem nem saber o que acontece. Mas perceba que esses são a minoria. **Se o cliente não entende o que vai ser feito e o porquê, ele pode naturalmente desenvolver um medo.** O medo do desconhecido. É nossa responsabilidade como desenvolvedores independentes previnir que esse tipo de situação aconteça. Isso pode ser fácilmente resolvido se o responsável se dispor a explicar o procedimento e deixar tudo bem descrito no contrato.

Além do mais, se for o caso, **criar uma analogia com coisas bem conhecidas** pelas pessoas, isso **facilita o entendimento**. Por exemplo, eu cito que a hospedagem é igual a um computador, o site precisa ficar guardado em algum lugar e o computador é esse serviço que hospeda o site. Imagina se precisássemos deixar o computador ligado 24 horas por dia e com bastante segurança, quais os custos que teríamos? Por isso pagar uma hospedagem é necessário. Então de um jeito simples, com algo muito conhecido que é o computador, eu fui capaz de explicar o que é a hospedagem que a maioria das pessoas não entendem.

Entretanto, uma outra coisa é ter clareza no processo. **Os clientes precisam saber o que vai acontecer depois de eles terem assinado o contrato**, também precisam saber o que vai acontecer, em quantas etapas são e quanto tempo vai durar o desenvolvimento. Entretanto, é claro que não precisamos compartilhar nossa metodologia interna de trabalho ou em qual hora do dia vamos trabalhar. Mas precisamos sim descrever o processo, tal como:

Fase 1: Coleta de informações
Fase 2: Pesquisa e desenvolvimento do protótipo
Fase 3: Apresentação do protótipo
Fase 4: Início do desenvolvimento
Fase 5: Apresentação da entrega final
Fase 6: Configuração de servidores

Concluindo, tendo atenção a esses detalhes, mostra que você está interessado em resolver o problema do cliente da melhor forma. Antecipar as dúvidas do cliente e estar preparado com uma resposta é **sinal de atenção ao trabalho** que estamos prestando. É muito importante estarmos concientes do serviço que estamos prestando. Aproveita e compartilhe nos comentários como você lida com este tipo de demanda, pode ajudar outras pessoas.
Healthcare & life sciences software solutions development
Tags: healthcar, lifescienc, development, softwar
Published: 2022-03-10 14:12:27

   What have you heard about Healthcare & life sciences software solutions development ? 
   Improve the effectiveness of remote care, enhance patient experience and outcomes, and boost IoT devices care performance with a intelligence-driven approach to healthtech software development 
   Visit [my site](url=https://chudovo.com/industries/healthcare/) and find out
Function or Class Component in React App?
Tags: devops, discuss, react, tutorial
Published: 2022-03-10 14:04:36

For a while, now, I have been having this debate over why most of the React solutions available are developed using class components.
&nbsp;

> Is it that class components are superior than function components?

---

## What's your take on this?

---

### Reference:

https://dev.to/colocodes/react-class-components-vs-function-components-23m6
Umbraco 10 - DropDownList with text and values
Tags: umbraco, dotnet, dotnetcore, plugin
Published: 2022-03-10 14:02:58

Antoher plugin for Umbraco that provides an Umbraco Drop Down List with Text and Values.

There is an included PropertyValueConverter to provide you with the value of the selected item in the CMS. 

## Nuget

`Install-Package punkDropDownList`

https://www.nuget.org/packages/punkDropDownList/

## Compatibility

- Umbraco 9+

## Credits
I used uDynamic's dropdownlist property editor to form the basis of this propertyeditor.

https://github.com/Alain-es/uDynamic/tree/master/uDynamic/App_Plugins/PropertyEditors/DropdownList

## Screenshots
  
### Property
![Property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3s54x4jiaqxmp2nkm7r.jpg)
 

### DataType
![DataType](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fg6w7gwsbxtz5pyzcejw.jpg)

## github
https://github.com/garpunkal/punkDropDownList
Umbraco 10 - Thumbnail ListView
Tags: dotnet, javascript, cms, umbraco
Published: 2022-03-10 13:59:25

I created a plugin for Umbraco that allows you to use a ListView with the following extras:

- A image with the field alias: (thumbnail, image, logo, listingImage) 
- A name field from a linked document.

It works with all the original functionality of ListView, including selections, sort and search. 

Just create a new listview in Umbraco, add your custom fields for images or linked relations then use this path for a view: 

`/app_plugins/punkThumbnailListView/punkthumbnailListView.html`

It should display your images and relational titles in the listview. 

## nuget 
`Install-Package punkThumbnailListView`
https://www.nuget.org/packages/punkThumbnailListView/

## Compatibility
Umbraco 9+

## Screenshots
  
### ListView
![List View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52f4z1dtq5nw92niyzra.jpg)
 
### DataType
![Data Type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmdck3wk7wingy3vl9i4.jpg) 

## github:
https://github.com/garpunkal/punkThumbnailListView
AngularJS Developer Hourly Rate in India
Published: 2022-03-10 12:43:25

AngularJS is a popular open-source JavaScript framework that helps build smooth and easy-to-use websites and applications. The number of AngularJS developers in India is increasing on a daily basis and not only that, the number of companies that are recruiting AngularJS developers is also increasing worldwide. The reason for this increase is that there are a lot of opportunities for the development of websites using AngularJS. 

The demand for the AngularJS developer hourly rate in India is increasing at such a fast pace that it has become one of the most popular and highly demanded JavaScript frameworks in web development.

AngularJS helps you create dynamic web applications very easily. You will also be able to save a lot of time as compared to traditional PHP or HTML coding.

So, get started with hiring a dedicated AngularJS developer from India at $15-$40 per hour.

Depending on the experience and skills of the developer the per hour cost to hire a dedicated AngularJS developer will vary. You can hire Dedicated AngularJS developers from **WebClues Infotech**. Their developers are highly skilled and have relevant experience in developing custom mobile app solutions.
Merging Deep Object Literals In JavaScript
Tags: javascript, programming, webdev
Published: 2022-03-10 13:54:56

I was looking to merge a couple of deep Object Literals (only one level deep for both objects) but then had a brain fart and realized that I cannot simply merge them like we may think using the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals)  `{...obj1, ...obj2 }` as this only supports a single level of the object.

```js
const obj1 = {
  test: {
  	a: 1,
    b: 1
  }
}

const obj2 = {
  test: {
  	b: 2,
    c: 3
  }
}

const bad_merge = {
  ...obj1,
  ...obj2
}

console.log(bad_merge);


// 🔴 Results -- Whoops, Looks like the 2nd object replaced the 1st object, hmmm…
{
  test: {
    b: 2,
    c: 3
  }
}

```

Since we know that we have only a single level deep, we can restructure our merge like we have below; however, this is a fairly simple modification, but if you have objects you need to merge that have a various set of nested levels, then you may want to reach for [lodash.merge](https://www.npmjs.com/package/lodash.merge)

```js

const good_merge = {
  test: {
    ...obj1.test,
    ...obj2.test
  }
}

// ✅ expected. That’s better…
{
  test: {
    a: 1,
    b: 2,
    c: 3
  }
}

```

Hope this helps you the next time you’re needing to merge some objects. Welcome any comments or issues you had with merging objects together. 

Happy Coding!
Brian
Paracetamol.js💊| #75: Explica este código JavaScript
Tags: javascript, spanish, webdev, beginners
Published: 2022-03-10 13:47:39

## **Explica este código JavaScript**

```js
const numeros = [1,2,3,4,5];
numeros.length = 0;
console.log(numeros); // ?
```

A. `1`
B. `0`
C. `[]`
D. `[1]`

Respuesta en el primer comentario.

---
Gaming Dashboard UI
Published: 2022-03-10 13:46:20


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4oxivkrslf069da0bm6n.jpg)

#gaming #dashboard #ui #design

Design Tools: XD, Adobe Illustrator

----------

🔥Potfolio: https://designcoder.netlify.app

📩e-mail: syed.simanta10@gmail.com

----

ui, ui design, vue, react, js, javascript, ux, tailwind, bootstrap, front end, wordpress, website animation, website, crypto, crypto trading
Compilation Issue with Angular 9.1.x
Tags: angular, typescript
Published: 2022-03-10 13:43:43

Hi Guys,
I'm facing a very strange issue and I hope you will be able to help to figure out what is causing it.

I have 1 Angular application cloned in 2 different folders on my localhost pc.

each folder get a different branch 
I use WinMerge to compare the folders and only code modifications are shown as differences but applications settings (angular.json + Package.json are identical)

One application is compiling with success
The 2nd one gets tons of errors like these ones:

`432         point[1].reduce((comulation, current) => comulation.concat(current), [])
                     ~~~~~~
src/app/core/core.service.ts:277:32 - error TS2339: Property 'rowIndex' does not exist on type 'unknown'.

277             let row = s.rows[c.rowIndex];
                                   ~~~~~~~~
src/app/core/core.service.ts:284:44 - error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'Control'.
  Type '{}' is missing the following properties from type 'InstructionNoteControl': controlId, name, _type, isInFirstCol, and 16 more.

284             row.columns = row.columns.push(c);
                                               ~
src/app/core/core.service.ts:319:18 - error TS2349: This expression is not callable.
  Type '{}' has no call signatures.

319         point[1].reduce((comulation, current) => comulation.concat(current), [])
                     ~~~~~~
src/app/core/core.service.ts:841:5 - error TS2322: Type 'unknown[]' is not assignable to type 'number[]'.
  Type 'unknown' is not assignable to type 'number'.

841     return arr.toArray();
        ~~~~~~~~~~~~~~~~~~~~~
src/app/store/reducers/report-manager.reducer.ts:660:45 - error TS2339: Property 'forEach' does not exist on type 'unknown'.

660     state.getIn(['currentReport', 'items']).forEach((page, pageIndex) => {
                                                ~~~~~~~
src/app/store/reducers/report-manager.reducer.ts:716:99 - error TS2339: Property 'map' does not exist on type 'unknown'.

716   on(unverifyAllSections, state => state.updateIn(['currentReport', 'items'], pages => ([...pages.map(page => ({
                                                                                                      ~~~
src/app/store/reducers/report-manager.reducer.ts:763:10 - error TS2339: Property 'columns' does not exist on type 'unknown'.

763         .columns.filter(c => c._type !== ControlModelEnum.DropZone).size;`

I saw on internet lots of posts mentioning the Unknown versus any variable types but why it would work in one application and not in the other one ?

It's like if for one of the application, all "unknown" type are considered as "any" and in the second one, "unknown" are really unknown. As both applications are code identical and with same settings, how on earth is it possible ?

Anyone would have an idea what could couse this kind of behavior ?
Thanks in advance
-Vince
The correct way to pass Methods as Event Handlers in Javascript
Tags: javascript, beginners, programming
Published: 2022-03-10 13:35:15

_Those parentheses make a BIG difference and change the result_

One of my colleagues wasn't receiving the expected parameters in a JS method the other day. He was **trying** to make a third-party Vue.js plugin work in a project (as we all do with fluctuating confidence).

Let's go through a simple example with vanilla Javascript but the rule applies everywhere (including your favorite JS framework).

```js
document.getElementById("just-do-it").addEventListener("click", spreadHappiness());

function spreadHappiness() {
    console.log('You are awesome');
}
```

What do you think will happen when a user clicks on that button?

Guessed it?

Nothing!

![Nothing Happened](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jrzbe82exc4dofgqjjx.jpg)

The method gets called upon page load and nothing happens when the button is clicked. Hmm...

Did you notice that we have put the parentheses `()` after method name `spreadHappiness()` in the first line?

It is that classic *call-by-reference* vs *call-by-value* thing.

That line should have been written like this (with parentheses removed):

```js
document.getElementById("just-do-it").addEventListener("click", spreadHappiness);
```

And with that, clicking on that button would log the statement in the browser console as expected.

Now, did you know that the event handler receives an object based on the [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) interface as a parameter? This means you can use the Event metadata in your method. Like so:

```js
function spreadHappiness(event) {
    console.log(event.type); // click
}
```

So, you should skip those parentheses when passing a method name as an event handler in most cases. When one needs to get the event handler dynamically, calling another method and returning it makes sense.

### Closing

In short, putting those parentheses after the method name while specifying the event handler **is not** an optional thing. It changes the result.

> *method():* Executed instantly and the return value used as the event handler.
> 
> *method:* Used as the event handler and it receives the parameters when called.

Again, *Doing a method call* and *passing the method reference* are two different things and developers, especially beginners, should be aware of this difference.

Do any of your friends need to know this? Share this article with them to make their debugging life easier.
Where to put the js script tag
Tags: javascript, html, webdev, tutorial
Published: 2022-03-10 13:24:59

## Intro 

While using External JavaScript file there are 2 ways by which you can attach the file to html document

1. In the head tag
1. Befor body tag is closed

Now **according to how you attached your javascript file in html document, it may behave differently** like html tag not getting selected.

**The preferred way of attaching js file is to _add to end, before the body tag is closed_, let's see why.**

## Why use it at end?

The index html file in your project will be executed first in the project and there a hierarchy of html elements will be created which will be executed top to bottom. 

### Attaching it in head tag

When you attach your js file in the head tag the js file will be running before your html is rendered and that means whenever you'll be trying select an element in javascript it will give error because that element is not rendered and javascript file can't find it. _It is like using a variable before it was defined._


### Attaching it before body tag is closed

So when you attach your js file at the end of the document, every element will be rendered first and at last the javascript file will be executed and that means it will have access to every element in your html document.

>There are ways to make it work perfectly even after attaching it into head tag, but personally i feel like this is more cleaner way.

___

**If you found the content i share useful than share it with your developer friends and also follow me on [Instagram](https://www.instagram.com/gaurav_vaala/) and [Twitter](https://twitter.com/gaurav_vaala)**
Generate Qrcode Using Python
Tags: python, webdev, beginners, programming
Published: 2022-03-10 13:20:14

Generate Qrcode using qrcode python library 

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

{% embed https://www.youtube.com/embed/DqFffLEgJ3k %}

**1- Import qrcode library**

```
import qrcode
```
**2- Declare url variable** 

```
url = "www.dev.to"
```
**3- Generate Qrcode**

```
code = qrcode.make(url)
```
**4- Choose Filename & Save**

```
code.save("my_qrcode")
```
Restore Photoshop defaults
Tags: restore, photoshop, default
Published: 2022-03-10 13:14:52

Photoshop is an image and photo editing program with countless tools and functions. Furthermore, these options and functions can be customized to facilitate the workflow of users. However, these customizations at some point can be a problem for the user since it may happen that we do not find a specific option due to this customization. This is why some Photoshop users at a certain point in time may be interested in resetting Photoshop tools and features to the way they were “factory”.


Photoshop tools
All Photoshop tools and functions are displayed and configured in a specific way by default , that is, when we install the program on our Windows 10 or MacOS computer, each function is configured specifically or a certain tool is selected by default. .

However, over time, these tools or functions are used by the user and therefore the next time we use it, parameters such as size, hardness or even the preselected tool may be different from the default after the first installation of Photoshop. . It should also be noted that sometimes the default settings can be changed by mistake due to the express desire for customization.

Be that as it may, many users after continued use of Photoshop decide to reset it to default values so that all the tools and functions are displayed as they would be by default after installing Photoshop on your Windows 10 or MacOS computer.

That said, here's a step-by-step guide on how to reset Photoshop tools and features to program defaults for Windows 10 or MacOS :

How to restore a specific Photoshop tool. (Windows and macOS)
Open the Photoshop program.

Select the tool in the panel on the left side of the interface.

Once selected , click with the right mouse button on the icon of said tool in the toolbar at the top of the window.

This will show a context menu in which you will have to select the option: Restore Tool

From this moment on, all values and parameters of this tool will be reset to default