teleren/devto huggingface dataset:
Deploying OpenVPN on AWS
Tags: aws, vpn, network, cloud
Published: 2023-03-16 10:37:06

When it comes to VPN, it may b important for your infrastructure to use, since you may have to serve private content without publicly exposing services on the internet. 

For example: internal portals for employees typically need to be accessible only via a private network.

Thanks to AWS Community AMIs since it provides a verified AMI for the OpenVPN server.

In this article we will demonstrate how to setup an OpenVPN server on AWS EC2 instance and how to access it.

Below are mainly the features of OpenVPN server:

- OpenVPN Access Server delivers the enterprise VPN to your business. 

- Protect your data communications and provide encrypted remote access to on-premise, hybrid, and public cloud resources.

- Access Server provides you with a powerful and easy-to-use web-based admin site that makes VPN management and configuration in a simple way.

- Access Server integrates OpenVPN server capabilities, enterprise access management, OpenVPN Client software packages works on different operating environments:
Windows.
MAC.
Linux, and mobile OS (Android and iOS) environments.

- OpenVPN offers different licensing model on AWS starting from 2 concurrent connection with no cost other than the AWS hardware costs

## Solution Pre-requisites 

- AWS Account.
- VPC with Public subnet to host the EC2 instance on it.
- OpenVPN deployed on EC2 (Can be deployed from Marketplace).
- A router supports VPN. 

## High Level Design 


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


## Implementation Steps 

1. Login into AWS console with your credentials.
2. Search in the address for VPC and select VPC service
3. Create a VPC any name you want with 1 public and 0 private subnet.
4. Search for EC2 instance service and select it to start launching a new EC2 which will be working as VPN access server.
5. Here we will select Browse AMI and search for OpenVPN
6. Search for OpenVPN and select AWS Marketplace AMI
7. Create a new key and select it then launch the instance in the provisioned VPC and public subnet
8. After the instance is ready press connect and select SSH Client, I used Gitbash to connect to it using the key created, make sure to chmod to 400 of the key as per the instructions in SSH client tab.
9. ssh -i “yourkey.pem" root@ecx-x-x-x-x.us-west-2.compute.amazonaws.com
10. use sudo passwd openvpn to change the openvpn user password 
11. Navigate into your browser and paste the public ip of EC2 instance as below http://instance_public_ip:943/admin then enter username OpenVPN and password you created above
12. Navigate on Configuration VPN Settings and make sure the client internet traffic to be routed through the VPN option is true.
13. Press Update Running Server to reflect the configuration.
14. Navigate into http://instance_public_ip:943/ and login into the page you will be redirect into this for me it will be windows.
15. Enter your server configuration in the OpenVPN connect.
Are you ready to go green ?
Tags: webdev, programming, productivity, discuss
Published: 2023-03-16 10:28:26

##Do you consider the environmental impact of the applications you are developing?

The world becomes increasingly concerned about climate change, and most businesses are looking for ways to reduce their carbon footprint and promote sustainability. 
However, I don't feel like there's massive changes in the tech game in order to switch habits and search for a more virtuous circle. 
The energy consumption and carbon emissions of applications are significant, and developers have an important role to play in creating low carbon apps.

But do you really care ? Are you open to using alternative technologies or tools to reduce the carbon footprint of your applications?  

##Where are you in the tree ? (imagine the tree is "green technology")

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

Wherever you see yourself in that tree, I would love to know why... What's on your mind ?
Step-by-Step Guide to the Website Development Process - CraftedQ
Published: 2023-03-16 10:21:56


The website development usually involves planning, design, development, testing, initiation, maintenance, and optimization. At the planning stage, the objectives, target audience, content, and functionality of the Web site are established. The design stage involves creating the visual design and user experience. Development involves building the website using web development languages and content management systems. Testing ensures that the website is functional, usable, and compatible with different devices and web browsers. Once tested, the website is launched and requires ongoing maintenance to remain functional and up-to-date. Optimization involves gathering data and making changes to improve the website's performance and user experience. These stages may overlap or be revisited to ensure a successful final product. This infographic by CraftedQ deals with the various process involved in choosing the right website development process.
https://craftedq.com/web-development/
Designing a scheduling service
Tags: rust, distributedsystems
Published: 2023-03-16 10:20:52

It's been so long since I have written a technical post, that I feel like I have completely forgotten how to write one. Deep breath and let's start.

Historically in most places I worked for, there was always a need for a scheduling service. These could come into many different flavours:

* Embedded into an app
* Implemented through a queuing mechanism
* Triggering jobs or services
* Notifying through a webhook

Some of them can be solved with traditional ways i.e cron jobs, others need a more complex solutions. 

