teleren/devto huggingface dataset:
alert HTML error React/node.js
Tags: react, node
Published: 2024-01-14 11:17:16

I have a problem when I call the "/signup" route, I don't understand why I'm getting an alert with HTML.

server.js
`const https = require('https')
const hostname = '127.0.0.1';
const port = 'passenger';

const express = require("express");
const mysql = require('mysql');
const cors = require ('cors');
const bcrypt = require('bcryptjs');
const cookieParser = require('cookie-parser');



const app = express();
app.use(cors({
origin: ["http://projettrain.go.yo.fr"],
methods: ["POST","GET","PUT"],
credentials: true // Autoriser l'envoi de cookies ou d'en-têtes d'autorisation

}));

app.use(express.json());
app.use(cookieParser());
const jwt = require('jsonwebtoken');


app.use(function (request, response, next) {
response.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});


// INSCRIPTION
app.post('/signup', (req, res) => {
const salt = 10; // Nombre de tours de hachage

// Vérifier si l'email existe déjà dans la base de données
const checkEmailQuery = "SELECT email FROM profil WHERE email = ?";
db.query(checkEmailQuery, [req.body.email], (checkEmailErr, checkEmailResults) => {
if (checkEmailErr) {
return res.json("Error lors du check du mail");
}

// Si l'email existe déjà, retournez une réponse appropriée
if (checkEmailResults.length > 0) {
return res.json("L'adresse e-mail est déjà existant");
}

// Si l'email n'existe pas, continuez avec l'inscription
bcrypt.hash(req.body.password.toString(), salt, (hashErr, hash) => {
if (hashErr) {
return res.json("Error lors du mot de passe ");
}

// Exécution du SQL pour l'inscription
const insertUserQuery = "INSERT INTO profil (name, surname, email, password) VALUES (?)";
const values = [req.body.name, req.body.surname, req.body.email, hash];

db.query(insertUserQuery, [values], (insertErr, data) => {
if (insertErr) {
return res.json("Error inserting user");
}

});
});
});
});

const server = https.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World! NodeJS n ');
});


server.listen(port, hostname, () => {
console.log(Server running at https://projettrain.go.yo.fr/);
});`



signup.js 
`const handleSubmit =(event) => {
event.preventDefault();
setErrors(Validation(values));
if(errors.name === "" && errors.surname === "" && errors.email === "" && errors.password === "" ){
axios.post('https://projettrain.go.yo.fr/signup', values)
.then(res => {
if (res.data === 'Success') {
navigate('/')
} else {
alert(res.data);
}
})
.catch(err => console.log(err));
}
}`
How to Set Up Your First React Project
Tags: react, beginners, webdev
Published: 2024-01-14 11:16:29


## Where to start?

There are too many ways to create the React application, we have a bunch of tools and frameworks that allow us easily set up our app. In this tutorial, I am going to use [Vite](http://vitejs.dev/) as it's the easiest way to set up basic React application that will work on the client side.

> Another popular choice is [Next.js](https://nextjs.org) framework that's built on top of React and adds a lot of useful things you might want to have in the future, but if you are starting to learn React, you might not need them until you understand how React works and what problems you could solve by using [Next.js](https://nextjs.org)

Before you can create an application with Vite, you need to install [Node.js](https://nodejs.org/en) this thing is must in modern web development. Just go to the [Node.js website](https://nodejs.org/en) and download latest version. To make everything installed correctly, run this command in terminal:

```shell
node --version

# You should see some version, for example v21.5.0
```

Another thing you’ll need is code editor. I personally use VSCode, it’s free, open source and probably one of the most popular choice for web development.

## Create the Base Application

Now, let’s open the terminal and go to any folder where you’d like to store your React project and run the command below.

> In the code below, I use the template react-ts; this tells Vite to create a React application with [TypeScript](https://www.typescriptlang.org). If you don’t want using TypeScript, you could replace `react-ts` with `react`.

Checkout [Vite docs](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) for all available templates

```shell
npm create vite@latest my-app-name -- --template react-ts
```

This will create a folder structure and generates all files we need. Now, let’s open the folder, install all dependencies, and finally run our project:

```shell
cd my-app-name
npm install
npm run dev
```

You should now see in terminal a URL to the application. By default, it’s [http://localhost:5173/](http://localhost:5173/), so let’s open it in browser and I hope you see same page as me.

![The expected result in the browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8xwoz25zhuquje4fbhc.png)


Now you should be able to open `src/App.tsx` or (`src/App.jsx` if you decided not to use TypeScript) and you could see change the HTML-like code, save file and it’ll automatically rebuild this code and you’ll see updates in browser. Have fun here ☺️

## What's next?

Now you can go to [Quick Start – React](https://react.dev/learn) and learn more about the React itself. I don’t have any plans to teach React, because React docs are perfect to learn about React. See you in the next article where I’m going to add more configuration to make my development experience a bit better 😄
SVG Patterns Made Easy
Published: 2024-01-14 11:12:06

The `setSVGAsBackground` function elegantly uses SVGs as repeating patterns in web design, a method that combines functionality with aesthetic appeal.

> TL;DR
Discover an uncomplicated yet powerful way to use SVG for background patterns in web design, crafted by ChatGPT from a prompt by Netsi1964

```javascript
function setSVGAsBackground(svgElement) {
  // Efficient code to transform SVG into a background pattern
}
```

The function can be used to generate a css custom property (css variable) which can then be used to use the SVG as a (repeating) pattern in say you `body` element. This allows you to scalable repeating patterns, and using the css clamp function you can have a combination of a minimum, prefered and maximum size of the pattern:

```css
body {
  background-image: var(--pattern);
  background-size: clamp(50px, 15%, 200px);
}
```

In this example I use the generated pattern `--pattern` on the body where the pattern will be no smaller than `50px` and no larger than `200px` and going for a prefered size of `15%` which will make the pattern grow and shrink in size as the viewport resizes - all done without javascript :-)

```javascript
// Usage:
// Assuming svgElement is the SVG DOM element you want to use as a pattern
setSVGAsBackground(dynamicPattern);
``` 


See the [example on CodePen](https://codepen.io/netsi1964/pen/bGZBJMd)
Crafting A Image-Centric Web App: A Guide to Clay Theme on Gatsby 5+
Tags: webdev, javascript, tutorial, beginners
Published: 2024-01-14 11:11:24


If you're eager to create visually engaging web applications and want to elevate your projects, the Clay Theme for Gatsby 5+ is your ideal solution. Designed specifically for publishers, portfolios, photographers, and bloggers, this theme promises a seamless blend of design and UX/UI experience. In this step-by-step guide, we'll walk through the process of installing the Clay Theme to turn your vision into a stunning reality.

## Getting Started

### Step 1: Clone the Repository

Begin by cloning the Clay Theme repository to your local machine. Open your terminal and run the following command:

```jsx
git clone https://github.com/lilxyzz/clay-theme.git
```

### Step 2: Navigate to the Theme Directory

Move into the theme directory by using the following command:

```jsx
cd clay-theme
```

### Step 3: Install Dependencies

Install the necessary dependencies for the theme using npm or yarn:

```jsx
npm install or yarn
```

### Step 4: Start local dev server

let’s get up and running 

```jsx
gatsby develop or yarn dev
```

## Theme Customization

### Define Your Colour  Palette

Tailor the colour  palette to match your brand or personal style. Experiment with different colour schemes by updating the **`colors`** section in your vars.css file. You will also want to adjustment the **`_gatsby-plugin-manifest_`** colors that are found at the bottom of the **`gatsby-config.js`** file.

**gatsby-config.js file**


![gatsby-config.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzphlm3m829wbfqcq5wy.png)

**vars.css file**


![vars.css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jmgew45fr0u57dop4wq.png)

## Conclusion

Now that you've successfully installed the Clay Theme and tailored the color palette to your liking, it's time to unleash your creativity and make the website truly yours. Creating new pages is a breeze with Gatsby and the Clay Theme. 

Whether you want to add a personal blog, showcase your latest photography work, or highlight your portfolio, the possibilities are endless. Simply create a new page, implement the components provided by the Clay Theme, and make adjustments as needed. 

Let your imagination run wild, and enjoy the process of shaping your digital space into a visually stunning and uniquely online presence. 🚀

**Demo:** [Clay Theme](https://clay-theme.netlify.app/)
**GitHub Repository**
{% embed https://github.com/lilxyzz/clay-theme %}

## Feedback

If you found the repository valuable or enjoyed using it, consider showing your support by giving it a stellar 5-star rating! 

The Clay Theme is an open-source project, and we welcome contributions and feedback. If you have ideas for improvements or spot a bug, feel free to [contribute on GitHub](https://github.com/lilxyzz/clay-theme/).

Explore the tools shaping my Macbook workflow in 2024, by diving into the details of my MacBook setup article. 
{% embed https://dev.to/travisl/my-macbook-setup-for-development-2024-54ke %}

Happy reading and coding!
[Travislord.xyz](https://travislord.xyz/)
Top 3 Moral Stories in Hindi : एक सीख भरा सफर
Tags: moral, stories, hindi
Published: 2024-01-14 11:04:01

नैतिकता और शिक्षा का महत्व हमारे समाज में अत्यधिक है। नैतिक कहानियाँ हमें सीख देने वाली महत्वपूर्ण साधन हैं जो हमें सही और गलत की पहचान करने, समझदारी से निर्णय लेने, और अच्छे संबंध बनाए रखने की कला सिखाती हैं। इस ब्लॉग में, हम आपको कुछ ऐसी [Moral Stories in Hindi](https://usemynotes.com/top-10-moral-stories-in-hindi/) साझा करेंगे जो आपको एक सीख भरे सफर पर ले जाएंगी।

## सच्चे मित्र: Moral Stories in Hindi
कहानी एक गाँव के दो दोस्तों की है, जो हमेशा एक-दूसरे के साथ खड़े रहते थे। एक दिन, एक दोस्त ने दूसरे का छोटा सा चोरी कर लिया। जब पहला दोस्त यह देखता है, तो उसकी नैतिकता का सच्चा परीक्षण होता है। उसने अपने दोस्त को सीधे रास्ते पर लाने का निर्णय लिया, जो उसकी सच्ची मित्रता को बचाने में सफल हुआ। इस कहानी से हमें यह सिखने को मिलता है कि सच्चे मित्रता कभी छोटी चीजों के लिए भी हमें सीधे रास्ते पर चलना चाहिए।

## ईमानदारी का मूल्य: Moral Stories in Hindi
एक छोटे से गाँव के एक छोटे से लड़के की कहानी है, जो बहुत ईमानदार था। एक दिन, उसे अपने दोस्त ने लालच में धोखाधड़ी में शामिल होने के लिए प्रेरित किया। लेकिन छोटे लड़के ने उसे मना कर दिया और ईमानदारी की राह पर चलने का निर्णय लिया। इस कहानी से हमें यह सिखने को मिलता है कि ईमानदारी हमारे जीवन में किसी भी समय बहुत मूल्यवान हो सकती है।

## परोपकारी दुनिया: Moral Stories in Hindi
एक समझदार राजा थे जो हमेशा अपने प्रजा की भलाइयों के लिए काम करते थे। उन्होंने एक दिन देखा कि एक कुत्ता एक बुरी बीमारी से पीड़ित है। राजा ने उसे अपने दरबार में ले आए और उसे ठीक करने के लिए विशेषज्ञ चिकित्सक को बुलवाया। इससे पूरे राज्य में एक सहानुभूति का वातावरण बन गया और लोगों में एक-दूसरे के प्रति प्रेम बढ़ गया। इस कहानी से हमें यह सिखने को मिलता है कि हमें अपने समाज में परोपकार करना चाहिए और दूसरों की मदद करने में नहीं हिचकिचाना चाहिए।

## समापन:
ये कहानियाँ हमें नैतिक शिक्षा और सही मार्गदर्शन करने में सहारा प्रदान करती हैं। इन्हें सुनकर हम अच्छे और सजग नागरिक बनते हैं और अपने आस-पास के समाज को भी सुधारने का संकल्प लेते हैं। नैतिक कहानियों के माध्यम से हम अपने बच्चों और समाज को भी सबक सिखा सकते हैं, ताकि हमारी समृद्धि और तरक्की का मार्ग सही दिशा में हो।
"Embarking on a New Coding Chapter: Journeying with HTML, CSS, JavaScript, Python, and PHP 🚀"
Tags: webdev, javascript, programming, job
Published: 2024-01-14 10:24:49

🚀 Leveling Up: Unveiling My Coding Journey! 🚀

Hey Dev Community! 👋

Exciting news on my coding expedition! 🌐✨ Armed with HTML, CSS, JavaScript, Python, and PHP, I'm pumped to dive deeper into the tech realm.

🛠️ Tool Mastery:

Crafting in HTML, CSS, and JavaScript for years
Seasoned in Python & PHP for dynamic backend solutions
🎯 Current Objectives:

Elevate my frontend finesse
Master the art of seamless user experiences
Strengthen backend prowess with Python & PHP
Contribute to impactful projects
🌈 Why Coding?
From crafting elegant solutions to problem-solving, coding is my passion. Eager to share my journey, learn from others, and grow collectively!

👀 What's Next?
Open to exchanging insights, connecting with seasoned developers, and exploring exciting collaborations. Let's share experiences and elevate our coding game! 🚀💻

#ExperiencedCoder #WebDevelopment #CodingJourney #TechExperience
Time Travel Directories
Published: 2024-02-07 15:42:01

---
title: Time Travel Directories
published: true
date: 2024-01-14 00:00:00 UTC
tags: 
canonical_url: https://blog.waysoftware.dev/blog/directory-time-travel/
---

The first time I saw somebody use `cd -` my mind was blown. If it's new to you, `cd -` will change to your previous directory. The shell is tracking a stack of recent directories, which can be seen via the builtin `dirs` command. You can also directly interface with the directory stack via `pushd`and `popd`. This is so cool and it's the backing mechanism that `cd -` uses. With that new knowledge, I created a small zsh function to help me time travel to any directory on the stack, instead of just the most recent.

```
function travel() {
    local options=()
    while read -r dir; do
        options+=("$dir")
    done < <(dirs -p)

    select dir in "${options[@]}"; do test -n "$dir" && break; echo "Invalid Selection"; done
    eval cd "$dir"
}

```

When this function gets invoked, you're prompted to select an option from the directories on the stack and it will navigate back to it.
Where to Buy Black Abaya in Dubai, UAE
Published: 2024-01-14 10:03:05


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

Whether you're looking for a simple and stylish [black abaya](https://casbasics.com/collections/black-abaya
), 

an Emirati-inspired design, or a luxury statement piece, our collection has something for everyone Our online store, https://casbasics.com

[BackLinks](https://docs.google.com/spreadsheets/d/e/2PACX-1vRZftw2HXMEB-IMqC4wOkYhT5MQAWLj22LYJ0UwNxwIf3h9Vdx2VpfdD7k9ks7IFjN2WDAl2KQXciIi/pubhtml
)

https://maps.app.goo.gl/MfG61a4eSrq6Tc2T8

https://www.instagram.com/crystalabayastudio/

https://www.facebook.com/crystalabayastudio

https://sites.google.com/view/backlinks-indexing-2024/home

https://twitter.com/casabayauae
I need some help with my jetpack compose code.
Published: 2024-01-14 09:12:49

Hi there, i hope you are i good health. Recently i got my some hands on jetpack compose and tried to build a small app for gaining experience. Here is the problem that i'm facing below is the code : 


```
 for (permission in permissions){
            val permissionState = rememberPermissionState(permission = permission.permission)
            if (!permissionState.status.isGranted) {
                AccessInfo(
                    accessDetails = permission,
                    isPopupEnabled = false,
                    onDetailLinkClick = { /*TODO*/ },
                    onPopUpButtonClick = { /*TODO*/ },
                    onPermissionResult = { isGranted ->
                        if (isGranted) {

                        }
                    }
                )
            }
        }
```

The above code works fine it checks for the all permission that are provided in list if those are granted or not if not then ui is generated by passing the permission so user can allow the permission. The code works very well even if the user allow or deny any permission by going to the app setting while the app is running. IT working fine. THe problem is if user denied more than one permission the ui is created again and again over each other. What i want it should be sequential. 

Note: I tried all AI tools they are not hitting the correct answer. 

Thank you.
Based on Vue, I have developed an AI Body Fat Percentage Calculation tool.
Tags: webdev, javascript, vue, beginners
Published: 2024-01-14 09:38:33


I developed an AI Body Fat Percentage Calculation tool using Nuxt.js and Vue.js.
Use an AI-based body fat percentage calculator to accurately estimate the percentage of fat in your body weight. With just a few simple steps, you can gain a deep understanding of your physical condition, helping you to develop more effective fitness and diet plans.
[AI Body Fat Percentage Calculation](https://bodyfatcalc.top/ai-calc)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00u1o8ymr85t48kqp6x9.png)
ThreadPool in C#: Practical Examples
Tags: csharp
Published: 2024-01-14 09:13:19

The C# ThreadPool is a powerful feature in the .NET framework that allows efficient and concurrent execution of multiple tasks. It provides a simple and efficient way to manage and execute tasks asynchronously, improving the performance of multi-threaded applications. Let's explore some practical examples of how the C# ThreadPool can be used.

1. Parallelizing Expensive Operations:
Suppose you have a computationally expensive operation that needs to be performed on a large dataset. Instead of executing it sequentially, you can leverage the ThreadPool to execute multiple instances of the operation concurrently. This greatly reduces the overall execution time and improves the responsiveness of your application.

2. Asynchronous Database Calls:
When dealing with databases, network latency can be a significant bottleneck. By using the ThreadPool, you can initiate multiple database calls in parallel, allowing other parts of your application to continue execution without waiting for the database response. This approach leads to a more responsive and efficient application.

3. Handling Multiple Client Requests:
In scenarios where your application serves multiple client requests simultaneously, the ThreadPool can be used to handle the incoming requests concurrently. Each request can be assigned a thread from the ThreadPool, ensuring that they are processed in parallel without overwhelming the system.

4. Background Tasks:
The ThreadPool is also useful for executing background tasks such as sending automated emails, generating reports, or performing periodic cleanup. These tasks can be scheduled to run periodically or triggered based on specific events. Using the ThreadPool ensures that these tasks are efficiently executed without blocking the main thread of the application.

5. Multithreaded User Interface:
In GUI applications, performing long-running operations on the main thread can make the UI unresponsive. By offloading these operations to the ThreadPool, you can ensure that the user interface remains responsive even during heavy processing. This is commonly used when performing file operations, image processing, or complex calculations that require significant CPU resources.

In summary, the C# ThreadPool provides a versatile and efficient way to handle concurrency and parallelism in your applications. By leveraging its capabilities, you can improve performance, responsiveness, and resource utilization. Careful consideration should be given to the number of threads used in the ThreadPool to avoid excessive resource consumption and potential contention.
Exploring Enums in PHP: A Compact Guide
Tags: php, programming, webdev, feature
Published: 2024-01-14 09:05:35

Hey Dev.to community! 👋🏻 Today, let's dive into the world of PHP Enums and discover how they can help you to be more advanced in PHP coding. 🚀

## What are PHP Enums?
Enums, short for Enumerations, provide a way to define a set of named values representing distinct, named constants. Introduced in PHP 8.1, enums bring clarity and robustness to your code by ensuring that only valid values are used.

## Why Use Enums?
**Readability and Expressiveness:** Enums make your code more readable by assigning meaningful names to values, enhancing code expressiveness.

**Preventing Invalid Values:** Enums restrict variable values to a predefined set, reducing the chances of bugs caused by using invalid or unexpected values.

**Autocompletion Support:** IDEs can leverage enum types for autocompletion, improving development speed and reducing errors.

## How to Use Enums in PHP:
- Defining Enums:

```php
enum Status {
    case PENDING;
    case APPROVED;
    case REJECTED;
}

```
- Using Enums

```php
$orderStatus = Status::PENDING;
```
- Switch Statements

```php
switch ($orderStatus) {
    case Status::PENDING:
        // Do something for pending orders
        break;
    case Status::APPROVED:
        // Handle approved orders
        break;
    case Status::REJECTED:
        // Manage rejected orders
        break;
}

```
- Type Hinting: 

```php
function processOrder(Status $status) {
    // Function implementation
}
```

## Enums in Action

```php
class Order {
    private Status $status;

    public function __construct(Status $status) {
        $this->status = $status;
    }

    public function getStatus(): Status {
        return $this->status;
    }
}

$order = new Order(Status::APPROVED);
echo $order->getStatus(); // Output: Status::APPROVED
```

## Conclusion
PHP Enums are a powerful addition to the language, offering a clean and concise way to work with a predefined set of values. By learning a new weapon like enums, you can enhance the readability, maintainability, and correctness of your code. Embrace enums in PHP 8.1 and elevate your coding experience! 🌟

## Resources on Enum: 
1. [PHP Manual](https://www.php.net/manual/en/language.types.enumerations.php)
2. [PHP.Watch](https://php.watch/versions/8.1/enums)
3. [Benjamin](https://benjamincrozat.com/php-enums)
5 USER DESIGN TIPS
Published: 2024-01-14 09:03:57


1. Understand Your Users:

Conduct user research to understand the needs, behaviors, and preferences of your target audience.

2. Keep it Simple:

Prioritize simplicity in design. Avoid unnecessary complexity that might confuse users.

3. Consistency is Key:

Maintain a consistent design throughout your application. Use a cohesive color scheme, typography, and design elements.

4. Prioritize Accessibility:

Design with accessibility in mind to ensure that your application is usable by people of all abilities.

5. Responsive Design:

Ensure your design is responsive and works well on various devices and screen sizes.
Weekly reading digest #22
Tags: php, symfony, backend, softwareengineering
Published: 2024-01-14 09:00:00

[Deploying in Production | FrankenPHP](https://frankenphp.dev/docs/production/)

[Introducing tabular assertions](https://sebastiandedeyne.com/introducing-tabular-assertions)

[Tabular assertions with PHPUnit](https://sebastiandedeyne.com/tabular-assertions-with-phpunit)

[Building Maintainable PHP Applications: Framework Decoupling vs Framework Coupling](https://davorminchorov.com/articles/building-maintainable-php-applications-framework-decoupling-vs-framework-coupling)

[Solving the N+1 problem in ORMs](https://thecodingmachine.io/solving-n-plus-1-problem-in-orms)

[What is a Command Bus? (vídeo)](https://youtu.be/pXVZhFE2pbk)