teleren/devto huggingface dataset:
Common mistakes to avoid when working with React
Published: 2023-05-02 13:35:48

React has become one of the most popular JavaScript libraries for building web applications. It's easy to get started with, and its **component-based** **architecture** makes it simple to create reusable and maintainable code. However, as with any technology, there are some common mistakes that developers new to React can make. In this blog post, we'll take a look at some of these mistakes and how to avoid them.

**1. Not Using Pure Components**

React has a feature called pure components, which are components that only render when their props change. By using pure components, you can optimize your application's performance and 
reduce  unnecessary rendering. If you're not using pure components, you might end up with unnecessary rendering, which can slow down your application

**2.Not Keeping Stateful Logic Out of Render Functions**

When building a React component, it's important to keep the render function pure. This means that you should avoid including any stateful logic in your render function. Instead, move your stateful logic to other lifecycle methods such as componentDidMount or componentDidUpdate.

**3.Not Using the Right Lifecycle Methods**

React has a number of lifecycle methods that you can use to perform certain actions at specific points in the component's lifecycle. For example, you can use the componentDidMount method to fetch data from an API when the component mounts. It's important to use the right lifecycle methods in the right situations to ensure that your application runs smoothly.

**4.Not Using PropTypes**

React has a feature called PropTypes, which allows you to specify the type of props that your component expects. This can help you catch errors early and ensure that your component is used correctly. If you're not using PropTypes, you might end up with unexpected behavior in your application.

**5.Not Handling Errors Correctly**

When building a React application, it's important to handle errors correctly. If you're not handling errors correctly, your application might crash or display incorrect information to the user. Make sure to handle errors gracefully and provide the user with helpful error messages.

**6.Not Using Key Props in Lists**

When rendering lists in React, it's important to use key props to help React identify each item in the list. If you're not using key props, React might have trouble rendering the list correctly, or you might end up with unexpected behavior.

**7.Not Following Best Practices**

Finally, it's important to follow best practices when building a React application. This includes using consistent naming conventions, keeping your components small and focused, and using appropriate state management libraries such as Redux or MobX.

**Conclusion**
React is a powerful library that can help you build robust and performant web applications. However, there are some common mistakes that developers new to React can make. By avoiding these mistakes and following best practices, you can build maintainable and high-performing React applications.
Automatic batching for better performance
Tags: react, performance, javascript, webdev
Published: 2023-05-02 13:20:08

### What is batching?

Batching is when React groups multiple state updates into a single re-render for better performance.

React has always combined two state updates that occur inside the same click event into a single re-render. You can notice that React only renders once for each click even though the state was set twice if you execute the following code:

```
export default function App() {
  const [count, setCount] = useState(1);
  const [flag, setFlag] = useState(true);

  function handleClick() {
    setCount((count) => count + 1);
    setFlag((flag) => !flag);
  }

  return (
    <div className="App">
      <h1>
        {count} is {flag ? "odd" : "even"}
      </h1>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}
```

### What is automatic batching?

Starting in React 18 with createRoot, No matter where they come from, all changes will be automatically batched.

This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events

Also If you need to re-render the component, you can disable automatic batching by using `flushSync`.

![Use flushsync to opt-out automatic batching](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1lj6cjtpfb26fj6xkcp.png)

That's all about React batching. 

