teleren/devto huggingface dataset:
How to setup Node.js environment variables using dotenv
Tags: javascript, node, divuzki, webdev
Published: 2022-08-16 17:00:00

Have you been looking for a way to hide sensitive information without showing it on your client-side?... well look no more

<img src="https://raw.githubusercontent.com/motdotla/dotenv/master/dotenv.png" alt="dotenv" align="right" />
## What's Dotenv?
Dotenv is a zero-dependency module that loads environment variables from a `.env` file into [`process.env`](https://nodejs.org/docs/latest/api/process.html#process_process_env). Storing configuration in the environment separate from code is based on The [The Twelve-Factor App](http://12factor.net/config) methodology.
[![Featured on Openbase](https://badges.openbase.com/js/featured/dotenv.svg?token=eE0hWPkhC2JGSD4G9hwg5C54EBxjJAyvurGfQsYoKiQ=)](https://openbase.com/js/dotenv?utm_source=embedded&utm_medium=badge&utm_campaign=featured-badge&utm_term=js/dotenv)


###Installation
for npm => `npm install --save dotenv`
for yarn => `yarn install dotenv`

####Dir
`index.js
.env
`
>where `.env` will be where you will keep your sensitive data as variables

## Usage
`index.js`
The below script is to initialize the config function into your project
```javascript
// for module type
import "dotenv/config";

// for commonjs type
require("dotenv/config")
```
>you can now access your variables through `process.env`

###Example
`.env`
```
PORT=5000
```

`index.js`
```javascript
app.lisen(process.env.PORT)
```
>That is it! [Check out my github](https://www.github.com/divuzki)
Introducing Dofigen !
Tags: programming, docker, rust, opensource
Published: 2022-08-16 16:52:00

Glad to share with you our very first rust project, Dofigen !
It's a simple tool that generates dockerfiles from YAML (or JSON) structure. 
[Available on Github here](https://github.com/lenra-io/dofigen)

And it's opensource !! Enjoy !
Zero Framework Overhead with Solid.js
Tags: solidjs, webdev, programming, beginners
Published: 2022-08-16 16:46:00

Would you like to learn about a new JavaScript Framework that boasts best in class performance metrics? 

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wbblf30557ouev43f9c.png)](https://www.youtube.com/watch?v=Bubv8wlLIxo)
7 Useful Javascript utility liabraries should learn
Tags: javascript, utility, beginners, react
Published: 2022-08-16 16:41:15

I've Started React journey past 3 months. Since then I'm currently trying to improve my knowledge base by creating projects. While creating projects I realized knowing some basic liabraries would make life so much easy.
So I've collected some useful liabraries.

**MathJS**
-Math.js is an extensive math library for JavaScript and Node.js. It is compatible with JavaScript's built-in Math library.

**Moment/date-fns**
- simplifies the JavaScript data manipulations by providing a variety of functions for parsing, validating, manipulating, and formatting dates.

**Sugar**
- a Javascript utility library for working with native objects. Simple, straightforward API makes Sugar very easy to pick up and start using.

**Lazy.js**
- is a functional utility library for JavaScript, similar to Underscore and Lodash, but with a lazy engine under the hood that strives to do as little work as possible while being as flexible as possible.

**Underscore & Lodash**
- are great modern JavaScript utility libraries, and they are widely used by Front-end developers.

**Ramda**
- is designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

**CollectJS**
- is the javascript library for collecting data from tree-based structures. This library is used on JavaScript Array and Objects.
How to Convert Visitors into Customers using UX?
Tags: webdev, programming
Published: 2022-08-16 16:13:46

The term UX comes from User Experience and describes every interaction your users have with your website/mobile app or other online services you provide. In short, it’s the way users get to use your online pages (mobile or otherwise) and how they feel when doing so.

How Can UX Help My Business?
In today’s day and age, when there are lots of sites and apps, it’s the small details that make the difference. For instance, you should think less about what you want people to do on the website and more about how they feel when they reach it.

Do they know where to go for more information? Do they feel their needs are being considered? Do they feel anxious when they land on your page, or do they feel calm and ready to browse?

If your viewers feel good on your site, they’re more likely to stay and look around. And they may even become customers in the process!

How to Create Great UX?
Most business owners hire a professional UX designer for this, but no one knows your business better than you. You are the one who knows the type of response each action should get from viewers, so it’s best to be involved in creating a good UX.

Even better, you don’t need any technical or design knowledge; you only need post-its. Here’s why:

Start by getting into the customer mindset.
Next, think about the actions you would expect your site to offer and write each one on a post-it. An action can be anything from ‘learn more about a product’ to ‘watch video reviews’.
Once you have a list of all the actions, try putting together a rudimentary user flow. To do this, just arrange the post-its in the order a customer would want to access them.
Now think about the complexity of each action. Good UX rules suggest that each action should take less than 5 steps. For instance, the purchase action should go something like this:

Access home page;
Select the category of products you want;
Find the product you want;
Start the checkout process.
Think about Emotions
A good UX is all about emotions, so try to figure out what you want people to feel. For instance, when they first land on your page, viewers should feel welcome and excited to discover more.

But how exactly do you do this? UX designers use shapes, colors, videos, and other tricks of the trade to create a visually-pleasing environment. But you can also add content and structure to the mix.

Sketch your Site
Now that you have a user flow and know what each page should convey, it’s time to start sketching your site. Based on this, a professional UX designer will be able to put everything together and create an astonishing website that coverts.

Keep in mind that it’s important to continuously test the effectiveness of your site and the user experience it offers. And then, based on the test results, you need to optimize the interface and continue to improve it.

Categories: Graphic Designing, Web designing
Visit here for more details- [https://symphony-software.com
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57g3ln05ch0g84zsuy87.png)](https://symphony-software.com)
Plotting a circle in python with angles.
Published: 2022-08-16 15:49:32

I have got some hard time dealing with angles in space, and because i skipped all of my geometry class i had no idea how to imagine angles in a circle so i decided to find a way to plot them using python 

## First lets Import Modules

```py
import matplotlib.pyplot as pl
from numpy import sin, cos, pi, linspacet
```


## Adding a center point 

```py
plt.plot(0,0, color = 'red', marker = 'o')
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5xhmue527yv8xp3yqb3.png)
## Adding a circle 

```py
r = 1.5
angles = linspace(0 * pi, 2 * pi, 100) 
print(angles)
xs = cos(angles)
ys = sin(angles)


plt.plot(xs, ys, color = 'green')
plt.xlim(-r, r)
plt.ylim(-r, r)
plt.gca().set_aspect('equal')
```

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

## Drawing diameter

```py
plt.plot(r-0.5, 0, marker = 'P', color = 'blue')
plt.plot(-r+0.5, 0, marker = 'o', color = 'red')
plt.plot([r, -r], [0, 0], color = 'red')
```

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

## A function to convert from Degree to Radian 

```py
def deg2rad(deg):
    return deg * pi / 180
```

## Now lets draw two lines at 90° and 45°

```py
plt.plot([0, r * cos(deg2rad(90))], [0, r * sin( deg2rad(90))], color = "red")
plt.plot([0, r * cos(deg2rad(45))], [0, r * sin( deg2rad(45))], color = "black")

```

## Show the final result 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l2g023j7p9tmawvflnl.png)
```py
plt.savefig('angles.png')
```

Hope that article would save some time.
Objects and Classes in Kotlin
Tags: objects, kotlin, classes, tutorial
Published: 2022-08-16 15:46:00

![Classes and objects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ab82y7ueyz0v4welz999.png) 

Kotlin supports both object oriented programming (OOP) as well as functional programming. Object oriented programming is based on real time objects and classes.
We have seen classes before, for example our `MainActicity()` class.
**Class is a blueprints of an objects**. Classes define methods that operate on their object instances.
![Classes are blueprints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp34nbl51clzhl78a5z7.png)
 
###Syntax to use classes:
Kotlin classes are declared using keyword **class**.
```
class House {
  var color: String = "white"
  var numberOfWindows: Int = 2
  var isForSale: Boolean = false

  fun updateColor(newColor: String){
             newColor = Color
}
}
```
### Objects in Kotlin:
Object is an instance of a class. Usually, you define a class and then create multiple instances of that class. **Object is used to access the properties and member function of a class**. Kotlin allows to create multiple object of a class.

**Syntax of Using Object in Kotlin:**
```
var obj = House()  

```

**Using a class:-** We use a class by creating a new Object Instance
```
class House {
    var color: String = "white"

    fun updateColor(newColor: String){
        color = newColor
    }
}

fun main(){

    var myHouse = House()
    myHouse.updateColor("Green") //Updates the color of the House

    println(myHouse.color) // Will Print the new color of the House

}
```
**Output:** 
```
Green
```

![Thank You](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vja6w1irhc6j2bnbobr0.png)

If you have doubt in any part you can ask it in the discussion section.
Wanna connect? connect with me on [LinkedIn](https://www.linkedin.com/in/amandeep-singh-452949246/)
Build a realistic E-commerce store in two days at Vue.js Forge Episode 2 🔥
Tags: javascript, vue, community, github
Published: 2022-08-16 15:22:59

If you were thinking of new and exciting ways to learn Vue and get that hands-on Vue.js experience - here’s what you need to know!

Vue School is hosting the 2nd edition of the largest hands-on Vue.js event ever - **[Vue.js Forge](https://vuejsforge.com/?utm_source=Devto&utm_medium=newsletter&utm_campaign=community)** on the **30th & 31st of August**. 

Vue.js Forge is a hackathon-style event where you’ll **team up with thousands of Vue.js developers** from around the world to **build a realistic E-commerce store from the ground up!** 🚀

Experts from the Vue.js community including **Alex Kyriakids, Anthony Fu, Daniel Kelly, Eduardo San Martin Morote, Brittany Walker,** and others will join this event to provide guidance to help you easily build your own E-commerce store! 🎙️


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

They will utilize tools and libraries from the Vue.js ecosystem including **Pinia**, **Deskree**, **Vue Router**, **Vite, Nuxt 3,** **Contentful, BigCommerce,** and more.

**So how will the building process look like you ask?**


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

👉 First, **we'll integrate a Nuxt.js 3 application with multiple 3rd party services to build a flexible DIY solution**, with plenty of potentials to help you learn more about Vue and Nuxt.

👉 Then **we'll explore one or 2 other more feature-rich options that are more out of the box but still integrate beautifully with Vue.js**.

Throughout the build, we'll work with technologies like **Nuxt 3**, **Pinia**, and various other JavaScript libraries on the front end. **These will pair nicely with powerful backend technologies** like **Deskree** (a cool new Backend-as-a-Service) and **Contentful** (a feature-rich headless CMS).

Vue School is giving everyone the opportunity to **sign up for this event FREE of charge** - so hurry up and **[reserve your free ticket](https://vuejsforge.com/?utm_source=Devto&utm_medium=newsletter&utm_campaign=community)**!

**[Share the news on Twitter](https://twitter.com/intent/tweet?text=I%27m%20joining%20%40vuejsforge%20%26%20%40deskree_backend%20to%20learn%20how%20to%20build%20a%20full%20e-commerce%20site%20in%20just%20two%20days%20with%20%23VuejsForgeEp2!%0A%0AI%27ll%20be%20guided%20by%20industry%20experts%20%26%20joined%20by%201000s%20of%20devs%20from%20around%20the%20world%20as%20I%20get%20hands-on%20experience.%20%0A%0AJoin%20for%20FREE%20https%3A//vuejsforge.com/)** and let's make #VuejsForgeEp2 a huge success! 🐦

We hope to see you there!
Sum of Number In String
Published: 2022-08-16 14:50:08

```
const sumOfNumberInString = (s) =>{
    let temp = "0";
    let sum = 0;

    for (let i = 0; i < str.length; i++) {
        let ch = str[i];

        if (!isNaN(String(ch) * 1))
            temp += ch;

        else {
            sum += parseInt(temp);
            temp = "0";
        }
    }
    return sum + parseInt(temp);
}

sumOfNumberInString("1aba23")
```
revisiting functions (not prototypes) 🤥
Tags: function, javascript, prototype, constructor
Published: 2022-08-16 14:33:00

Some notes for quick revision

### a function with a custom property

```javascript
function aFunction() {
  this.someKey = "someValue";
}
aFunction.customKey = "customValue"
```

*this* is a runtime binding in most cases, so *someKey* is not a property of *aFunction* or *aFunction.prototype*.


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

The prefix *custom* was chosen to distinguish from the default properties present on the function like *name*, *caller* etc. (Should it have been called *own*? Prototypical hangover! 🥱)
The pair of *customKey* and *customValue* will be referred to as custom property for the purposes of this document.


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

Since the constructor is a function, it also has a prototype and the recursion continues forever. Remember that the [[Prototype]] property is only a link, not an actual copy of any object.

Note that the custom property is available on the constructor but not on the prototype.

### instance

```javascript
let aInstance = new aFunction()
console.log(aInstance)
```


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

The custom property of *aFunction* is not present on the [[Prototype]] of *aInstance* because the [[Prototype]] of *aInstance* is *aFunction.prototype*.

### prototype

- Except for when we talk about the *prototype property on a function*, we always mean the internal property [[Prototype]] when we say *prototype*.
- The internal property [[Prototype]] represents a link to some properties, not a copy of those properties
- Every prototype (accessed using *Object.getPrototypeOf()*) has a *constructor* property and a *[[Prototype]]* property.
- Since [[Prototype]] of *aInstance* is the value of *aFunction.prototype*, the [[Prototype]] of *aInstance* is said to be *aFunction.prototype*. 
- Similarly, the [[Prototype]] of aFunction is said to Object.prototype

### custom property

- The custom property is like the common Object properties: *Object.create*, *Object.assign*, *Object.getPrototypeOf* etc. They are not meant to be called on object instances.
- On the contrary, the common Array properties like *map*, *slice*, *push* etc are found on the [[Prototype]] of an array instance because they are meant to be used with an instance not on the parent Array object

### constructor property

Note that the constructor property of an instance can be changed using `aInstance.constructor = ` and of the parent using `Object.getPrototypeOf(aInstance).constructor`. So, use *instanceof* operator instead of checking the constructor of an instance.
How to connect to the same host with different SSH keys?
Tags: git, tutorial, devjournal
Published: 2022-08-16 14:12:00

**Required Reading:**
- [Generate an SSH key pair](https://dev.to/jimzandueta/generate-an-ssh-key-pair-2fcc)

**Optional Reading:**
- None
 
-

## Setup your SSH configuration file

When connecting to a remote server via SSH, we would use the command line to specify the remote user name, hostname, and port, as shown below:

```sh
$ ssh tony@avengers.com -p 4321
```

We can connect to the server using the same options as in the previous command by typing `ssh avengers` after adding the following lines to your `~/.ssh/config`:

```sh
Host avengers
    HostName avengers.com
    User tony
    Port 4321
```

We can also specify which SSH key to use when connecting to a specific server in the configuration file by setting `IdentityFile`:

```sh
Host avengers
    HostName avengers.com
    User tony
    Port 4321
    IdentityFile ~/.ssh/id_rsa_avengers
    
Host marvel
    HostName marvel.com
    User tony
    Port 8080
    IdentityFile ~/.ssh/id_rsa_marvel
```
The use of `IdentityFile` is especially useful when connecting to the same hostname with different SSH keys. A real-world example would be having multiple Github accounts, such as personal and work:

```sh
Host github_personal
    HostName github.com
    IdentityFile ~/.ssh/github_personal
    
Host github_work
    HostName github.com
    IdentityFile ~/.ssh/github_work
    
IdentityFile ~/.ssh/id_rsa 
#default ssh key to use for all other hosts
```

Using the configuration file above, we can clone repositories from your personal Github account with:
```sh
$ git clone git@github_personal:tonystark/ultron.git
```

Notice that instead of `@github.com` as the host name, we use `@github_personal` as defined in the configuration file.


-


**Updating the configuration file:**
- Open your favorite terminal
- Create/Open the SSH configuration file
```sh
$ nano ~/.ssh/config
```


-


### Resources
- [git config file syntax](https://www.ssh.com/academy/ssh/config)
Some un-common Errors I am facing during work -
Published: 2022-08-16 14:08:00

1. Property 'Razorpay' does not exist on type 'Window & typeof globalThis'.

I came across this error and it was not so easy for me to solve this, that's why creating this small article.

I am working in ReactTs
you will probably use 
 var rzp1 = new Razorpay(options); or 
 var rzp1 = new window.Razorpay(options);

above your react class or function put 
```
declare global {
  interface Window {
    // ⚠️ notice that "Window" is capitalized here
    Razorpay: any;
  }
}
```

2 . Getting proxy while `console.log(state)` in cart Slice (Redux)

solved by 
```
import { current } from '@reduxjs/toolkit';
...
console.log(current(state));
```
How to generate a secure SSH key pair?
Tags: git, tutorial, devjournal
Published: 2022-08-16 13:39:00

**Required Reading:**
- None

**Optional Reading:**
- None
 
-

## Generate an SSH key pair

- Open your favorite terminal
- Run the ssh-keygen command
```sh
$ ssh-keygen -t rsa -b 4096 -C "tonystark@avengers.com"
```
> INFO: For increased security, the type flag `-t rsa` and the bits `flag -b 4096` are required. The comment flag `-C "tonystark@avengers.com"` allows us to easily identify who owns the SSH key.

- Specify the key file name. Default is `id_rsa`
- Enter a passphrase *_optional_


![ssh-keygen-sample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8qdopzivgs2inx9xt69.png)


> WARNING: If you already have a default SSH key ~/.ssh/id_rsa, **DO NOT OVERWRITE IT**. If you are not careful, you will lose SSH access to your cloud servers and git platforms. Instead, give your new SSH key a new name, such as id_rsa_avengers.


-


### Resources
- [ssh-keygen | SSH Tutorial ](https://www.ssh.com/academy/ssh/keygen)
What should my five year roadmap look like?
Tags: anonymous, discuss, career
Published: 2022-08-16 13:37:12

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._ 

***

Hey. I'm 1 year into a junior backend role at a series B startup. I know that developers hop around from company every 2-3 years, but I really want to get a good sense of a 5 year plan for myself. Right now, I make 80k. Should salary be part of my 5 year plan? Or should I just aim for promotions and hope that a pay increase comes with it? Not sure whether to prioritize money or career or life or learning at this point. Any tips would be appreciated. Thanks!
How to Find an On Demand Logistics App Development Company
Tags: logisticappdevelopment, mobileappdevelopment
Published: 2022-08-16 13:35:17

If you're considering developing an on-demand logistics app, you're probably wondering how to find the right developer. There are several companies out there that specialize in building these apps, but none have the necessary experience in a niche market. NCrypted has a script that can help you start your own on-demand service from scratch. The script is robust, scalable, and user-friendly. You can even customize it to fit your specific needs.

Get Full Blog Here:- https://www.coherentlab.com/blog/on-demand-logistics-app-development
How to setup your global (and local) git profile?
Tags: git, tutorial, devjournal
Published: 2022-08-16 13:29:00

**Required Reading:**
- None

**Optional Reading:**
- None
 
-

## Setup your git profile

- Open your favorite terminal
- Set your git username
```sh
$ git config --global user.name "Tony Stark"
```

- Set your git email
```sh
$ git config --global user.email tonystark@avengers.com
```

- Set your git editor *_optional_
```sh
$ git config --global core.editor nano 
# you can also use emacs (nostalgic) or vim (adventurous). 
# Vim is the default editor.
```

- Review your settings 
```sh
$ git config --list --show-origin
```

> The global flag --global will apply the configuration to the current operating system profile/user. If you want to apply your configuration at the local level, navigate to the project's root directory (where the.git folder is located) and run the git config commands without the global flag, or use the local flag --local to be more verbose.


-


### Resources
- [git config | Atlassian Git Tutorial ](https://www.atlassian.com/git/tutorials/setting-up-a-repository/git-config)
- [Git - First-Time Git Setup ](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup)