teleren/devto huggingface dataset:
How to find XPath in Chrome
Tags: python, programming, tutorial
Published: 2023-10-13 09:04:54

What is XPath?

XPath is a major element in the XSLT standard.

XPath stands for XML Path Language, it is a language for finding information in XML documents. It was originally used to search for XML documents, but it is also suitable for searching HTML documents. So when doing crawlers, you can use XPath to extract the corresponding information.

XPath uses “path like” syntax to identify and navigate nodes in an XML document.

In addition, it also provides more than 200 built-in functions for string, numeric, and time matching, as well as the processing of nodes and sequences. Almost all the nodes you want to locate can be selected using XPath.

How to get the XPath of the element？

1. Open Chrome and find a website.


2. Press F12 or right-click \”Inspect“\ or use the shortcut key Ctrl+Shift+I.


3. Click the button in the upper left corner or press CTRL+SHIFT+C.


4. After pressing the button and moving the mouse to the page, you will find that different colors appear in different locations.


5. At this point we click any location, elements will change.


6. Right-click in the area where the color changes, Copy->Copy XPath can copy XPath from the webpage, and then press CTRL+V to check whether the copy is successful.


This is the copied XPath


P.S. This operation is just the first step in getting web content or crawlers. If you need more, you can search for related tutorials.
How to Write Cleaner React Code
Tags: cleancoding, bestprinciples, modular, solidprinciples
Published: 2023-10-13 09:04:09

##1) Functional Component with Props:

jsx

// ItemList.js

import React from 'react';

const ItemList = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default ItemList;
In this example, we've created a functional component ItemList that takes a items prop, which is an array of objects. We use destructuring in the function parameter to access the prop.

##2) PropTypes:

To document the expected types of props, you can use PropTypes:

jsx

import PropTypes from 'prop-types';

ItemList.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired,
    })
  ).isRequired,
};
This code defines PropTypes for the ItemList component, specifying that items is an array of objects with id and name properties.

##3) Conditional Rendering:

If you want to conditionally render items based on a prop, you can use a ternary operator:

jsx

const ItemList = ({ items, showItems }) => {
  return (
    <ul>
      {showItems
        ? items.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))
        : <li>No items to display</li>}
    </ul>
  );
};
Here, we conditionally render items based on the showItems prop.

##4) CSS and Styles:

Let's define a CSS module for styling the component:

css

/* ItemList.module.css */

.item-list {
  list-style: none;
  padding: 0;
}

.item {
  margin-bottom: 8px;
}
Apply the styles in your component:

jsx
Copy code
import React from 'react';
import styles from './ItemList.module.css';

