teleren/devto huggingface dataset:
A Simple Guide to Using useEffect in React
Tags: webdev, javascript, beginners, programming
Published: 2023-08-29 17:39:05

React, the popular JavaScript library for building web interfaces, offers a handy tool called useEffect that lets you manage extra tasks in your components. If you're new to it, don't worry – it's like a friendly helper for dealing with things that happen on the side. Let's walk through the basics together!

**What's the Buzz about useEffect?**

Imagine you're building a house (your React component) and everything's nicely set up, but you need to water the plants outside (a task that doesn't directly affect your house). That's where useEffect comes in. It's like the gardener you hire to water those plants, making sure your house stays clean and focused on its main job.

**Let's Dive In**

The cool thing about useEffect is that you can tell it what to do after your component has done its thing. Need to fetch data from an online store? Or maybe you want to listen for clicks on a button? Just jot down the task and useEffect will handle it for you.

Here's a simple example of how it works

```
import { useEffect, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

```
In this case, every time you click the "Increment" button, the title of the page will change to show the current count. It's like magic!

**When to Use It** 

useEffect is your go-to helper when you're dealing with tasks that happen outside your component's main job. Whether it's fetching data from a server, listening to window resize events, or cleaning up after your component is done, useEffect has your back.

**It's as Easy as That!**

That's the gist of useEffect. It's a tool that keeps your components tidy by handling extra tasks without cluttering up your main code. As you get more comfortable with React, you'll find even more creative ways to use useEffect to make your web apps awesome.

**Got Questions?**

Are there things you've been wondering about when it comes to useEffect? Maybe you're curious about how to use it with different types of tasks. Share your thoughts and let's learn together! #React #useEffect #BeginnerFriendly #WebDev

**Stay Curious!**

Keep exploring, keep learning. useEffect might be just one piece of the puzzle, but every step you take in React brings you closer to becoming a coding superstar. So, keep tinkering and enjoy your React journey! 🚀🌟
Work = Anxiety--
Tags: programming, stress, productivity, career
Published: 2023-08-29 17:30:55


![Coding angst](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xahlhdjf7rqgvlz927ak.png)

There's a knot in your stomach...

You stop by the coffee place on your commute and notice the clock creeping past 9am with the growing dread that you have a bunch of Tasks this Sprint, some of which you have no idea how to do (yet) - and it's been this way for a week, over a couple of weekends and sleepless mornings.
Sound familiar at all?

As you turn on your PC, your brain immediately tries to pull you towards more mundane tasks.
- Email - checked!
- Updates - updated!
- Teams/Slack messages - marked as read!
- Coffee - on the desk!
- Headphones - on!
- Anxiety - churning away!

You know that there is a big, ugly, messy, difficult Task that you need to do and it's giving you angst, but I'm going to let you in on **the secret to getting rid of that anxious feeling**
...you're not going to like it _but_
...you'll know it's true.

You need to **just start**.
That's all.
Don't think so hard or your emotional lizard brain will sabotage you...again. Zombie brain and go!

![Zombie brain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6k8p1f3m9udcpbhyo8xx.png)

At first you'll resist even starting because that means admitting that you don't know what you're doing. But I promise you, **the level of angst you feel in a coding job is in direct proportion to your level of activity on your toughest task**.

Here's how it will go:
1. You start
2. You hit a wall
3. You ask someone for help
4. It starts working
5. You learn something new
6. You start to gain confidence
7. You start to feel good
8. Anxiety, imposter feelings all drop sharply

You will *always* and I mean always be able to find some small, insignificant task other than the _big one_ to do. Don't let your emotional response control your ability to act intentionally now.

Now, to take the advice myself and start coding this Managed Identity task I've been convincing myself is too hard :)

We're all in this together, I'm here for you.
Unleashing Curiosity, One Click at a Time
Published: 2023-08-29 17:11:37



In a world that thrives on information, the quest for knowledge is a never-ending journey. At the crossroads of curiosity and discovery lies [Quell Press](https://quellpress.com/), a digital haven that beckons the curious minds and knowledge enthusiasts alike.

**Enter the Realm of Quell Press: A Gateway to Enlightenment**

Imagine a realm where every click takes you deeper into a world of insights. With the magic keyword "[Quell Press](https://quellpress.com/)," you're transported to a space where articles aren't just words on a screen; they're portals to understanding. From unraveling the mysteries of science to celebrating cultural heritage, Quell Press is your passport to exploration.

**Feed Your Curiosity: Explore the Depths**

[Quell Press](https://quellpress.com/) isn't just a website; it's a call to action. Embark on a journey where each article is an invitation to learn, ponder, and discuss. Delve into the realm of technology, where innovations shape our future, and let the pulse of culture and heritage guide you through time and space.

**Celebrities Unveiled: Behind the Numbers**

Fame comes with financial stories that captivate us all. At [Quell Press](https://quellpress.com/), we're not just interested in the numbers behind celebrity net worth. We're intrigued by the narratives that shape these figures—entrepreneurial endeavors, investments, and the paths that lead to their success.

**A Community of Curiosity**

[Quell Press](https://quellpress.com/) thrives on engagement. Join a community of seekers and thinkers who aren't just satisfied with reading; they're eager to discuss, share, and expand their horizons. The comments section isn't just a space for words—it's a canvas for ideas to converge and insights to flourish.

**Embark on Your Learning Odyssey**

Are you ready to embark on a journey of learning? With [Quell Press](https://quellpress.com/) as your guide, you're in for an adventure that never ends. Each click is a step closer to unraveling the complexities of our world, and every article fuels the fire of your curiosity.

**Ignite Curiosity, Unleash Knowledge with Quell Press**

As you stand at the threshold of exploration, remember that [Quell Press](https://quellpress.com/) isn't just a website. It's an opportunity to broaden your horizons, challenge your perceptions, and engage in meaningful conversations. Let curiosity be your compass, and let Quell Press be your guide into the world of endless possibilities.
Optimizing SEO: Generating Dynamic Sitemaps for Your Angular Application
Tags: angular, javascript, typescript, seo
Published: 2023-08-29 17:10:18

Generating a dynamic sitemap for an Angular application involves creating a server-side script to generate the sitemap XML based on your application's routes and content. Since Angular is a client-side framework, you'll need a server to handle the sitemap generation. Here's a step-by-step guide using Node.js and Express as the backend server:

## Step 1: Set Up Your Angular Application:
Make sure you have Node.js and Angular CLI installed. If not, you can install them using:

```javascript
npm install -g @angular/cli
```
## Step 2: Create a New Angular Project:
Create a new Angular project using the Angular CLI:

```javascript
ng new dynamic-sitemap-app
```
## Step 3: Create a Server-Side Directory:
Create a new directory named server within your Angular project to hold the server-side files.

## Step 4: Install Required Packages:
Navigate to the server directory and install the necessary packages for the server:

```javascript
cd serve
npm init -y
npm install express xmlbuilder
```
## Step 5: Set Up the Server:
Create a file named server.js within the server directory and set up the server to generate and serve the sitemap XML:

```javascript
const express = require('express')
const xmlbuilder = require('xmlbuilder');
const app = express();
const PORT = process.env.PORT || 3000;

// Define your application's routes
const routes = [
  '/',
  '/about',
  '/contact',
  // Add more routes as needed
];

app.get('/sitemap.xml', (req, res) => {
  const root = xmlbuilder.create('urlset', { version: '1.0', encoding: 'UTF-8' });
  root.att('xmlns', 'http://www.sitemaps.org/schemas/sitemap/0.9');

  routes.forEach(route => {
    const url = root.ele('url');
    url.ele('loc', `https://yourdomain.com${route}`);
    // You can add more elements like <changefreq> and <priority> here if needed
  });

  res.header('Content-Type', 'application/xml');
  res.send(root.end({ pretty: true }));
});

app.listen(PORT, () => {
  console.log(`Server started on http://localhost:${PORT}`);
});
```
## Step 6: Configure Angular App to Build for Production:
Open your angular.json file and configure the "outputPath" of your application to "../dist/client" so that the built Angular app is output to the appropriate directory for the server.

## Step 7: Build the Angular App:
Build your Angular app for production:

```javascript
ng build --prod
```
## Step 8: Start the Server:
In the server directory, start the server:
```javascript
node server.js
```
## Step 9: Access Your Dynamic Sitemap:
Access the dynamically generated sitemap XML by visiting http://localhost:3000/sitemap.xml in your browser.

Congratulations 🎉 You've successfully set up dynamic sitemap generation for your Angular application using a Node.js and Express backend server. This sitemap will help search engines index your content and improve your website's SEO. Remember to adjust the server configuration and sitemap generation logic based on your specific application's requirements.
Signing VirtualBox Kernel Modules
Tags: linux, learning, tutorial, virtualmachine
Published: 2023-08-29 16:58:42

When facing issues with module signing and errors in the 'vboxdrv, vboxnetflt, vboxnetadp, vboxpci' modules, these were the steps I followed to enable VirtualBox on my Fedora 38 machine without disabling UEFI Secure Boot. 

And this method creates a layer of protection between VirtualBox and the kernel.

<h4>Installing the package <code>mokutil</code>:</h4>

<code>sudo dnf update</code>
<code>sudo dnf install mokutil</code>

<code>mokutil</code> will be used to sign your own modules for use with UEFI Secure Boot and to add certificates to the kernel's trusted certificate keyring.

<h4>Creating folder for module signing and RSA key:</h4>

<code>sudo su</code>
<code>mkdir /root/signed-modules</code>
<code>cd /root/signed-modules</code>
<code>openssl req -new -x509 -newkey rsa:2048 -keyout MOK.priv -outform DER -out MOK.der -nodes -days 36500 -subj "/CN=VirtualBox/"</code>
<code>chmod 700 MOK.priv</code>

<h4>Creating the password for MOK (this password will be needed for the reboot):</h4>

<code>sudo mokutil --import MOK.der</code>

<h4>Restart the system and follow the MOK processes:</h4>

- Select 'Enroll MOK
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka9tjhyigbrkravojsj2.png)

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

- Select 'Yes' to add the keys
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhrbv2izh6xovspmxam2.png)

- Enter the password created with mokutil"
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23rpc6ed3mgjz1aa6y6j.png)

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

<h4>Creating the script to perform the signatures:</h4>

<code>cd /root/signed-modules</code>
<code>vi sign-virtual-box</code>

Add the following inside 'sign-virtual-box':

```
#!/bin/bash

for modfile in $(dirname $(modinfo -n vboxdrv))/*.ko; do
  echo "Signing $modfile"
  /usr/src/kernels/$(uname -r)/scripts/sign-file sha256 \
                                /root/signed-modules/MOK.priv \
                                /root/signed-modules/MOK.der "$modfile"
done
```

Check for any errors in the script using the command:

<code>find /usr/src -name sign-file</code>

<h4>Add permissions to the script and execute it:</h4>

<code>chmod 700 sign-virtual-box</code>
<code>./sign-virtual-box </code>

<h4>Run VirtualBox:</h4>

<code>modprobe vboxdrv</code>

<h4>Final conclusions:</h4>
If the process doesn't work, an option is to disable Secure Boot, but for various reasons, it's not a recommended practice.

Another option is to check the quality of the VMs you're trying to run. In some cases, they might be corrupted, or even the ISO you're trying to install from.
Solving scaling challenges in neetoDeploy using Cluster Autoscaler
Tags: devops, neeto, development, saas
Published: 2023-08-29 16:46:16

💡 Solving scaling challenges in neetoDeploy using Cluster Autoscaler 🚀

Scaling is a fundamental problem in container orchestration. We've cracked it!

🧩 Introducing our latest blog post where we dive deep into how we're conquering scaling challenges in neetoDeploy using the powerful Cluster Autoscaler. Now scaling shouldn't be a roadblock on your tech journey.

📖 Curious to learn more? Check out the blog post here: https://www.bigbinary.com/blog/solving-scalability-in-neeto-deploy
Remove Older Github Account From Your PC
Tags: git, github, vscode, softwaredevelopment
Published: 2023-08-29 16:31:12

**1.Remove Global Configurations:**
Open your command line or terminal and run the following commands to remove the global Git configurations associated with your old GitHub account:

`git config --global --unset user.name`
`git config --global --unset user.email`

**2.Remove Stored Credentials:**
Depending on your operating system, Git might have cached your GitHub credentials. You need to clear this cache so that you can enter new credentials when pushing code. Use the following commands:
For Windows:
`git credential-manager-core erase`

**3. Update Repository URL:**
If you had repositories cloned using the old GitHub account, you might want to update the remote URL to the new GitHub account's repositories. Navigate to each repository directory and update the remote URL using the following command:

`git remote set-url origin https://github.com/your-new-username/your-repo-name.git
`
Replace "your-new-username" with your new GitHub username and "your-repo-name" with the name of the repository.

**4 Push Changes:**
Once you've removed the old GitHub account's configurations and credentials, and updated the repository URLs if needed, you should be able to push code using your new GitHub account:

`git push -u origin main`


Git will prompt you to enter your new GitHub account's credentials, and the changes will be pushed to the repository associated with your new account.

Following these steps will ensure that your local machine is set up to use only your new GitHub account for pushing code and interacting with repositories.
Things wrong with Java
Tags: java
Published: 2023-08-29 16:21:51

This is by no means an exhaustive list.

I honestly think if Sun did not spend millions into Java marketing, it wouldn't have been successful. This is the first language I ever learnt and I hate to say it, but it is because of Java I decided to become a Software Engineer. That is why I am so loud about hating Java. You would be able to guess that I am not a very experienced programmer by the inadequacies here but oh well. Any day I am not programming in Java is a good day for me

1. Heavily IDE dependant
Java has this weird environment about it that everyone who wants to write Java is forced to use an IDE. There is no other option. Because otherwise you are subjecting yourself to pain for no reason. Languages that need integrated development environments are just bad overall. They are complicated and convoluted and importing a library becomes a nightmare if done without an IDE.

2. Object oriented design
Java is not object oriented anymore to make it more acceptable for devs to use. I am not even joking. There are books like "Functional programming in Java". The idea behind inheritance is somewhat okay but OOD is for sure the worst way to implement that. I feel something wrong whenever I have to do some weird inheritance stuff. Even in the react docs they say: "you can do inheritance with the components but there is always another way to write code to avoid it". Not word for word but something similar.

3. Rigidity over flexibility
Coding in Java feels like its own ecosystem where doors are windows and windows are portals to another barren landscape with sand for drinks and guava gummy bears for dinner. The world Java tried to create was how can we restrict the developer as much as possible. Which is justified but not at the same time. While there is need for some rigidity to make computer programs more resilient to attacks, there are so many other ways to do that. Plus I think the more versatile a language is while being secure, the more people will want to use it.

The comments are open to all kind of criticism and improvements :) Anyways, have a good day
How to convert image to ascii art using Python
Tags: python, coding, programming, tutorial
Published: 2023-08-29 16:02:46

## Hi 🙂🖐

In this post, I will share with you how to convert images to ascii art using Python and a library called ascii-magic.

## step 1

install ascii-magic from here `pip install ascii-magic`

## step 2

You need an image file for testing, and I will use this image.


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




## step 3

```python
from ascii_magic import AsciiArt

ascii_image = AsciiArt.from_image('E.jpg')
ascii_image.to_terminal()
```

## Result


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tooj4omfiyxf3pc9h1z5.PNG)



**You can also save it as an HTML file and display it in your browser.**



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iivlnox46sho81yepmz7.PNG)





**Now we're done 🤗**

**Don't forget to like and follow 🙂**

**Support me on PayPal 🤗**
https://www.paypal.com/paypalme/amr396
Overcoming Shared Environment Bottlenecks
Published: 2023-08-29 15:55:54

In the realm of collaborative software development, the concept of shared environments has long been the go-to strategy for fostering teamwork and innovation. However, beneath this seemingly harmonious approach lies a web of challenges that can stymie progress and hinder the very innovation it aims to promote. Shared development environments, while intended to streamline collaboration, often lead to conflicts, resource contention, and productivity bottlenecks that stall projects and hinder development teams.

In this article, we embark on a journey to explore the challenges posed by collaboration bottlenecks and delve into an innovative solution that redefines the way teams operate. We'll navigate through the intricacies of ephemeral environments, uncovering their benefits, implementation strategies, and the transformative impact they can have on both startups and enterprises. As we traverse case studies that highlight real-world successes, we will witness how Qovery's pioneering approach to Environment as a Service (EaaS) unlocks agility, efficiency, and collaboration, ultimately reshaping the future of collaborative software development.
Exploring 🚀Python Data Types: A Quick Overview
Tags: python, beginners, programming, tutorial
Published: 2023-08-29 15:48:49

1. Integers (int):
  `Examples: 42, -10, 0`

2. Floating-Point Numbers (float):
   `Examples: 3.14, -0.5, 2.0`

3. Strings (str):
   `Examples:'Hello, World!', "Python", '123'`

4. Lists (list):
   `Examples:[1, 2, 3], ['apple', 'banana', 'cherry']
`
5. Tuples (tuple):
   `Examples:(1, 2, 3), ('red', 'green', 'blue')`

6. Dictionaries (dict):
   `Examples: {'name': 'Alice', 'age': 30}, {'fruit': 'apple', 
   'color': 'red'}`

7. Sets (set):
   `Examples: {1, 2, 3}, {'apple', 'banana', 'cherry'}`

8. Booleans (bool):
  ` Examples: True, False`


Understanding these data types helps us manage and manipulate data effectively in Python. Feel free to share your insights and experiences with these data types below! Let's discuss. 💬🚀
Fixing a PhaseScriptExecution Failure on React Native
Tags: reactnative, xcode, ios
Published: 2023-08-29 15:47:48

---
title: Fixing a PhaseScriptExecution Failure on React Native
published: true
description: Fixing a not well documented issue when you change entry path of your React Native app from the default root/index.js path.
tags: reactnative, xcode, ios
cover_image: https://images.unsplash.com/photo-1608760000795-547e78bfc003?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3830&q=80
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-29 13:53 +0000
---

When contributing to [react-native-share](https://github.com/react-native-share/react-native-share) library I ran into an issue while building for iOS via Xcode. 

Their example app lacked a build setting that caused the PhaseScriptExecution step to fail. 

## The Problem

When building from Xcode I got this issue:


`Command PhaseScriptExecution failed with a nonzero exit code`

Expanding the error you see a ton of logs:


![PhaseScriptExecution error logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wp4j7n5p6up0cn6mpal.png)


Looking at the bottom you see that it failed to find the `root/index.js` file of the project.


![PhaseScriptExecution error logs where build actually failed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y12cqlt872ffvptbo76g.png)


While their `start:ios` NPM script call does set the entry path [here](https://github.com/react-native-share/react-native-share/blob/2bd15b71affcdba6b6aa977350982988de83d841/package.json#L81) that won't get picked up by Xcode.

## The Fix

Luckily for us that script phase is a build step within Xcode which we can change. 

In the Example app's build phases, we can change `Bundle React Native code and images`'s shellscript that executes `react-native-xcode.sh` and add the `ENTRY_FILE` environment variable pointing to the right path.


![Screenshot of where the build phases is located in Xcode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50l9i0xgbkb8z81s4k6k.png)