teleren/devto huggingface dataset:
Getting Started with React: Managing State and Handling User Interactions - Part 2
Tags: beginners, tutorial, react
Published: 2023-11-07 18:19:33

In Part 1 of the guide, you learned how to set up your development environment, create components, and build a simple React app. Now, in Part 2, lets dive deeper into React by exploring concepts like state management and handling user interactions.

## **Step 1: Understanding State in React**
In React, state is a fundamental concept. It represents data that can change over time and influence how your components render. Let's start by adding and managing state in your app.

**Step 1.1: Adding State to the App Component**
Open the src/App.js file in your code editor. We'll add state to your App component to keep track of a counter.

1. Import useState from React at the top of the file:
```
import React, { useState } from 'react';
```

2. Inside your App component, add the following code to initialize a counter state and a function to update it:
```
function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello, React!</h1>
      <Greeting />
      <p>Counter: {count}</p>
    </div>
  );
}
```

**Step 1.2: Updating State with User Interactions**
Now, let's create buttons that allow users to increment and decrement the counter.

1. Add the following button elements within the App component's return statement:


```
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
```

## **Step 2: Handling User Input**
In addition to managing state, React makes it easy to handle user input, such as form submissions. Let's create a simple form in your app.

**Step 2.1: Create a Form Component**

1. In the src directory, create a new file named Form.js:

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

function Form() {
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Do something with the input value, like displaying it in the app.
    alert(`You submitted: ${input}`);
  };


  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={input} onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;
```
**Step 2.2: Using the Form Component**
Open src/App.js, import the Form component at the top, and add it to your app:

```
import Form from './Form';

// ...

function App() {
  // ...

  return (
    <div>
      <h1>Hello, React!</h1>
      <Greeting />
      <p>Counter: {count}</p>
      <Form />
    </div>
  );
}
```

## **Conclusion**
In Part 2 of this guide, you've learned how to manage state in React, allowing your app to respond to user interactions. You've also created a simple form for handling user input. In Part 3, we'll explore routing, fetching data from APIs, and building more complex components. Keep building and enhancing your React skills as we continue this React journey!

Stay tuned for Part 3 of our React adventure!
you are not the owner so you cannot change the permissions Error in Linux
Tags: linux, archlinux, filesystem
Published: 2023-11-07 18:11:11

Recently, I shifted to Linux. After installation, I cannot access my HDD drives because of this error.

The solution to this error is: you have to open the folder where you cannot create/paste any folder/files. Right-click and select the "Open in Terminal" option.

Then, check the permissions using this command:

```
ls -l
```
Now, you'll see that only the root can access the file, and you cannot access it. If you want to access it, you have to change the permissions. This is why you need to execute the following command in the current terminal:

```
cd ..
```
Now, grant the necessary permissions using this command:

```
sudo chown -R "desired_username" path_to_folder/folder_name
```
That's it!
Answer: Could not find server 'server name' in sys.servers. SQL Server 2022
Tags: sql, sqlserver, webdev
Published: 2023-11-07 18:08:38

{% stackoverflow 54703816 %}

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

I just solve my problem, by the way this is my first post on DEV.
Thanks
Create VPN Client to site Open Source in AWS EC2 (PrituNL)
Tags: aws, vpn, pritunl
Published: 2023-11-07 18:02:03

* Create instânce EC2 in public subnet, i used t3a.micro instance type (in tutorial i use Ubuntu 20.4).
* Add Elastic IP in your instance. 
* In Route 53 add record 
subdomain  >>> elastic ip 
* In Security Group add roles 

1. - 80   >>  0.0.0.0/0
2. - 443 >> 0.0.0.0/0


## Step 1: Update your system

```
sudo apt update && sudo apt -y full-upgrade

[ -f /var/run/reboot-required ] && sudo reboot -f

```


## Step 2: Add Pritunl, MongoDB repositories and public key


```
echo "deb http://repo.pritunl.com/stable/apt $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/pritunl.list

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu $(lsb_release -cs)/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list

curl -fsSL https://www.mongodb.org/static/pgp/server-5.0.asc|sudo gpg --dearmor -o /etc/apt/trusted.gpg.d/mongodb-5.gpg

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com --recv 7AE645C0CF8E292A

sudo apt update
```

## Step 3: Install Pritunl and MongoDB

```
sudo apt --assume-yes install pritunl mongodb-org

sudo systemctl start pritunl mongod

sudo systemctl enable pritunl mongod

