teleren/devto huggingface dataset:
Understanding React Hooks: A Deep Dive
Tags: react, javascript, webdev, learning
Published: 2023-08-28 20:27:39

React hooks have become an essential part of modern React development, providing a powerful way to interact with React's internal mechanisms. In this article, we'll explore what React hooks are, how they work, and why they've revolutionized the way we build React applications.

**What Are React Hooks?**

At their core, React hooks are specialized functions built into React that grant us direct access to its internal operations. Think of hooks as an API that allows us to tap into React's inner workings—like creating and accessing state within the fiber tree or managing side effects effectively.

Hooks empower us to perform tasks such as manual DOM selections and more. They also introduce a unified naming convention—notice the common "use" prefix in hook names like useState and useEffect. This consistency enables us to encapsulate and reuse non-visual logic seamlessly.

**The Power of Hooks**

One significant advantage of hooks is their ability to give function components state ownership and the capability to manage side effects at various lifecycle points. This functionality was previously exclusive to class components before React v16.8 introduced hooks.

**Exploring Common Hooks**

1. **useState**: Easily manage state within functional components.
2. **useEffect**: Handle side effects and lifecycle events efficiently.
3. **useReducer**: Alternative state management solution for more complex scenarios.
4. **useContext**: Access context values without nesting components.

**Unveiling Lesser-Known Hooks**

While some hooks take the spotlight, there's a treasure trove of lesser-known hooks waiting to be discovered. Some of these include useRef, useCallback, useMemo, useTransition, and more. These hooks provide specialized functionalities for various use cases, from optimizing performance to managing references.

**Navigating Hook Usage: Rules to Remember**

1. **Location Matters**: Hooks must be called at the top level of a functional component. Avoid using them within conditionals, loops, nested functions, or after an early return. This rule ensures hooks maintain a consistent order—critical for their proper functioning.

2. **Contextual Calling**: Hooks can exclusively be used within React functions, meaning they're suitable for both function components and custom hooks. If you're using React's ESLint, it automatically enforces this rule, highlighting any violations.

**In Conclusion**

React hooks have transformed the way we approach React development, offering a clean and effective way to manage state, side effects, and more within functional components. By understanding their nuances and following the rules of usage, you'll unlock the true potential of React hooks in your projects.

Thank you for investing your time in reading this article. If you found this content valuable, consider liking, commenting, and sharing it. Your support means a lot.

Stay tuned for more insightful articles on React and web development!
pyaction 4.22.0 Released
Tags: github, docker, python, showdev
Published: 2023-08-28 20:23:41

## TL;DR

I just released [pyaction](https://github.com/cicirello/pyaction) 4.22.0, a [Docker container with Python, git, and the GitHub CLI](https://dev.to/cicirello/pyaction-a-docker-container-with-python-git-and-the-github-cli-930).


## Changelog 4.22.0 - 2023-08-28

### Changed
* Bumped Python to 3.11.5.
* Bumped GitHub CLI to 2.33.0.


## Current Version List

This latest release of pyaction includes:
* Python 3.11.5
* [GitHub CLI 2.33.0](https://github.com/cli/cli/releases/tag/v2.33.0)
* git 2.39.2
* curl 7.88.1
* gpg 2.2.40



## More Information

For more information, see my earlier post about pyaction here on DEV, as well as pyaction's GitHub repository.

{% link https://dev.to/cicirello/pyaction-a-docker-container-with-python-git-and-the-github-cli-930 %}

{% github cicirello/pyaction %}



## Where You Can Find Me

Follow me [here on DEV](https://dev.to/cicirello) and on [GitHub](https://github.com/cicirello):

{% user cicirello %}

Or visit my website:

{% embed https://www.cicirello.org/ %}
For Devops necessary Tools and Technology
Tags: devops, security, cloud, git
Published: 2023-08-28 20:09:37

DevOps involves the use of various tools and technologies to automate processes, facilitate collaboration, and streamline software development, testing, deployment, and operations. Here are some commonly used tools in the DevOps ecosystem:

1. Version Control:
   - Git: A distributed version control system used for tracking changes in source code and coordinating collaboration among developers.

2. Continuous Integration and Continuous Delivery (CI/CD):
   - Jenkins: An open-source automation server that supports building, testing, and deploying code changes.
   - Travis CI: A cloud-based CI service that automates building and testing of code changes.
   - CircleCI: A CI/CD platform that automates software builds, tests, and deployments.
   - GitLab CI/CD: Integrated CI/CD capabilities within the GitLab platform.
   - GitHub Actions: An automation tool integrated with GitHub repositories for CI/CD workflows.

3. Configuration Management and Infrastructure as Code (IaC):
   - Ansible: An open-source automation tool for configuration management and application deployment.
   - Terraform: An IaC tool used to provision and manage infrastructure across various cloud providers.
   - Puppet: An automation tool for managing and configuring software and infrastructure.
   - Chef: A configuration management tool for automating infrastructure provisioning and management.

4. Containerization and Orchestration:
   - Docker: A platform for developing, shipping, and running applications in containers.
   - Kubernetes: An open-source container orchestration platform for automating deployment, scaling, and management of containerized applications.

5. Monitoring and Logging:
   - Prometheus: An open-source monitoring and alerting toolkit for collecting and visualizing metrics.
   - Grafana: A platform for monitoring and observability with customizable dashboards.
   - ELK Stack (Elasticsearch, Logstash, Kibana): Tools for collecting, processing, and visualizing log data.

6. Collaboration and Communication:
   - Slack: A messaging platform for team communication and collaboration.
   - Microsoft Teams: A collaborative communication tool integrated with the Microsoft ecosystem.
   - Jira: A project management and issue tracking tool often used for managing software development tasks.

7. Versioning and Artifact Management:
   - Nexus Repository: A tool for hosting and managing software artifacts.
   - Artifactory: A repository manager for managing software artifacts and dependencies.

8. Testing and Test Automation:
   - Selenium: An open-source tool for automating browser-based application testing.
   - JUnit: A widely used testing framework for Java applications.

9. Security and Compliance:
   - SonarQube: A platform for continuous code quality inspection and security analysis.
   - Twistlock: A container security platform for protecting containerized applications.

10. Cloud Providers:
    - AWS (Amazon Web Services), Azure (Microsoft), Google Cloud: Cloud platforms offering various services for deploying and managing applications.
Laravel : Introduction au Framework
Tags: css, laravel, php, compose
Published: 2023-08-28 20:00:48

**INTRODUCTION A LARAVEL**
Dans cet tuto, je vais installer LARAVEL via la commande suivante : 

```
composer create-project laravel/laravel example-app
```
Une fois cette commande effectué, vous devez lancé votre projet laravel via les commandes suivantes :

```
cd example-app/
php artisan serve
```
**Présentation du projet Laravel**
Plusieurs dossiers sont importants dans le projet laravel :

> App : est le répertoire contenant les contrôleurs et les modèles

> database : est le dossier contenant les migrations c'est-à-dire les infos des tables qui irons dans la base.

> .env : fichier de configuration du projet à savoir la base de données, configuration des informations de la base de données.

Pour ceux qui aimerais avoir le tuto complet, [c'est par ici !!!](https://youtu.be/4fRshBROxgo).
Minimal loader with progress
Tags: html, progress, loader
Published: 2023-08-28 19:58:00

---
title: Minimal loader with progress 
published: false
description: Minimal solution for web page loader
tags: html, progress, loader
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckf1vlh9r6mdkfwhobnn.gif
# Use a ratio of 100:42 for best results.
published: true
---

Recently I've discovered default behavior of [HTML progress tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress).
If you don't provide any attributes, progress acts like loader.
```html
<progress/>
```
That is how it look:
- In Firefox
![Firefox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckf1vlh9r6mdkfwhobnn.gif)
- In Chrome
![Chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n12crjlgl0319a5knday.gif)
- In Safari
![Safari](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3cyuhgewkei2hkrpl9i.gif)
Although it does not look&feel identical in browsers, it looks ok, even for light theme. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92gr84v0ai0zud73ddsi.png)
Such loader solution could be useful for rapid prototyping and minimal interfaces.
Day 34: Equality Comparisons
Tags: day34, javascript, 100daysofcode
Published: 2023-08-28 13:30:00



In JavaScript, equality comparisons are used to evaluate if two values are the same. Sounds straightforward, right? But hold on! JavaScript offers two types of equality operators: **loose equality** (==) and **strict equality** (===). These operators might appear similar, but beneath the surface, they behave differently.


### Loose Equality (==)

The double equals (`==`) operator in JavaScript attempts to coerce the operands into the same type before making a comparison. This can lead to unexpected results due to type conversion. For instance, `0 == false` and `"" == false` both return `true`, which can be counterintuitive.

### Strict Equality (===)

The triple equals (`===`) operator, on the other hand, compares values without performing type coercion. It checks both the value and the data type, ensuring a more predictable comparison. In most cases, strict equality is the preferred choice, as it helps avoid unexpected type-related issues.


## Tricky Parts and Odd Stuff 🤪

JavaScript's way of checking equality has some strange parts. Knowing these can stop us from getting confused.

### NaN - Not Quite Equal!

NaN (Not-a-Number) is a special value in JavaScript. Surprisingly, NaN is not equal to itself according to the rules of equality comparisons. So, `NaN === NaN` returns `false`, necessitating the use of the `isNaN()` function to identify NaN values.

### Objects and Arrays - The Reference Trap

When it comes to objects and arrays, equality comparisons behave differently. They check whether the references to the objects are the same, rather than comparing their content. This means that even if two objects or arrays have the same properties or elements, they won't be considered equal unless they refer to the same memory location.

## Introducing Object.is() 🎉

JavaScript has a friend called `Object.is()`. It's like a helper that can check equality in a better way. It's good with NaN and even knows the difference between -0 and +0. For example, `Object.is(NaN, NaN)` says `true`, and `Object.is(-0, +0)` says `false`.

For instance, `Object.is(NaN, NaN)` returns `true`, and `Object.is(-0, +0)` returns `false`, providing a more intuitive comparison behavior.

## Best Practices

1. **Always Use Strict Equality:** Unless you have a specific reason to coerce types, stick to strict equality (`===`). It reduces unexpected results and enhances code predictability.

2. **Use `NaN` Checks:** When dealing with potential NaN values, employ the `isNaN()` function or `Number.isNaN()` method. This avoids pitfalls arising from NaN's unique non-equality behavior.

3. **Leverage `Object.is()`:** When precise NaN or -0/+0 comparisons are required, consider using `Object.is()` for more accurate results.

4. **Compare Objects and Arrays Carefully:** If you need to compare objects or arrays based on their content, consider using external libraries like Lodash's `isEqual` or crafting custom comparison functions.
Comparison Between APACHE AGE and Other Graph Databases
Published: 2023-08-28 19:40:12

**Introduction:**
There are many graph databases available. One of the latest players in the graph database market, Apache Age, has a unique mix of technologies that makes it an attractive choice for graph database management. In this post, we’ll take a look at the features and benefits of each of these graph databases compared to Apache Age.

**APACHE AGE:**
Apache Age is an Apache Arrow-based and PostgreSQL-based graph database. It combines disk-based storage and in-memory computing for fast and efficient graph analysis. One of its unique features is its ability to run distributed graph processing with Apache Arrow Flight, allowing it to scale to large datasets. 
Some of the features of Apache Age are:
1- SQL-based query language for graph traversal and analytics.
2- Support for Directed and Undirected Graphs with Customizable Verticals and Edge Properties. 

**Other Graph Databases:**
There are also other graph databases available, each with its own advantages and disadvantages. Here are some of the most popular graph databases:

**JanusGraph:**
JanusGraph is one of the most popular distributed graph databases. It supports property graphs as well as RDF graphs. JanusGraph can be set up and configured using Google Cloud Bigtable or Apache HBase. It can also be used with Apache Cassandra. 

**Neo4j:**
Neo4j is one of the most popular graph databases on the market. It uses a graph-optimised storage engine and supports a high-performance query language known as Cypher. Neo4j is well-known for its ease of use and scalability, but it can be expensive and may not be as scalable as some other options.

**Conclusion:**
Users who priorities performance and scalability as well as those who want real-time graph processing should strongly consider Apache Age. There are many factors to consider when choosing a graph database, but these are some of the most important: performance scalability user-friendliness cost user preference performance scalability user preference real-time graph processing other solutions include: Neo4j, JanusGraph.

Apache-Age:(https://age.apache.org/)
GitHub:(https://github.com/apache/age)
Streamline SVG Sprites in Your React Applications
Tags: javascript, react, reactjsdevelopment
Published: 2023-08-28 19:29:41

Hello, wonderful devs! If you frequently work with SVG icons in your React projects and find the process of managing and referencing them a bit cumbersome, today's your lucky day. I present to you the [react-svg-sprite-generator](https://www.npmjs.com/package/react-svg-sprite-generator)!

## What is react-svg-sprite-generator?

The **react-svg-sprite-generator** is a CLI tool designed for React.js developers. It helps generate SVG sprites from a directory filled with SVG files, automatically preparing them for use within React applications. The real magic, though? The generated names.js file, which not only contains the constants for your SVG icons but also inline Base64 encoded previews!


![autocomplete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxdiqt6m25efpfhh4cpv.gif)

## Why Use It?
1. **Ease of Use**: With a simple command, transform your directory of SVG icons into an organized sprite with accompanying JS and markdown documentation.
2. **IDE Support**: In IDEs like VSCode and Webstorm, benefit from autocompletion with actual image previews. It boosts your development speed, especially when selecting icons.
3. **No Memorization**: Say goodbye to remembering exact SVG paths or names. With autocompletion and inline previews, pick the right icon every time.

## Getting Started

### Installation

```bash
npm i --save-dev react-svg-sprite-generator
```

### Generate SVG sprite

Simply run:

```bash
svgsprite
```
Or specify source and destination:

```bash
svgsprite --src ./path/to/your/svg/directory --dest ./path/for/generated/files
```

### Structure

After the command runs, your icons are now structured in a neat manner, with accompanying JS and markdown documentation.

For instance, with two icons **icon1.svg** and **icon2.svg**, you get:

```css
src
└── components
    └── Icon
        ├── sprite.svg
        ├── names.js
        └── Readme.md
```

### Usage in React

```tsx
import * as IconNames from './names.js';
import spriteUrl from './sprite.svg';

interface IconProps {
	name: (typeof IconNames)[keyof typeof IconNames];
}

const Icon = ({ name }: IconProps ) => {
	return (
		<svg>
			<use href={`${spriteUrl}#${name}`} />
		</svg>
	);
};
export default Icon;

```

```javascript
import * as IconNames from './names.js';
import Icon  from './Icon.js';

<Icon name={IconNames.ICON1} />

```

## Wrapping Up
The [react-svg-sprite-generator](https://www.npmjs.com/package/react-svg-sprite-generator) is here to revamp how you deal with SVG icons in React. Try it out and let's make icon management in React a breeze!

If you find the library useful, consider giving it a star ⭐ on [GitHub](https://github.com/simprl/react-svg-sprite-generator). Feedback, PRs, and issues are always welcome!
I love negative comments!
Tags: learning, motivation, beginners
Published: 2023-08-28 19:21:24

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0eqj8rhnh77n20nsbl5i.png)
_Sometimes I fear to say something.
Sometimes I doubt if my comment doesn't look funny.
Sometimes I feel weird for having a different opinion.
Sometimes I feel silly for doing something I want._

These feelings are <u>meaningless</u>.

**Growth happens not by crossing the finish line,
but by falling and trying to get back up**.
Deployed my IdentityVerse Chain (Arbitrium Orbit Chain)
Published: 2023-08-28 19:00:45


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

This resulted in running these containers


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


Blockscout running on localhost:4000
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qbn5s8xk4kf2wcf567h.png)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh8j1vnlet5ewpzr1kvm.png)
Running Apache-AGE and AGE-Viewer using Docker
Published: 2023-08-28 18:56:21

In order to run APACHE-AGE and AGE-View using Docker, you need to follow some steps that are mentioned below:

First You need to Install **Docker** on your system. Clone the following GitHub Repo:
`https://github.com/apache/age.git`

Go to the directory and run the following command
`git submodule update --init --recursive`

Replace the age-viewer/Dockerfile with following code
`FROM node:14-alpine3.16`
`RUN npm install pm2`
`WORKDIR /src`
`COPY . .`
`RUN npm run setup`
`EXPOSE 3000`
RUN `docker compose up`
After this,
Fill the form as below:
```
Connect URL : age
Connect Port : 5432
Database Name : postgresDB
User Name : postgresUser
Password : postgresPW
```

Apache-Age:(https://age.apache.org/)
GitHub:(https://github.com/apache/age)
Optimizing Performance in Django and PostgreSQL Applications
Tags: postgres, postgressql, django, webdev
Published: 2023-08-28 18:41:38

1. **Introduction**
   - Brief overview of the importance of performance optimization in web applications.
   - Discussing the impact of performance on user experience and business success.

2. **Identifying Performance Bottlenecks**
   - Techniques for identifying performance bottlenecks in Django and PostgreSQL applications.
   - Using tools like Django Debug Toolbar, PostgreSQL EXPLAIN, and query profiling to pinpoint performance issues.

3. **Database Optimization**
   - Strategies for optimizing database performance in PostgreSQL, such as indexing, query optimization, and denormalization.
   - Discussing techniques like database connection pooling and query caching.

4. **Django Optimization**
   - Techniques for optimizing Django application performance, including code profiling, caching, and asynchronous processing.
   - Discussing the use of Django's built-in caching framework and third-party tools like Redis for caching.

5. **Scaling and Load Balancing**
   - Exploring strategies for scaling Django and PostgreSQL applications to handle increased traffic and load.
   - Discussing techniques like horizontal scaling, load balancing, and database sharding.

6. **Testing and Benchmarking**
   - Importance of testing and benchmarking to measure and validate performance improvements.
   - Discussing tools and techniques for load testing and performance benchmarking.

7. **Conclusion**
   - Recap of the key concepts covered in the post.
   - Encouragement for developers to prioritize performance optimization in their Django and PostgreSQL applications.
Regular expression to validate domains ending in .mygoogle.com and .google.com:
Published: 2023-08-28 18:04:31

`function isValidDomain(domain) {
  const validDomainsRegex = /^(?:\w+\.)?(mygoogle\.com|google\.com)$/;
  return validDomainsRegex.test(domain);
}

// Test the function
const domain1 = 'https://www.mygoogle.com';
const domain2 = 'https://www.google.com';
const domain3 = 'https://www.twitter.com';

console.log(isValidDomain(domain1)); // true
console.log(isValidDomain(domain2)); // true
console.log(isValidDomain(domain3)); // false`
React Hooks Explained - Crash Course
Tags: react, tutorial, webdev, learning
Published: 2023-08-28 17:56:30

Learn all these react hooks in one short video: useState, useEffect, useContext, useMemo, useCallback, useRef, useReducer, useImperativeHandle. This tutorial also briefly covers forwardRef and memo.

This is a crash course with quick explanations for each hook.
Check out the video to learn more.

{% embed https://youtu.be/UWrSMWI8wbQ %}
Auto Login, Auto Select, Auto Click
Published: 2023-08-28 10:49:04

I created an automated script using JavaScript. The script I developed performs an automatic login action to a website for my work attendance. I want to add an action to automatically select a presence option from a dropdown menu that contains a ( Pagi, Siang, Malam ) , and to add an action to perform an auto click on the absen masuk button. Here, I have my self-made script and the HTML dashboard after logging in. Below is the script I created for Auto Login:

```
const username = "test";
const password = "test";

const webView = new WebView();
await webView.loadURL("https://e-absensi.rsudrsoetomo.jatimprov.go.id/absensi/public/login");

webView.evaluateJavaScript(`
  document.getElementById("nomorindukpegawai").value = "${username}";
  document.getElementById("LoginForm_password").value = "${password}";
  document.getElementById("login-button").click();
`);

webView.present();
```

For the HTML script after login, I have included it in the following link: [Html Code](https://controlc.com/4d73b4b0)

**For the username and password in the script above, I have masked them for the sake of my privacy.**

I created this script using my mobile phone and it runs in the iOS Scriptable app. My goal in creating this automation is to simplify the process of work attendance. Please assist me in resolving this issue.

Thank you.