const ItemList = ({ items }) => {
  return (
    <ul className={styles['item-list']}>
      {items.map((item) => (
        <li className={styles.item} key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};
##5) Code Formatting and Linting:

Ensure your code is properly formatted using Prettier, and use ESLint to enforce coding standards.

##6) Error Handling:

Add error handling for props, and if the items prop is missing or empty, you can display an error message or fallback UI within the component.

##7)Testing:

Write unit tests for your component using a testing library like Jest and React Testing Library. Here's a simple test example:

jsx

import { render } from '@testing-library/react';
import ItemList from './ItemList';

test('renders a list of items', () => {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
  ];

  const { getByText } = render(<ItemList items={items} />);
  expect(getByText('Item 1')).toBeInTheDocument();
  expect(getByText('Item 2')).toBeInTheDocument();
});
These examples demonstrate clean coding practices in React, including the use of functional components, PropTypes, conditional rendering, CSS modules, code formatting, linting, and testing. When you write your Medium article, you can explain each of these practices in more detail and provide a complete, real-world example for readers to follow.
Fueling Developer Success: The Power of Continuous Learning
Tags: beginners, discuss, career, productivity
Published: 2023-10-13 09:02:00

In today's fast-evolving tech landscape, remaining at the forefront of your industry requires more than just a job search. It demands continuous skill enhancement. As the founder of [Rico](https://ricosaas.eu/), a platform revolutionizing job hunting by streamlining application processes, I understand the unique challenges that developers face when seeking employment.


Continuous learning isn't merely a buzzword; it's a lifeline for developers. [Rico's](https://ricosaas.eu/) mission isn't just to simplify the job search process; it's about granting you the precious gift of time to focus on what matters most: skill development.


Here's why continuous learning is your secret weapon as a developer:

- Adaptability to the X Degree: The tech world doesn't stay still for anyone. Languages, frameworks, and tools evolve constantly. To stay ahead, developers must master the art of adaptation. [Rico](https://ricosaas.eu/) frees your time to embrace these changes proactively.

- Career Elevation: The more you learn, the more valuable you become. Continuous skill enhancement isn't just about impressing potential employers; it's about taking your career to new heights. [Rico](https://ricosaas.eu/) empowers you to find the ideal job and invest more in your professional growth.

- Unlocking Creativity: The ability to think critically and solve complex problems is what sets exceptional developers apart. By automating the tedious job search process, [Rico](https://ricosaas.eu/) provides you with more time to nurture creativity and innovation.

- Personal Fulfillment: Every line of code you write, and every problem you solve, is a testament to your growth. Learning isn't merely a means to a career end; it's an enriching journey of self-discovery.

- Financial Gains: By enhancing your skillset, you pave the way for higher-paying positions. Your investment in learning pays substantial dividends.

Continuous learning isn't an option; it's a core part of your journey as a developer. With [Rico](https://ricosaas.eu/) in your corner, you gain not only the opportunity to secure the job of your dreams but also the precious freedom to sharpen your skills and advance your career.

As a developer, your path to success is not defined by the jobs you land but by your enduring commitment to learning, evolving, and excelling. [Rico](https://ricosaas.eu/) is your partner in this journey, automating your job search and granting you the time you need to invest in continuous learning.

> Harness your potential, chase your dreams, and embrace the world of boundless knowledge that awaits. [Rico](https://ricosaas.eu/): the catalyst for developer success.
Run React App Localhost in Https in 2 steps
Tags: javascript, react, webdev, beginners
Published: 2023-10-13 08:57:35

**Question**->
How do I use the React development server to serve requests from https while working on localhost?


**_Ex ->https://localhost:3000_**


**Advantages of using `Https `in localhost**

```
1. Access to 3rd party API's without CORS error.
2. Working with cookies made easy.
3. Accessing Google and Facebook API's without deploying the 
    application.
```

 


---

## For React App Created with **_<u>Vite</u>_**
---


## **Step-1**
1.Install [vite-plugin-mkcert](https://www.npmjs.com/package/vite-plugin-mkcert) package.

## **Step-2**
2. Change in `vite.config.js`

```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mkcert from 'vite-plugin-mkcert'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),mkcert()],
  server:{
    port:3000,
    https: true
  }

})
```
and then start your application with `npm run dev`

---

## For React App Created with **_<u>create-react-app</u>_**
---



## **Step-1**
1.Install [cross-env](https://www.npmjs.com/package/cross-env) package.

## **Step-2**
2. Modify **_start_** script in package.json
and it should look like this

```
    "start": "cross-env HTTPS=true react-scripts start",

```

and Done .. Now Run your app using `npm start`.

---
---

if you get any package issue plese install all the package again using `npm install` or `yarn install`

If facing any issue in browser like this
![Run React App Localhost in Https in 2 steps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1henwqszqqw1qy8g9s92.png)

then click on `advance `button and click on `continue to site`.

![Run React App Localhost in Https in 2 steps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asf3aj7xt9zbtdb3ovry.jpg)

.. Happy coding..

if this article helps  please don't forget to Share with other..
Seamless Integration: Dockerizing FastAPI and Streamlit Together
Tags: docker, fastapi, streamlit, development
Published: 2023-10-13 08:56:06

I’m cooking up a snazzy REST API using Python’s FastAPI, and guess what? I’m getting a helping hand from OpenAI’s API for those fancy embeddings and chat finishes.

Now, Swagger UI is like that one guest who dozes off after a hearty meal — it gets sluggish with too much data. So, I brought in Streamlit! It’s like the quick and witty friend who always has a tool up their sleeve, and the best part? It speaks Python, just like us. 

To keep things neat and not mix my spaghetti with my meatballs, I’ve given the backend and frontend their own cozy rooms (folders) with their Dockerfile luggage. And just to jazz things up, there’s a snappy docker-compose.yml tune at the project’s entrance to keep the party running without a hitch!

![directory structure image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8nbnn628gmmr1foztb7.png)

Think of it this way: both have their own **localhost** homes, but if you knock on the **`0.0.0.0`** door, you’ll be greeted by the first container — probably with a virtual cup of tea! So doing this is like setting up a playdate for our two containers! In our local development playground, they can chit-chat seamlessly.

At first glance, it might seem like we’re diving into a plot twist in a mystery novel. But fear not! As you flip through each page (or, in our case, code file), you’ll soon realize it’s more like a light-hearted comedy — easy to follow and fun to understand!

Alright, grab your coding apron! Below are some ‘recipes’ for each file. Feel free to add a pinch of this or a dash of that to tailor them to your gourmet coding tastes.

Before we whip up our docker-compose masterpiece, make sure your directories are named **backend** and **frontend** or change them if you want to suit your palate. Think of it as prepping your ingredients before a big bake-off! Once that’s sorted, snag the recipe below and let’s get mixing.

![docker-compose.yml image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7i0lanbvscb7gteuye3.png)

And for the **backend** dish — just follow grandma’s secret recipe below. Copy and you’re one step closer to culinary coding magic!

![dockerfile backend image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n96bkplozp37jhopdo9x.png)

Moving on to the **frontend** course — let’s keep the culinary coding spree going!

![dockerfile frontend image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsbd4vpnso15n0cox8t3.png)

Voilà! Once you’ve prepped everything, simply fire up the kitchen with **`docker-compose up --build`** to get all those ingredients mingling in each directory. Then, for a taste of your backend, pop over to `0.0.0.0:8001`, and for a slice of the frontend action, it's `0.0.0.0:8501`. 

Bon Appétit to your coding dish!
Best AI tools for code generation.
Tags: aitools, chatgpt, javascript, coding
Published: 2023-10-13 08:52:47

Efficiency is critical in the fast-paced world of software development today.

AI technologies are playing a pivotal role in expediting the coding process for developers.

Advanced AI models like GPT-3.5, [ChatGPT](https://www.aitoolhouse.com/tools/chatgpt), [Bard](https://www.aitoolhouse.com/tools/google-bard) and others have proven to be transformative tools for developers.

These tools empower developers to write code more efficiently and effectively.

This blog will provide an overview of the key AI tools that are changing the developer scene and delve into the field of code generation in an easy-to-read manner.

### Here are the benefits of using AI tools for code generation

- Increased Productivity

- Faster Development

- Error Reduction

- Code Optimization

### What tools do I need to start coding?

1. [Assembly AI](https://www.aitoolhouse.com/tools/assemblyai) : Transcribe and understand audio with AI models: ASR, NLP, Speech-to-Text.

2. [Codeium](https://www.aitoolhouse.com/tools/codeium) : Codeium is a code completion tool powered by AI that aims to simplify the coding process. 

3. [Mars AI](https://www.aitoolhouse.com/tools/marsai) : Low-code platform for building web and mobile apps.

4. [ChatGPT](https://www.aitoolhouse.com/tools/chatgpt) : Ahh how can we forget ChatGPT XD.
  
### AI tools for coding like ChatGPT

1. [AgentGPT](https://www.aitoolhouse.com/tools/agentgpt) : Deploy Autonomous AI Agents with AgentGPT's Innovative Tool.

2. [PoplarML](https://www.aitoolhouse.com/tools/poplarml) : PoplarML allows for the easy deployment of scalable ML systems in production.

3. [SafurAI](https://www.aitoolhouse.com/tools/safurai) : Safurai is a plugin for IDE that leverages AI technology to support developers in coding, debugging, and refactoring tasks.

4. [Google Bard](https://www.aitoolhouse.com/tools/google-bard) : Bard aims to utilize the extensive knowledge available worldwide together with the capabilities of our advanced language models to provide insightful and innovative responses.

5. [Perplexity AI](https://www.aitoolhouse.com/tools/perplexity-ai) : Perplexity AI is a demo AI search engine inspired by OpenAI WebGPT.

*The potential of these amazing tools will shape the future of coding, therefore if you want to stay ahead of the curve, you must embrace AI's influence on your development process.*


Explore 3000+ latest AI tools at [AI Toolhouse](https://www.aitoolhouse.com).
Pune AWS Community Day 2023 Chronicles
Tags: aws, dataops, devops, community
Published: 2023-10-13 08:31:49


𝐀𝐧 𝐀𝐛𝐬𝐨𝐥𝐮𝐭𝐞 𝐃𝐞𝐥𝐢𝐠𝐡𝐭 𝐭𝐨 𝐂𝐨𝐧𝐭𝐫𝐢𝐛𝐮𝐭𝐞 𝐭𝐨 𝐖𝐨𝐦𝐞𝐧𝐈𝐧𝐓𝐞𝐜𝐡 𝐏𝐚𝐧𝐞𝐥 & 𝐓𝐞𝐜𝐡 𝐓𝐚𝐥𝐤 𝐚𝐭 𝐀𝐖𝐒 𝐂𝐨𝐦𝐦𝐮𝐧𝐢𝐭𝐲 𝐏𝐮𝐧𝐞 𝟐𝟎𝟐𝟑

Being a part of the AWS Community Pune 2023 WomenInTech Panel and having the opportunity to deliver a tech talk was truly a pleasure. The event provided a unique platform to connect with like-minded individuals, share insights, and contribute to the vibrant tech community.

Empowering Tech Women: Panel Discussion with AWS Team
Image

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgj0pazasyo5hodnonrr.png)
 
 The OpsEffect of Dev, Data, ML and FM  followed by Quiz and give aways by Aakriti Gupta, HR Director, Intuitive.Cloud

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


**Links**

[YouTube](https://youtu.be/1vU9B9IFEm4), [LinkedIn](https://www.linkedin.com/posts/bhuvanas_aws-awscommunity-womenintech-activity-7118502673938620416-Vmf-), [Facebook](https://www.facebook.com/100000322342168/videos/1075095980522018/)

**Gallery** 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmwljutqi2773wccttqx.png)
Sponsor HelperX: Empowering macOS Users for Increased Productivity
Tags: software, productivity, macos
Published: 2023-10-13 08:09:33

Welcome to HelperX, the ultimate all-in-one utility and productivity app for macOS. We invite you to become a sponsor and join us in our mission to revolutionize the way users navigate and optimize their Mac experience. By sponsoring HelperX, you are not only supporting the continued development and maintenance of this powerful app but also gaining exclusive benefits that enhance your own productivity.

### Enhance Your Productivity with HelperX

HelperX is designed to simplify your daily tasks, boost your efficiency, and streamline your workflows. This feature-rich app offers a comprehensive suite of tools and functionalities, from system optimization and file management to productivity enhancements and customization options. With HelperX, you have everything you need to take control of your Mac and unlock its full potential.

### Your Sponsorship Matters

By sponsoring HelperX, you become an integral part of our mission to provide macOS users with a top-notch utility app that simplifies their lives. Your sponsorship enables us to continue adding new features, improving existing functionality, and ensuring that HelperX stays up-to-date with the latest macOS updates. Your support is crucial in maintaining the app's stability, security, and overall performance.

### Exclusive Benefits for Sponsors

As a sponsor, you gain access to a range of exclusive benefits that enhance your HelperX experience. Enjoy early access to beta releases, giving you a sneak peek into upcoming features and improvements. Benefit from priority customer support, ensuring that your questions and concerns are addressed promptly and efficiently. Most importantly, your sponsorship gives you the opportunity to shape the future direction of HelperX through your valuable feedback and suggestions.

### Affordable and Accessible for All

We believe that productivity tools should be accessible to everyone. Your sponsorship not only helps us maintain and improve HelperX but also allows us to keep it affordable and accessible to a wider audience. By sponsoring HelperX, you are contributing to the democratization of productivity, empowering users from all walks of life to achieve more with their Macs.

### Join the HelperX Community

Join us in our commitment to making macOS users' lives easier and more efficient. Sponsor HelperX today and experience the true power of an all-in-one utility app that sets new standards in productivity on the Mac platform. Together, we can unlock the full potential of macOS and empower users to achieve more. Your sponsorship makes a real difference in the lives of Mac users worldwide.

Website: [https://helperx.io](https://helperx.io)
Github: [https://github.com/HelperXApp/HelperX](https://github.com/HelperXApp/HelperX)
Placeholder Maintainer
Tags: hack23maintainer
Published: 2023-10-13 08:02:00

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
<!-- Share a bit about yourself as a maintainer. Is this your first Hacktoberfest, or have you maintained in others? Feel free to embed your GitHub account by using {% embed LINK %} -->

### Project
<!-- Tell us about the repository that you hosted. What processes did you set up to review and merge pull requests? Feel free to embed your GitHub repo by using {% embed LINK %} -->

### Highs and Lows
<!-- What were some of your biggest accomplishments or light-bulb moments this month? Did any problems come up that seemed impossible to fix? How did you adapt in those cases?  -->

### Growth
<!-- What was your skillset before Hacktoberfest 2023 and how did it improve? Have your project goals changed since publicly maintaining it? -->
Placeholder Contributor
Tags: hack23contributor
Published: 2023-10-13 08:01:41

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
<!-- Share a bit about yourself as a contributor. Is this your first Hacktoberfest, or have you contributed to others? Feel free to embed your GitHub account by using {% embed LINK %} -->

### Highs and Lows
<!-- What were some of your biggest accomplishments or light-bulb moments this month? Did any problems come up that seemed impossible to fix? How did you adapt in those cases?  -->

### Growth
<!-- What was your skillset before Hacktoberfest 2023 and how did it improve? Have your learning or career goals changed since working on these new projects? -->
cURL critical vulnerabilities
Tags: curl, cybersecurity, vulnerabilities, opensource
Published: 2023-10-13 08:00:40

cURL project's recent release 8.4.0 is set to tackle #serious security #vulnerabilities. Stay ahead of the game reading the following post, but don't panic! RELIANOID remains #unaffected! 

https://www.relianoid.com/blog/addressing-curl-high-severity-vulnerabilities-cve-2023-38545-cve-2023-38546/

#cybersecurity #cURL #RELIANOID #SecurityUpdates #DigitalAssets #VulnerabilityManagement #CyberThreats #InfoSec #NetworkSecurity #OpenSource #cURL8.4.0 #SecurityTools #CVE38545 #CVE38546 #StaySecure #OnlineSafety #PatchManagement #CyberAwareness #CyberProtection #SoftwareSecurity #SystemUpdates #ITSecurity #SecureYourSystems #StayInformed
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fooc8y3nh94tkcv661qf.jpg)