```

## Step 4: Configure Pritunl on Ubuntu 20.04

Access console vpn
https://YOUR_ELASTICIP

- In Ubuntu terminal run comands for get initial  password 

```
sudo pritunl setup-key
```
- Add key generete in your console vpn

```
sudo pritunl default-password

```

- Login in console vpn with these credentials, and go to Settings. 

- In settings rename admin user and change passaword. 
- In Lets Encrypt Domain, add your domain for get SSL acces with certificate and save. 

## Step 5: Configurate Server

- In server, Add new server. 
- In console aws, give acess for 0.0.0.0/0 for port your server. 
- DNS server, if you want private access only, add DNS server of yours VPC and save. 

## Step 6: Add route

If you want access in your VPN only, click in Add route, and put your VPN CIDR, and remove route 0.0.0.0. 

## Step 7: Organization

- In User, click in add organization,come to server, seletct your server and add your organization in your server. 

- After this, create your users and give URL for access.
Kubescape 3.0 is available to enhance your K8s security experience
Tags: kubernetes, security, opensource, devops
Published: 2023-11-07 17:36:58

Kubescape is the first Kubernetes security scanner that was accepted to the cloud native computing foundation. Kubescape 3.0 is a major release that extended the functionality of the original misconfiguration scanner to include vulnerabilities and usabillty improvements.
If you are interested in an overview, feel free to check out [the blog post](https://kubescape.io/blog/2023/09/19/introducing-kubescape-3/).
To dive straight into the code check out [the repo](https://github.com/kubescape/kubescape).
I'd love it hear what you think. What you like, what can be improved and of course, if you have any questions, hit me up.
Config-file-validator v1.5.0 Released!
Tags: opensource, showdev, go, devops
Published: 2023-11-07 17:36:04

We have just released a huge update to the [config-file-validator](https://github.com/Boeing/config-file-validator):

- Added support for specifying multiple search paths
- Added --depth CLI argument to customize recursion depth with scanning search paths
- Added --version CLI flag to display the current config-file-validator version
- Added support for HCL, CSV, Properties, and Apple PList XML validation

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

There is also a [Github Action](https://github.com/kehoecj/validate-configs-action) for easily integrating configuration file validation into your Github Actions workflow.

All of the updates were from members of the OSS Community!
Skypvt
Tags: webdev
Published: 2023-11-07 17:30:35

SkyPrivateCams.com is a private European webcam Skype online dating site. It is compensation for each moment answered for Skype calls. The website's core element is a Skype module that permits our clients to charge each moment for Skype video calls.
This is a grown-up webcam visit service that depends on the well-known VoIP application Skype. People who are exhausted with their lives and wish to encounter new sentiments will view this as great. Clients and models are from everywhere in the world which empowers them to get new sensual encounters with no risks and responsibilities. Clients are urged to keep up with their secrecy, while online models give various services as indicated by every client's longings.


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

Site designers took motivation for their area name from the video talk service they use, Skype. In addition, the correspondence is all around shielded, and you don't have to stress over your protection: that is the reason the last part of the name is private. The website includes no erotic substance: people register and pick the model they would need to impart. Watchers might scrutinize model profiles free of charge, yet should pay to see the real private show.

It is incredibly uncommon among the live **[Skype Camgirls](https://skyprivatecams.com)** services. A few tasks are more clear, and the qualities are better than expected. We should have a short gander at them! On here you can interface with intuitive toys to associate all the more intimately with the models. As indicated by our perceptions, the most often utilized toys are from the brand. 

Webcam young ladies are exceptionally enthusiastic about involving these gadgets for private talks since they get more tomfoolery and tips. On the off chance that you are over-fulfilled or under-happy with the exhibition, you might feel the need to leave a tip. That is the reason we chose this website as a live cam service, and we chose to survey it. During the call, you can offer the model a rating utilizing stars. Give her one star if you could have done without her; five splendid stars assuming you did.
Farzin Fardin Fard who has 3fmusic identity is unique finance fraudster, not a crypto activist!
Published: 2023-11-07 17:26:53

In the labyrinthine realm of global financial scams, the Unique Finance scheme stands as a notorious emblem of deception, leaving a wake of devastation that transcends borders and nations. Amidst the intricate web of deceit, one name emerges as a pivotal figure, casting a long shadow over this fraudulent network: Farzin Fardin Fard. While renowned as a successful sound engineer and the proprietor of 3F Music, a prominent music recording studio nestled in Dubai’s vibrant cultural landscape, beneath this veneer lies a much darker and clandestine narrative.

Farzin Fardin Fard’s journey into the world of music began with an innate passion that germinated in his formative years. A musician and producer by origin, he embarked on a creative odyssey that eventually led him to the realm of sound engineering. It was here that he discovered his true calling and established one of Iran’s pioneering digital studios approximately a quarter of a century ago. While this represents the legitimate inception of his career, the trajectory of his life takes a stark and disconcerting detour when we dig deeper into his story.

Beyond the melodies and harmonies that have marked his musical journey, there exists a disquieting narrative of Farzin Fardin Fard’s alleged involvement in the Unique Finance scam. This global financial fraud network, orchestrated by individuals like him, has left countless victims grappling with significant financial losses, while he seemingly thrived in opulence.

As authorities worldwide labor tirelessly to apprehend those responsible for the Unique Finance scandal, victims anxiously await their day in court. Farzin Fardin Fard’s alleged role in this intricate web of deception has attracted international scrutiny, underscoring the dualities that shroud his identity.

This multifaceted narrative of dual personas serves as a stark reminder of the intricate world of financial fraud and the profound ripple effects it generates across borders. It underscores the importance of global cooperation in dismantling fraudulent networks, ensuring accountability for individuals like Farzin Fardin Fard, and, most importantly, safeguarding the financial well-being and trust of individuals worldwide.

As this complex story continues to unfold, it is imperative for individuals worldwide to remain vigilant and informed about Farzin Fardin Fard’s alleged involvement in financial scams. In the relentless pursuit of justice, it is our collective responsibility to shed light on the hidden truths and unravel the enigma that shrouds his actions.
Bridging Data and Marketing in the AI Arena: My Journey
Tags: marketing, ai, bigdata, analytics
Published: 2023-11-07 17:15:48

Hello, dev.to community! My name is Jake, and I'm thrilled to share my first post here. 

With a decade of experience in marketing & analytics (mostly content and product marketing) and a Master's degree in Big Data and Data Analytics, **I've found myself at the confluence of two fascinating fields: marketing and data science**.

**Currently, I'm channeling this blend of skills into my role at an AI startup**, and I'd love to dive into how these worlds intersect and why it's such an exciting time to be in this space.

### The Symbiosis of Data and Marketing

Marketing has always been about understanding the audience, but the rise of big data has taken this to a whole new level. 

**Data analytics** offers insights that are reshaping how we approach marketing strategies.

At our AI startup, I leverage large datasets + **AI** to tailor marketing efforts that we more or less know will make an impact. 

Campaigns resonate on a deeper level with our audience, because they're informed by a wealth of data-driven insights.

### The AI Startup Experience

Working for an AI startup is as challenging as it is exhilarating. The pace is fast, the technology is cutting-edge, and the potential for innovation is vast. 

**AI is enhancing how we analyze data and execute marketing strategies**.

One of the most exciting aspects is seeing firsthand how AI can identify patterns and trends that even experienced marketers might miss. 

Not to mention it just speeds up the workflow remarkably. You can test and iterate more ideas in less time to narrow in on the right content and marketing angles. And you don't spend anywhere near as much of your mental energy to do the same amount of work. Writers block, brain fog, you can get through it all and **get to the 20% that you like doing and that moves the needle with way less effort**. 


### Looking Ahead

I'm passionate about sharing my journey and learning from others in this space. Whether you're in data, marketing, or just AI-curious, we all have valuable insights to contribute.

**In future posts**, I'll delve into specific cases, the challenges we face, the successes we celebrate, and the lessons learned along the way. 

I'm eager to explore topics like the ethical use of data, the integration of AI into traditional marketing roles, and much more.

#### Let's Connect

I'm here to learn, grow, and connect with like-minded professionals. So, drop your thoughts in the comments, share your experiences, and let's start a conversation. 

If you're interested in the intersection of data and marketing in the AI world, give this post a ❤️ and follow me for more.

Looking forward to this new adventure on dev.to!
What will the relationship between humans and AI be in 50 years?
Published: 2023-11-07 17:14:19

Predicting the exact nature of the relationship between humans and AI in 50 years is challenging, but we can speculate on some possibilities. It's likely that AI will continue to play an increasingly prominent role in various aspects of our lives, including work, healthcare, education, and entertainment. AI may assist humans in solving complex problems, making tasks more efficient, and enhancing creativity. Ethical and societal considerations will be important, such as addressing issues related to privacy, bias, and job displacement. Overall, the future relationship between humans and AI will depend on technological advancements, policy decisions, and how society adapts to these changes.
I made a CSS Frankenstein 👻
Tags: webdev, css, frontend
Published: 2023-11-07 17:14:18

Hi folks 👋 Today, I wanted to share with you this cool **CSS art** I made as part of a spooky [CSS Battle](https://cssbattle.dev/play/177) 👻:

{% codepen https://codepen.io/francescovetere/pen/dyaOdww %}

This was not only a lot of fun, but really educational too.
 
* I found out that the **head** shape could be easily accomplished with a fancy `border-radius`, which I generated with this [cool website](https://9elements.github.io/fancy-border-radius/). Basically, that shape is obtained with a:

`border-radius: 15% 15% 100% 100% / 15% 15% 100% 100%;`

* Also, the **hair fringe** was perfectly suitable for a `clip-path`. I used this other [cool website](https://bennettfeely.com/clippy/) in order to better visualize what I was clipping. I basically want a triangle, so I can obtain it with:

`clip-path: polygon(100% 0, 0 0, 50% 100%);`

* The **mouth** was also perfectly suitable for a `clip-path`, since it is essentially a semicircle:

`clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);`

📽️ If you enjoy these kind of things, here's a video of me speedrunning through the whole process 😉

{% youtube https://www.youtube.com/watch?v=XP5YGIJcGis %}

Of course, as often happens in CSS, there are a **lot of different ways** we could accomplish the same results. **Let me know** if you would have done something differently in any way, I'm really curious! 😊

<a href="https://www.buymeacoffee.com/francescovetere" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
What will the relationship between humans and AI be in 50 years?
Published: 2023-11-07 17:14:16

Predicting the exact nature of the relationship between humans and AI in 50 years is challenging, but we can speculate on some possibilities. It's likely that AI will continue to play an increasingly prominent role in various aspects of our lives, including work, healthcare, education, and entertainment. AI may assist humans in solving complex problems, making tasks more efficient, and enhancing creativity. Ethical and societal considerations will be important, such as addressing issues related to privacy, bias, and job displacement. Overall, the future relationship between humans and AI will depend on technological advancements, policy decisions, and how society adapts to these changes.
Web Accessibility Matters
Tags: a11y, workshop, webaccessibility, html
Published: 2023-11-07 17:12:25

Would you intentionally isolate 15% of your customer-base?

If you aren’t using accessibility best practices on your website - you’re doing exactly that.

15% of the population - roughly 1 billion people - according to the World Health Organization, are living with a disability. People with inhibited motor functions may use key strokes to get around online, rather than a mouse. Users who are visually impaired may use a screen reader. If a website doesn’t have accessibility built into their code, these tools are rendered useless.

What’s more, according to a 2021 PEW study, 23% of people with disabilities said they almost never go online. Why? Because the internet isn’t built with them in mind.

You might be thinking, but there are laws about accessibility compliance, right? While the Web Content Accessibility Guidelines (WCAG) and Section 508 have linked up to improve accessibility across the web, section 508 does not apply to private company’s websites, unless they receive federal funds or are under contract with a federal agency. This leaves nearly 90% of websites non-compliant with [basic accessibility guidelines](https://abilitynet.org.uk/news-blogs/inaccessible-websites-keep-disabled-people-out-work-abilitynet-tells-government-taskforce).

So how can we do better?

- If you work in software, invest in resources for your devs to learn about accessibility standards and best practices.
You can view a free checklist of the [WCAG guidelines](https://www.w3.org/TR/2006/WD-WCAG20-20060427/appendixB.html).

- Make accessibility an expectation from the start. This can save you time and money down the line and it ensures everyone who wants to access your site can do so successfully.

- Avoid relying on AI & overlays. Most AI tools are works in progress and while there may be uses for them in the future, right now they aren’t as good as traditional, hard-coded accessibility methods.

Overlays claim to be quick tool for making your website WCAG compliant. Adding one line of code to your website sounds like a no brainer - don’t fall for the marketing. These overlays can conflict with screen readers, making it even more difficult for users with disabilities to navigate your site.

Haben Girma, a Disability Justice Lawyer, gives a wonderful [overview](https://www.youtube.com/watch?v=R12Z1Sp-u4U&t=50s) of why relying on AI and overlays prevents people with disabilities from interacting with your site effectively.

- Ask real users with disabilities to test your site. There is no substitute for asking people who depend on accessibility to let you know what works and what doesn’t.

- Finally, if walking through resources and checklists alone feels overwhelming or you want more insight into the business value accessibility can give you-attend a free, virtual web accessibility training on Thursday, November 16th at 11am CT.

Register for the workshop here: https://www.bitovi.com/events/accessibility-training 

Will you and your company prioritize accessibility?