If you want to discuss things related to Web Technology or want to explore more, You can always reach me out at dhruvangg@gmail.com OR [Twitter](https://twitter.com/champdecay) 
[LinkedIN](https://www.linkedin.com/in/dhruvangg/)
Microservice: Monitoring and Observability #7
Published: 2023-05-02 12:59:48

Monitoring is the process of collecting data about system performance and availability. This includes metrics, logs, and events that can be used to identify issues and monitor the state of the system. Monitoring allows teams to identify performance and availability issues, as well as trends over time.

Observability, on the other hand, is the ability to understand the behavior of the internal system based on its external signals, including logs, metrics and events. This involves collecting detailed information about the state of the system in real time, allowing operations and development teams to understand how the system is behaving and detect problems more quickly and effectively.

Observability is particularly important in microservice environments, where many services are interconnected and constantly changing. Observability allows teams to monitor the state of each service individually, as well as the system as a whole, to detect issues quickly and proactively respond to them.

Together, monitoring and observability are critical to ensuring the availability and performance of a microservices system, as well as allowing development and operations teams to better understand system behavior and identify areas for improvement.
be faster in Vim scrolling
Published: 2023-05-02 12:53:09



So, there is a problem in Vim that I noticed, but have nothing to do with Vim. And that's scrolling and navigation feels slow. It's because you need to increase keyboard repeat rate in settings.

For Linux it's in Keyboard setting Tab "Behaviour" "Typing settings"

and then "enable key repeat"

and what works for me (for now) is to have "repeat delay" of 300 ms (time for how long you press button, when it registers to 'repeat' that same key more .. (for more speed and responsiveness get this as low as you can withstand, depends a lot on the keyboard (if keyboard keys are sticky, you can't have that much speed, because keycaps take time to get back to their position)

"repeat speed" is on 70 for me. update: now it's on 100

So, that's a cool tip, if you feel Vim scrolling is a bit annoying.

So here is screenshot:

![](https://imgur.com/BN2FuOv.png align="center")
Use Cases for Hyperledger | Opening Up New Prospects i
Tags: hyperledger, development, services
Published: 2023-05-02 12:52:10

Hyperledger is a permissioned blockchain with modular architecture and versatile design apt for multiple enterprise use cases. It enables the development of systems that have superior levels of security, confidentiality, scalability, and performance.

Businesses are opting for the right [Hyperledger development company](https://blockchain.oodles.io/hyperledger-application-development-services/) to utilize the full potential of the blockchain. In this guide, we will discuss the latest Hyperledger use cases.

## Education and Training

The educational and training systems can be transformed by technology like Hyperledger. Colleges and universities are already using this blockchain to address several tasks, such as automating on-campus payments, authenticating academic credits, managing students' privacy and identity, and more.

_Learn [How Blockchain Can Drive Advancements in the Education Industry](https://blockchain.oodles.io/blog/driving-advancements-education-industry-blockchain-applications/
)_

## Invoice Processing

For large businesses, handling invoices is a difficult operation. For this process, several organisations choose the manual method. Software for centralised record-keeping does not, however, offer transparency.

Oodles can assist in developing such advanced blockchain solutions. Contact our [Hyperledger Blockchain Development Company](https://blockchain.oodles.io/hyperledger-application-development-services/
) to get started.

## Energy Management

The current energy market faces various issues. Usually, electricity providers take unnecessary time in the restoration process. Another problem is the centralization of energy. Not everyone can generate energy, and even if they can, they lack access to solutions to share generated energy with others.

Here, people can use Hyperledger for utility management. [IBM](https://www.ibm.com/case-studies/tennet
) has partnered with TenneT, Vandebron, and Sonnen to aim for electricity grid management in Germany and the Netherlands.

## Conclusion

Hyperledger Fabric offers many salient features, including shared recordkeeping, shared assets, provenance, and more. Its adaptability supports a variety of corporate use cases. Some of these use cases are already known to the public, while others still need to be developed. As more businesses recognize the value of the Hyperledger Fabric use cases, creative solutions will continue to develop. Have you found the above Hyperleger use cases relevant to your business?

Oodles can assist in developing such advanced blockchain solutions. Contact our [blockchain developers](https://blockchain.oodles.io/
) to get started.
php u apache
Published: 2023-05-02 12:52:01



```plaintext
pacman -S php php-apache
```

In `/etc/httpd/conf/httpd.conf`, comment the line:

```plaintext
#LoadModule mpm_event_module modules/mod_mpm_event.so
```

and uncomment the line:

```plaintext
LoadModule mpm_prefork_module modules/mod_mpm_prefork.so
```

> **Note:** The above is required, because [`libphp.so`](http://libphp.so) included with the package does not work with `mod_mpm_event`, but will only work `mod_mpm_prefork` instead. As an alternative, you can use `mod_proxy_fcgi`

\--&gt; To enable PHP, add these lines to `/etc/httpd/conf/httpd.conf`:

* Place this at the end of the `LoadModule` list:
    

```plaintext
LoadModule php_module modules/libphp.so
AddHandler php-script .php
```

* Place this at the end of the `Include` list:
    

```plaintext
Include conf/extra/php_module.conf
```

---

[vidi docs za jos](https://wiki.archlinux.org/title/Apache_HTTP_Server#PHP)
spotify install on linux
Published: 2023-05-02 12:51:40



I want spotify:

`yay -S spotify`

if there is problem with build:

go to: `.cache/yay/spotify`, and run: `makepkg --syncdeps --noprepare --install`

---

block ads ! &gt;:(

Install: `yay -S spotify-adblock`

And now you need to run: `spotify-adblock` instead of *normal* `spotify` (which have ads, no ! )

it's integrated, cool ..

---

[spotify](https://aur.archlinux.org/packages/spotify)

(check comments in AUR if there are more problems, I resolved with command to circumvent error when building.. )

[spotify adblock](https://github.com/abba23/spotify-adblock)

------------------------

## On Fedora



### flatpak
`flatpak install -y --from https://flathub.org/repo/appstream/com.spotify.Client.flatpakref`


To run Spotify, issue the following command.

`# flatpak run com.spotify.Client`
or
`# flatpak run com.spotify.Client --no-zygote`






####To block ads (flatpak ):

https://github.com/lnxfsf/SpotX-Linux

`bash <(curl -sSL https://raw.githubusercontent.com/SpotX-CLI/SpotX-Linux/main/install.sh) -P /var/lib/flatpak/app/com.spotify.Client/x86_64/stable/active/files/extra/share/spotify/`
Changing theme on my linux
Published: 2023-05-02 12:51:19



I have decided to change theme, yet again.

I used [Fluent gtk](https://github.com/vinceliuice/Fluent-gtk-theme) , [Orchis](https://github.com/vinceliuice/Orchis-theme)

For *Fluent* I used:

```plaintext
./install.sh -i manjaro --tweaks solid round noborder square solid
```

For *Orchis* I used:

```plaintext
./install.sh --tweaks black
```

For *Window Manager* I used: `Fluent-round-dark`

For *theme appearance* I used: `Orchis-Dark-Compact`

With it, I also updated *DockBarX* colors:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682013511038/261f9c47-1ede-4060-94c1-d19a27c5548b.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682013517226/e6bf2dc0-a064-461a-a3da-5f7113f027c6.png align="center")

And color for taskbar is: `#000000`

And also updated some of my windows:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682013926613/945d150b-1819-44cb-9a3d-f4bda595d6ed.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682013930793/243f6c22-ccf5-48bc-af96-4eaec63a67a2.jpeg align="center")

This is neat!

These themes follow *Material Design 3 ,* so it's really clean and cool
Install kubernetes on Arch
Published: 2023-05-02 12:50:57



Using root **#** for most of these commands, usual routine

```plaintext

pacman -Sy libvirt qemu ebtables dnsmasq

usermod -a -G libvirt $(whoami)
newgrp libvirt

systemctl start libvirtd.service
systemctl enable libvirtd.service

systemctl start virtlogd.service
systemctl enable virtlogd.service



pacman -S docker-machine

yay -S docker-machine-driver-kvm2
yay -S minikube kubetcl-bin
```

Installed?

```plaintext
minikube version
kubectl -h
```

## Kubernetes Initialization with Minikube

Initialize the single-node Kubernetes cluster `minikube start --vm-driver kvm2`

Kubernetes has been installed on the local computer, using minikube Check:

```plaintext
minikube status
kubectl cluster-info
kubectl get nodes
```

---

# Testing Deployments

test the kubernetes by creating a new deployment for Nginx web server

```plaintext
mkdir -p projects/nginx/
cd projects/nginx/
```

yaml file for deployment configuration: `vim nginx-deployment-service.yaml`

contents of yaml file:

```plaintext
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx-deployment
  labels:
    app: nginx
spec:
  selector:
    matchLabels:
      app: nginx
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
      - name: nginx
        image: nginx:1.14
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: nginx-service
  labels:
    run: nginx-service
spec:
  type: NodePort
  ports:
  - port: 80
    protocol: TCP
  selector:
    app: nginx
```

create the deployment: `kubectl create -f nginx-deployment.yaml`

check the Kubernetes deployment:

```plaintext
kubectl get deployments
kubectl describe deployments nginx-deployment
```

nginx-deployment on list ? if yes, ok.

check the Kubernetes service

```plaintext
kubectl get services
kubectl describe services nginx-service
```

check at what port 'nginx-service' runs on (PORT(S), NodePort) mine is: `31304`

Check the Kubernetes cluster IP and access it using curl command

```plaintext
minikube ip
curl -I http://192.168.39.165:31304/
```

If you get response from the Nginx web server, all good. You can access same address on browser, to get webpage..

---

## Access Kubernetes Dashboard

`minikube dashboard`

Open the Kubernetes dashboard using web browser

---

Done.
NeoVim , install Packer
Published: 2023-05-02 12:49:31



Create the plugins file:

```plaintext
touch ~/.config/nvim/lua/user/plugins.lua
```

Add the following to `plugins.lua`

```plaintext
local fn = vim.fn

-- Automatically install packer
local install_path = fn.stdpath('data')..'/site/pack/packer/start/packer.nvim'
if fn.empty(fn.glob(install_path)) > 0 then
  PACKER_BOOTSTRAP = fn.system({'git', 'clone', '--depth', '1', 'https://github.com/wbthomason/packer.nvim', install_path})
  print("Installing packer close and reopen Neovim...")
end

-- Autocommand that reloads neovim whenever you save the plugins.lua file
vim.cmd([[
  augroup packer_user_config
    autocmd!
    autocmd BufWritePost plugins.lua source <afile> | PackerSync
  augroup end
]])

-- Use a protected call so we don't error out on first use
local status_ok, packer = pcall(require, "packer")
if not status_ok then
  return
end

-- Have packer use a popup window
packer.init({
    display = {
      open_fn = function()
        return require('packer.util').float({ border = 'single' })
      end
    }
  }
)

-- Install your plugins here
return packer.startup(function(use)
  -- My plugins here
  use 'wbthomason/packer.nvim' -- Have packer manage itself
  use "nvim-lua/popup.nvim" -- An implementation of the Popup API from vim in Neovim
  use "nvim-lua/plenary.nvim" -- Useful lua functions used ny lots of plugins

  -- Automatically set up your configuration after cloning packer.nvim
  -- Put this at the end after all plugins
  if PACKER_BOOTSTRAP then
    require('packer').sync()
  end
end)
```

Require in `init.lua`

`require("user.plugins")`

**NOTE** (you will need to open and close Neovim at least once to install packer automatically)

## **Commands**

```plaintext
-- You must run this or `PackerSync` whenever you make changes to your plugin configuration
-- Regenerate compiled loader file
:PackerCompile

-- Remove any disabled or unused plugins
:PackerClean

-- Clean, then install missing plugins
:PackerInstall

-- Clean, then update and install plugins
:PackerUpdate

-- Perform `PackerUpdate` and then `PackerCompile`
:PackerSync
j
-- Loads opt plugin immediately
:PackerLoad completion-nvim ale
```

## **Where are my plugins?**

To see your plugins go to `~/.local/share/nvim/site/pack/packer/`

and your plugin will be under either `start` or `opt`

## **What is the difference between start and opt?**

Plugins in the `start` directory will be sourced automatically on Neovim startup

Plugins in the `opt` directory will be sourced usually on some autocommand

## **What is the compiled file do?**

The `packer_compiled.lua` found here: `~/.config/nvim/plugin/packer_compiled.lua`

It essentially optimizes the plugins startup time, it will also allow you to disable plugins without any startup penalty.
The Best Strategies to Slim Docker Images: How to Reduce Docker Image Size
Tags: docker, containers, devops, cicd
Published: 2023-05-02 12:49:15

Do YOU WANT to SLIM your Docker images? I wrote the following article, The Best Strategies to Slim Docker Images, using a Node.js application approach. **Give it a view and support my journey to becoming a technical article writer. **



Learn [tips and How to Reduce Docker Image Size by roughly 90.37% of its initial size](https://thriveread.com/slim-and-reduce-docker-image-size/).


Let me know your comment about it. I will appreciate it.
Move mouse with shift + ctrl + hjkl
Published: 2023-05-02 12:48:45



Ctrl + Shift + hjkl - Move mouse pointer

Ctrl + Shift + Enter - Mouse left click

Example:

Ctrl + Shift + h - left

Ctrl + Shift + j - down

Ctrl + Shift + k - up

Ctrl + Shift + l - right

# Linux

Remap the XFCE keyboard to move the mouse with Ctrl + Shift + hjkl, use the **xbindkeys** and **xdotool** utilities.

1\. Install **xbindkeys** and **xdotool**

2\. Create a configuration file for xbindkeys by running the following command in the terminal:

```plaintext
xbindkeys --defaults > ~/.xbindkeysrc
```

3\. Edit the ~/.xbindkeysrc file using your preferred text editor and add the following lines:

```plaintext
# Move mouse up with Ctrl + Shift + k
"xdotool mousemove_relative -- 0 -10"
    Control+Shift+k

# Move mouse down with Ctrl + Shift + j
"xdotool mousemove_relative -- 0 10"
    Control+Shift+j

# Move mouse left with Ctrl + Shift + h
"xdotool mousemove_relative -- -10 0"
    Control+Shift+h

# Move mouse right with Ctrl + Shift + l
"xdotool mousemove_relative -- 10 0"
    Control+Shift+l

"xdotool click 1"
  Shift+Control+Return
```

4\. Start xbindkeys by running the following command in the terminal

## make xbindkeys run on startup in xfce

1\. Open the XFCE Application Menu and go to "Settings" &gt; "Session and Startup".

2\. Click on the "Application Autostart" tab.

3\. Click on the "Add" button to add a new startup item.

4\. In the "Add Application" dialog, enter the following information:

• Name: xbindkeys

• Command: xbindkeys

• Click on the "OK" button to save the new startup item.

• Close the Session and Startup settings window.

\----------------------------------------------------------------

# Windows

AutoHotKey install program

create new script

```plaintext
#NoEnv
SendMode Input

; Remap Shift+Ctrl+hjkl keys to mouse movements
+^h::MouseMove, -10, 0, 0, R
+^j::MouseMove, 0, 10, 0, R
+^k::MouseMove, 0, -10, 0, R
+^l::MouseMove, 10, 0, 0, R

; Mouse click with Shift+Ctrl+Enter
+^Enter::Click
```

## run on startup

Place a shortcut to the script in the Startup folder

1\. Find the script file, select it, and press Ctrl+C.

2\. Press Win+R to open the Run dialog, then enter **shell:startup** and click OK or Enter. This will open the Startup folder for the current user. To instead open the folder for all users, enter **shell:common** startup (however, in that case you must be an administrator to proceed).

3\. Right click inside the window, and click "Paste Shortcut". The shortcut to the script should now be in the Startup folder.
Vim quick reference
Published: 2023-05-02 12:48:26

# Vim quick reference

[Vim quick reference](https://quickref.me/vim)

There you have all common and most productive commands.

Most important is to [master](https://www.youtube.com/watch?v=wlR5gYd6um0) its language.

Vim is Vi Improved.

So it means, you only need what Vi has to be productive enough. (things that Vi have, is what you absolutely need to master, as that alone, will increase your productivity and is whole purpose of Vi )