For dotnet languages the solution would usually be [Hangfire](https://www.hangfire.io/).
For Java was the language of choice that would usually be [Quartz](http://www.quartz-scheduler.org/).

But when this discussion starts, it is always a heated one with lots of opinions on the how(s) and why(s). 

I always found it fascinating, when a certain space has so many opinions. In these cases, I feel the urge to add my opinion to the pool. 

This is just a mental exercise, I like to overthink a problem and try to create a solution that makes sense to me. 

So I came up with this


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

Initially, I tried to make the components to run on different threads. Which worked, but something bugged me. 

Then I thought, it would be nice, if individual component could scale based on its needs, without the need to redeploy all of them.

So I split everything, on it's own executable. They didn't have to communicate with each other anyway. Every binary has a single specific responsibility. At this stage I am using the database to sort any data race conditions. But the actual datastore shouldn't matter that much, you could use one, or many. 

My language of choice is Rust and I have used [Postgres ](https://www.postgresql.org/)as the db engine and [SeaORM ](https://github.com/SeaQL/sea-orm)and [Rocket ](https://rocket.rs/)for the main frameworks. 

It's definitely a project I want to see through and create something stable, but as typically things that are not used or are intended to be used in production, rarely survive as actual projects. But, they do make excellent references as training material. 

This is the repository if anyone is interested. [link here](https://github.com/elasticrash/fluid)
Reusable SVG components in React
Tags: beginners, react, webdev, frontend
Published: 2023-03-16 10:14:40


One of the key benefits of using SVG in React is that they can be easily integrated into components. By importing the SVG as a component, it can be easily manipulated using React props.

Creating a component for each individual SVG graphic in React is a recommended best practice because it can increase reusability by reducing code duplication, enable easy customization, and maintain a cleaner and more organized codebase. Overall, it can improve the scalability and accessibility of your application, making it easier to manage and maintain in the long run.

```jsx
import React from "react"

const MoonIcon = props => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 256 256"
      {...props}
    >
      <path
        fill="currentColor"
        d="M233.54 142.23a8 8 0 0 0-8-2a88.08 88.08 0 0 1-109.8-109.8a8 8 0 0 0-10-10a104.84 104.84 0 0 0-52.91 37A104 104 0 0 0 136 224a103.09 103.09 0 0 0 62.52-20.88a104.84 104.84 0 0 0 37-52.91a8 8 0 0 0-1.98-7.98Zm-44.64 48.11A88 88 0 0 1 65.66 67.11a89 89 0 0 1 31.4-26A106 106 0 0 0 96 56a104.11 104.11 0 0 0 104 104a106 106 0 0 0 14.92-1.06a89 89 0 0 1-26.02 31.4Z"
      />
    </svg>
  )
}

export default MoonIcon
```

To use this in your application, simply import it and render it like any other component.

```jsx
import React from "react"
import MoonIcon from "./icons/MoonIcon"

function App() {
  return (
    <div>
      <h1>My App</h1>
      <span style={{ fontSize: "20px", color: "orangered" }}>
        <MoonIcon />
      </span>
      <MoonIcon width="200" height="200" fill="orangered" />
    </div>
  )
}

export default App
```

Applying styles to individual SVG components is simple and can be done similarly to how you would style fonts. This allows for easy customization of their appearance. Additionally, using props in SVG components provides even more flexibility in customization, making it easier to adapt them to fit your specific needs.
Non Stop Lo-Fi Mashups 2023 | Non Stop ChillOut | Lo-Fi Mashups | itx KhuDai Reverbs
Published: 2023-03-16 10:08:51

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34g2bs9hnmttc21zpoii.png)](https://youtu.be/sLwvptEEfRQ)
Is It Worth Learning { X } Anymore?
Tags: productivity, motivation, watercooler, chatgpt
Published: 2023-03-16 10:08:15

All these `chat-gpt` news are driving me crazy. I mean, I've been in the tech industry for over ten years, and for the first time, **I'm losing my motivation** to keep learning. 

Don't get me wrong; I've always been passionate about programming, and I still love it, but now I can't help feeling like _I'm wasting my time?_.

I was taking this super intensive CSS course, which is already pushing me outside of my comfort zone. But now that `chat-gpt` can create functional websites from a simple sketch, I can't see the point of improving my CSS skills. 

I feel like I'm investing all this time and effort into something that will become obsolete. 

I understand that technology is constantly evolving, but ... if this tool can do my job _Higher, Further, Faster_\*....
What's the point? 


\* this is a nerd reference to Captain Marvel 

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

My «rational side» says, yep everything is cycle "do you remember when SSR was cool back on 2013"? Do you remember DreamWeaver? 

But my «childish side» screams "_this is it, this is when you get obsolete_"

--
Thanks for reading.
What is RPA Basics
Tags: rpa, tutorial
Published: 2023-03-16 10:07:31

Robotic process robotization (RPA) is an innovation that imitates the manner in which people connect with programming to perform high-volume, repeatable undertakings. RPA innovation makes programming projects or bots that can sign into applications, enter information, compute and get done with responsibilities, and duplicate information between applications or work process as required.

RPA, or Mechanical Interaction Computerization, is an innovation that permits programming robots or "bots" to robotize dreary, manual errands generally performed by people. These errands can go from straightforward information section to additional mind boggling assignments including different applications or frameworks.

The nuts and bolts of RPA include making programming robots that can imitate human activities like opening applications, signing in, reordering information, finishing up structures, and clicking buttons. These robots can be modified to play out these undertakings in a predefined succession, or they can be prepared to learn and adjust to evolving situations. For details, You can even check in-depth and want to learn key concepts to design RPA solutions using UiPath. Check the [RPA developer certification](https://www.edureka.co/masters-program/rpa-developer-training).

RPA can be utilized in different ventures and applications, like money, medical care, planned operations, and client assistance. The advantages of RPA incorporate expanded effectiveness, diminished mistakes, and cost investment funds by permitting associations to divert their HR to higher-esteem exercises.

In general, RPA is a useful asset for mechanizing redundant, manual undertakings, opening up representatives to zero in on more elevated level work and expanding by and large effectiveness and efficiency.
React CSS Module Not Loading...
Published: 2023-03-16 09:57:40

Some styles are loaded:
!['heaV0KBh1nwqLhFDPMEG is not loaded'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0yx4m2qacv5xopx7mje.png)

Some are not loaded:
!['TIRdCF0dLbvGK0gT9bH8 is not loaded'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhd0lok34lhi0ijh97v1.png)

CSS modules and CSS are loaded:
!['Mapping is there'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xa7gjpavfmdvx1s450r9.png)




Any help appreciated. Thanks for considering!
Is it possible to integrate 3rd party translation api in whatsapp?
Published: 2023-03-16 09:43:48

we need to implement a feature where the sender and receiver will receive and send their messages in their own language.

suppose A knows only English and B knows only Spanish.

when A and B will communicate. A will type a message in English and send it to B.
B will receive that message in Spanish and replies in Spanish.
A will receive the message in English from B.

As per my understanding technically it's possible to implement this featue in any messaging app. if app will allow the 3rd party integration or plugin's.
How to make money on Shutterstock.
Tags: money, javascript, programming, webdev
Published: 2023-03-16 09:38:07

[Shutterstock](https://submit.shutterstock.com/?rid=382633337&language=en) is a popular platform where photographers, videographers, and other creatives can earn money by selling their content, such as photos, illustrations, and videos, to clients around the world.

Here are some steps you can take to earn money through [Shutterstock](https://submit.shutterstock.com/?rid=382633337&language=en):

1. Sign up as a contributor: Create an account on [Shutterstock](https://submit.shutterstock.com/?rid=382633337&language=en) and sign up as a contributor. You will need to submit your personal details and some sample content for review. For create [Shutterstock](https://submit.shutterstock.com/?rid=382633337&language=en) account click me
2. Upload your content: Once you are approved as a contributor, start uploading your high-quality photos, illustrations, and videos. Make sure your content meets the quality standards of Shutterstock.
3. Keyword your content: Use relevant keywords and descriptions to help clients find your content easily. This will increase the chances of your content being purchased.
4. Earn royalties: Shutterstock pays contributors a royalty each time a client downloads their content. The amount you earn will depend on the license type and subscription plan the client has purchased.
5. Promote your content: You can promote your content on social media and other platforms to increase its visibility and attract potential clients.
Remember, earning money through Shutterstock requires dedication, effort, and patience. Keep uploading new and unique content and improve your skills to increase your chances of success.
Why You Should Consider Using TypeScript for Your Next Project 🚀
Published: 2023-03-16 09:37:01


TypeScript has gained popularity in recent years, and for good reason. Here are some benefits of using TypeScript and how it can improve your project.

## Improved Type Safety 🔒
One of the main benefits of TypeScript is improved type safety. With TypeScript, you can catch errors at compile-time, before they even happen at runtime. This can help prevent bugs and improve the stability of your codebase. Additionally, TypeScript makes it easier to understand the types of data being used throughout your code, which can make it easier to maintain and debug. 💻

## Better Tooling 🛠️
TypeScript also has better tooling than JavaScript, which can improve your development workflow. For example, TypeScript can provide more accurate and helpful auto-completion suggestions, and can help catch errors before you even run your code. Additionally, many popular editors and IDEs, such as Visual Studio Code, have great support for TypeScript, which can make development more efficient. 🚀

## Real-World Examples 🌎
TypeScript can be used in a variety of real-world projects, from small personal projects to large enterprise applications. Some examples of popular projects that use TypeScript include:

- 🅰️ Angular
- ⚛️ React Native
- 📈 Asana
- 💬 Slack
- 🖥️ Microsoft Office

## Conclusion 🎉
TypeScript is a powerful tool that can improve the safety and efficiency of your development workflow. Whether you are working on a small or large project, TypeScript can provide benefits that will help you create better, more stable code. Give it a try! 😉
How to use chatgpt
Published: 2023-03-16 09:24:44


preview：https://show.cool-admin.com
account：admin
password：123456

Step:

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


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

Code:

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4xp4sxhn3czewbo9kue.png)
Socket in React JS: A Guide to Real-Time Communication
Tags: javascript, react, socket, node
Published: 2023-03-16 09:24:19

Real-time communication has become a crucial aspect of modern web applications. To facilitate real-time communication, we use web sockets. In this article, we will discuss how to use Socket in React JS.

**What is a socket?**

Socket is a network communication protocol that enables real-time, bidirectional, and event-driven communication between the client and the server. It is based on TCP/IP and allows the client and server to communicate in a full-duplex manner. Socket is widely used for building real-time applications such as chat applications, multiplayer games, and stock trading applications.

**Sockets in React JS**

React JS is a popular frontend library for building user interfaces. It provides a simple and efficient way to manage the state of the application. React is widely used for building single-page applications, and it can be used in conjunction with Socket to build real-time applications.

To use Socket in React JS, we need to create a Socket client and connect it to the server. We can use the Socket.IO library to create a Socket client. Here's an example of how to create a Socket client in React JS:

```
import io from 'socket.io-client';

const socket = io('http://localhost:3000');
```

In this example, we import the `io` module from the socket.io-client library and create a socket connection to `http://localhost:3000`.

Once the socket connection is established, we can use it to send and receive events. We can send events using the `emit` method, and we can listen for events using the `on` method. Here's an example of how to send an event using Socket in React JS:

```
socket.emit('chat message', 'Hello, World!');
```

In this example, we send a `chat message` event to the server with the message `Hello, World!`.

We can also listen for events from the server using the `on` method. Here's an example of how to listen for a `chat message` event using Socket in React JS:

```
socket.on('chat message', (message) => {
  console.log(message);
});
```

In this example, we listen for `chat message` events from the server and log the message to the console.

Socket in React JS can be used for building real-time applications such as chat applications, multiplayer games, and collaborative document editing applications. Socket enables real-time communication between the client and server, and React JS provides a simple and efficient way to manage the state of the application.


**In conclusion**, Socket in React JS provides a powerful way to build real-time applications. We can use the Socket.IO library to create a Socket client, send and receive events, and build real-time applications such as chat applications and multiplayer games. Socket in React JS is a powerful tool for building modern web applications that require real-time communication.
CSS Outline
Tags: beginners, webdev, html, css
Published: 2023-03-16 09:23:29

**6. Code**

``` html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      color: white;
      background-color: rgb(41, 40, 40);
      margin: 0;
      font-size: 50px;
    }

    p {
      border: 3px solid red;
      outline: 5px double green;
      outline-offset: 3px;
    }
  </style>
</head>


<body>
  <h1> Yahoo Baba Css Outline </h1>

  <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus, facilis. </p>

  <br>
  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, magni. </p>
</body>

</html>
```

**Output**
![Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/huz1che8kejc3wo5g5hv.png)

Thank You.
You can follow us on:
[Youtube ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)
The Age of CSS Resets
Tags: css, webdev, productivity
Published: 2023-03-16 09:22:04

The year 2004 marked the beginning of the age of CSS resets

Why we need resets in the first place? What problems they solve? The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults. We think of our CSS as modifying the default look of a document — but with a ‘reset’ style sheet, we can make that default look more consistent across browsers, and thus spend less time fighting with browser defaults.

### Minimalistic Reset — Version 1
```css
* {
  padding: 0;
  margin: 0;
}
```

### Minimalistic Reset — Version 2
```css
* {
    outline: 0;
    padding: 0;
    margin: 0;
}
```

### Minimalistic Reset — Version 3
```css
* {
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
}
```

### Condensed Universal Reset
```css
* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
```


But CSS resets were not the right solution to a problem we were solving. We needed better approaches for cross-browser
consistency

## Normalize.css
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.
It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

It’s worth understanding in greater detail how normalize.css differs from traditional CSS resets.

- Preserve useful browser defaults rather than erasing them.
- Normalize styles for a wide range of HTML elements.
- Correct bugs and common browser inconsistencies.
- Improve usability with subtle improvements.

So, where normalize.css is used, it is used in frameworks like Bootstrap, in templates like HTML5 boilerplate and in websites like Twitter.

## References:
- [Killer Collection of CSS Resets](https://perishablepress.com/a-killer-collection-of-global-css-reset-styles/)
- [CSSresetr](https://perishablepress.com/cssresetr/)
- [Reset reasoning](http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/)