teleren/devto huggingface dataset:
How to upload a Nodejs app to Heroku
Tags: heroku, webdev, beginners, programming
Published: 2022-10-24 12:03:49

If you have a Nodejs server that you want to upload to heroku, here is a guide you can follow. I hope this helps a beginner out there.


![BMC coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1u0jhygsjgp66ahybgz.gif)

## Package.json

Firstly, we need to add the following to our `package.json`.

```javascript
{
  "name": "session",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": { // ==> heroku engine
    "node": "16.15.0"
  },
  "scripts": {
    "start": "node ./src/server.js" // ===> start command
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```



**1. Heroku CLI**
I hope you already have the heroku cli installed on your local machine.

**2. Heroku Login**
Login to your heroku account using terminal. 

```git
 heroku login
```

**3. Create Heroku app**
Using the terminal, create a heroku app;

```git
 heroku create <app-name>
```

**4. Add Heroku app**
You need to set your online (cloud) Heroku app as a remote git repository for your nodejs server.

```git
heroku git:remote -a <app-name>
```

**5. Environmental variables** 

If your app has `.env` file, then you would add that in Heroku manually, Find the section named `Config Vars` and click on **Reveal Config Vars**. Here you will add the same key and value pairs from the .env file you used locally. You can see mine below with the values blurred out.


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

**6. Push**
Now, we are ready to push our nodejs server to Heroku

```git
git push heroku main
```

<a href="https://www.buymeacoffee.com/ifeanyichima" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

**Thank you, please follow me**

[![HTML](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/ifeanyi-thankgod-chima)&nbsp;[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/masterifeanyi)
Add free SSL Certificate in Hostinger using ZeroSSL.
Published: 2022-10-24 11:40:42

If you have hosted your website using hostinger and do not want to buy SSL for that domain you can add free SSL for upto 3 months from [Zerossl](https://zerossl.com/). The process is very simple and in this blog you will get a step by step guide on how to install the free SSL certificate on your domain.

I assume that you have a hostinger account and a running website on some domain on Hostinger into which you want to install the SSL certificate

## Downloading SSL certificate form Zerossl

1. Create an account on [Zerossl](https://zerossl.com/). You will  be redirected to the dashboard
![Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yta5vqcfo6898x7xwe2.png)

2. Click on New Certificate button to create a new certificate.
3. Enter your domain name.
![Domain name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/058u8sdrn5mq5pzzqh5e.png)
4. Select validity as 90 days (free version) and keep the CSR and Contact on.
![CSR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/om3dtx3t1uwewtmuw9m9.png)
5. Select the free plan and click on Next Step.
6. For Verification select the DNS(CNAME) option. 
![Verify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0pfk2ovw265x50stug6.png)
7. Now go to your [Hostinger](https://hpanel.hostinger.com/). Then **Hosting** > **Manage** > **DNS Zone Editor**
8. Add a CAA record with CA domain as `sectigo.com`
![CAA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fzimh793i0sf61o14w5.png)
9. Now add your CNAME record provided by Zerossl.
![CNAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqjyg6lgxy26rvssvv6r.png)
10. Now go back to Zerossl and verify your. After successful verification you will be able to download the zip file of your certificate. Download and Extract it which should contain 3 files
![SSL Zip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ny3ukc3iiys50jd0ysw2.png)

## Install the SSL certificate

1. Go to your [Hostinger](https://hpanel.hostinger.com/) account. 
2. Go to the SSL tab. Select the domain and click on manage in which you want to install the SSL certificate.
3. Now you need to import the SSL certificate.
4. Copy and paste the **certificate.crt**, **privatekey** and **cabundle** from the files extracted from the zip that you downloaded from zerossl.
![Install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abw5ri652fh50f3qx8wf.png)
5. Click on install. Now check the domain address in the browser it should show a secured connection.
Important: Track your productivity...
Tags: productivity, product, programming
Published: 2022-10-24 10:53:53

Do you ever get the feeling that you don’t have enough time or that you haven’t accomplished a fraction of what you’ve planned for your day? Well, whatever be the case, chances are that either you are not fully engaged or you need to be more productive at work. One way to make it happen is tracking your **productivity** and mood during the day and using that information to improve your productivity skills.

In this article, you’ll find the list of ways in which better time management that can help you boost your productivity. But first, let’s start off by discussing the various challenges that might be the root cause holding your productivity back. So, here is the list of some of the most recognised factors that usually affect your productivity level at work. _Let’s have a look at them._

* Poor work management
* Procrastination
* Poor communication
* Lack of delegation
* Inconsistency
* Working against the internal clock

If any of these situations resemble your daily work routine, now is the time to put a a tracker in place.

**Here’s how you can improve your productivity with productivity tracking**

With an advanced a simple productivity tracking tool, you can:

**_1. Develop a sense of accountability_**
The biggest advantage of productivity tracking is that it helps you  to develop a sense of accountability and urgency during the work process. It gives you the ability to organize and manage tasks across a project based on their priority. This way, it helps you to focus on one task/activity at a time and give your complete attention to what needs to be completed first.
**_2. Stay focused_**
With productivity tracking it is less likely that you’ll invest your time in anything else apart from your work. This will help you to remain focused on your tasks and projects. As a result, you will be able to get your work done more efficiently.
**_3. Eliminate potential bottlenecks from the day_**
In every team, there are members who take more time to complete their tasks and assignments as compared to others. Now, there can be two reasons – one, they are very dedicated and two, they have too much on their to-do list. Having a productivity tracking tool allows you to identify the bottlenecks. It helps you to take necessary steps to improve the overall performance.
**_4. Experience a sense of satisfaction_**
Seeing your tasks and projects get completed as planned is an amazing feeling. And with productivity tracking, you can actually experience it each day. You can see how much you have accomplished from your list. this gives you satisfaction and motivates to finish everything on time as efficiently as possible.

At **[Devjour](https://www.devjour.com)**, we enable you to track your productivity on a daily bases to better understand your behaviour and also to boost your productivity to the next level.
Javascript: Minification vs Obfuscation
Tags: javascript, webdev, programming, advanced
Published: 2022-10-24 09:46:37

Minification:

1. Comments and extra spaces are removed
2. Provides short names for variables and functions
3. Removes unwanted variables

Uses:

1. Reduce file size intern reduces load times
2. Improves site speed and accessibility
3. Can be accessed with low bandwidth network

```javascript

// Sample javascript file
function print() {
console.log('Hello World!');
}
print();

```
It's minified version is:

```javascript
function print(){console.log("Hello World!")}print();
```

Obfuscation:

1. Business logic is not exposed
2. Obfuscated isn't readable hence copying and reusing is not possible.
3. It prevents vulnerable attackes

For the above same code snippet's obfuscated version is:

```javascript
(function(_0x42a639,_0x56f39){var _0x3177f0=_0x3dc6,_0x3ad656=_0x42a639();while(!![]){try{var _0x39f7cb=-parseInt(_0x3177f0(0x175))/0x1+parseInt(_0x3177f0(0x179))/0x2*(parseInt(_0x3177f0(0x174))/0x3)+-parseInt(_0x3177f0(0x17b))/0x4+parseInt(_0x3177f0(0x176))/0x5+-parseInt(_0x3177f0(0x177))/0x6+-parseInt(_0x3177f0(0x17c))/0x7+parseInt(_0x3177f0(0x173))/0x8;if(_0x39f7cb===_0x56f39)break;else _0x3ad656['push'](_0x3ad656['shift']());}catch(_0x246c48){_0x3ad656['push'](_0x3ad656['shift']());}}}(_0x43bd,0x1c675));function _0x43bd(){var _0x35b3fa=['123SaKLEH','12398znBZem','102425JTqbPj','190338WWUPVw','Hellow\x20World!','1292MJSgQk','log','527404lCUqJG','63973dQqvvq','2035848dPkEIA'];_0x43bd=function(){return _0x35b3fa;};return _0x43bd();}function _0x3dc6(_0xf65f24,_0x5eeff0){var _0x43bdd9=_0x43bd();return _0x3dc6=function(_0x3dc6f1,_0x485198){_0x3dc6f1=_0x3dc6f1-0x173;var _0x3d72ac=_0x43bdd9[_0x3dc6f1];return _0x3d72ac;},_0x3dc6(_0xf65f24,_0x5eeff0);}function print(){var _0xd7f32d=_0x3dc6;console[_0xd7f32d(0x17a)](_0xd7f32d(0x178));}print();
```
Linux Automation - Centralized Logging
Published: 2022-10-24 09:44:48

In this tutorial , I teach you how to use Rsyslog to configure central-log server on CentOS 7 / RHEL 7.
Why we need logging ?
To find out what's happing on the system/find proper solation to a problem .

**All commands should be run as root user.**

## 1- Configure Server side

To install Rsyslog package , if you don't have it :

`yum -y install rsyslog`

 
configurations file for syslog is located on /etc/rsyslog.conf .
Use your favorite file editor to edit rsyslog.conf and uncomment follows lines :

# Provides UDP syslog receptio
$ModLoad imudp
$UDPServerRun 514

Restart the rsyslog service once your changes have been saved.

`systemctl restart rsyslog`

Verifying syslog server listening on the port 514

`netstat -antup | grep 514
`
Output should be like this :

`udp        0      0 0.0.0.0:514             0.0.0.0:*                 1467/rsyslog
udp6       0      0 :::514                  :::*                    1467/rsyslogdd`

If you have firewall on host server ,you need to enable inbound port 514/UDP

Enabling firewall inbound port TCP

`firewall-cmd --permanent --add-port=514/tc
firewall-cmd --reloadp`

Enabling firewall inbound port UDP

`firewall-cmd --permanent --add-port=514/ud
firewall-cmd --reloadp`

## 2- Configure client side

Install rsyslog package on client , if it is not installed .

configure client by editing /etc/rsyslog.conf by Add the following logging rule below the "RULES" line and restart the rsyslog service.
*.info,@NameOfYourServer/IPAdressFQDN
Restart the rsyslog service once your changes have been saved.
Now all log messages of info priority or higher appear in /var/log/messages on Log-server.
Thank you for reading and have happy coding.
02.14 React State - Basic form with one input (functional components)
Tags: javascript, react, tutorial, webdev
Published: 2022-10-24 09:37:23


App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9enat1ramsdidp4pxky.gif)


Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zttn8a5wop04nyicr36.png)



<hr/>
src/App.js
```react
import './App.css';
import NameForm from './NameFormFn';


function App() {
  return (
    <div className="App">
      <h1>App.js</h1>
      
      <NameForm/>
    </div>
  );
}

export default App;
```
<hr/>
src/App.css
```css
.App{
  background-color: lightskyblue;
  padding: 20px 10px;
}
```
<hr/>
<hr/>
src/NameFormFn.js
```react
import React, { useState } from "react";
import './NameFormFn.css'

function NameForm() {
  const [users, updateusers] = useState([]);
  const [name, setName] = useState("");
  
  const handleSubmit = (event) => {
      event.preventDefault();
      updateusers([...users, { name: name }]);
  }
  
  return (
    <div className="name-form">
      <h2>NameFormFn.js</h2>
      <form onSubmit={handleSubmit}>
        <label>
          New Username:
          <input
            type="text"
            value={name}
            onChange={e => setName(e.target.value)}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>

      <div>
      {
          users.map((user, index) => {
              return(
                <div  key={index}>
                  <div><span>{index + 1 }. </span><span>{user.name}</span></div>
                </div>
              ) 
          }) 
      }
    </div>


    </div>
  );
}

export default NameForm;
```
<hr/>
src/NameFormFn.css
```css
.name-form{
    background-color: lightsalmon;
    padding: 10px 10px;
}
```
02.13 React State - Basic form with one input (class components)
Tags: javascript, react, tutorial, webdev
Published: 2022-10-24 09:37:10

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


Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yjxarjmxkh40xje820p.png)





<hr/>
src/App.js
```react
import React from 'react';
import './App.css';
import NameForm from './NameFormCls';

class App extends React.Component{
  render(){
    return (
      <div className="App">
        <h1>App.js</h1>
        
        <NameForm/>
      </div>
    );
  }
}

export default App;
```
src/App.css
<hr/>
```css
.App{
  background-color: lightskyblue;
  padding: 20px 10px;
}
```
<hr/>
<hr/>
src/NameFormCls.js
```react
import React from "react";
import './NameFormCls.css'

class NameForm extends React.Component {
  constructor(){
    super();
    this.state = {
      users: [],
      newUserName: ""
    }
  }

  handleUsernameInputChange = (event) => {
    this.state.newUserName = event.currentTarget.value;
  }

  handleFormSubmit = (event) => {
    event.preventDefault();
    const newUser = {
      username: this.state.newUserName
    }
    
    this.updateUsersList(newUser)
  }

  updateUsersList = (newUser) => {
    this.setState((prevState) =>{
      return {
        users: [
          ...prevState.users,
          newUser
        ]
      }
      
    })
  }

  render() {
    return (
      <div className="name-form">
        <h1>NameFormCls.js</h1>
        <h3>User List:</h3>

        <div>
          <form onSubmit={(event)=>{this.handleFormSubmit(event)}}>
            <label htmlFor="username">New Username:</label>
            <input type="text" name="username" onChange={(event)=>{this.handleUsernameInputChange(event)}}></input>

            <input type="submit" value="Submit form!"></input>
          </form>
        </div>

        <div>
          {
            this.state.users.map((user, index) => {
              return(<div>
                <span>{index+1}. </span><span>{user.username}</span><br/>
              </div>)
            })
          }
        </div>
      </div>
    );
  }
}

export default NameForm;
```
<hr/>
src/NameFormCls.css
```css
.name-form{
    background-color: lightsalmon;
    padding: 10px 10px;
}
```
02.12 React State - User List mount initial 2 users (functional components)
Tags: javascript, webdev, react, tutorial
Published: 2022-10-24 09:36:53

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvj5tgu4wv9tb9ctw9xh.png)


Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v04lh8dn63mq1730ik42.png)



<hr/>
src/App.js
```react
import React, { useState } from "react";
import "./App.css"

const App = () => {
  const [users, setUsers] = useState([
    {
      key: 1,
      name: "Joe Doe",
      email: "joe@doe.com"
    },
    {
      key: 2,
      name: "Johny Schmoe",
      email: "johny@schmoe.com"
    }
  ]);


  return(
    <div className="App">
      <h1>User List</h1>
      <span>//The users bellow are are inserted from an array of objects...</span><br/>
      <span>//as the default state values, using <b>useState</b> */</span><br/>
      <br/>
      <div>
        {
          users.map((user, index) => {
            return(<div key={user.key}>
              <span>{index} </span>
              <span>{user.name}</span> <br/>
              <span>{user.email}</span> <br/>
              <br/>
            </div>)
          })
        }
      </div>
    </div>
  )
  
}

export default App;
```
<hr/>
src/App.css
```css
.App{
  background-color: lightskyblue;
  padding: 20px 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
```
02.11 React State - User List mount initial 2 users (class components)
Tags: javascript, react, tutorial, webdev
Published: 2022-10-24 09:36:37

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzt48ro2kxuq92gtz4tc.png)

Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmrn5z9etspc63kigmm9.png)



<hr/>

```react
import React from "react";
import "./App.css"

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      users : [],
      newUserName : ""
    }
  }

  componentDidMount(){
    this.setState({
      users: [
        {
          name: "Joe Doe",
          email: "joe@doe.com"
        },
        {
          name: "Johny Schmoe",
          email: "johny@schmoe.com"
        }
      ]
    })
  }


  render(){
    return(
      <div className="App">
        <h1>User List</h1>
        <span>//The users bellow are are inserted from an array of objects...</span><br/>
        <span>//as the default state values, using <b>setState</b> */</span><br/>
        <br/>
        <div>
          {
            this.state.users.map((user, index) => {
              return(<div>
                <span>{index} </span>
                <span>{user.name}</span> <br/>
                <span>{user.email}</span> <br/>
                <br/>
              </div>)
            })
          }
        </div>
      </div>
    )
  }
}

export default App;
```
<hr/>
```css
.App{
    background-color: lightskyblue;
    padding: 20px 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
```
What Are The Best YouTube Channels For Web Dev?
Tags: webdev, discuss, react, angular
Published: 2022-10-24 09:30:43

I often end up on YouTube to learn something new or see how other devs solve certain problems.

I guess big channels like [Fireship.io ](https://www.youtube.com/c/Fireship) and [The Net Ninja](https://www.youtube.com/c/TheNetNinja) are pretty popular.

But what are some of the least known but well worth it channels or persons you would recommend?

I am mainly into frontend, but I am also curious about Node for backend and cloud tech.

Any suggestions?
My new Consistency - Learning in Public
Tags: login, learninginpublic, javascript, webdev
Published: 2022-10-24 09:26:44

I realized after studying, practicing, I get confused sometimes not knowing what I learned - it is funny right? 

Imagine studying streaming and eventEmitter in JavaScript and while scrolling my social media someone post a question “what is the different between evetEmitters and events listener  in JavaScript” and I go blah blah blah - wow Danitiest are you saying you don't know this, you must be kidding right,  guy forget it you don't know, stop deceiving yourself, you don't know, you don't know(This is me talking to myself of course).

It down on me that I needed a feedback mechanism and system to checkmate my learning process.

The first thought that comes to my head was "why not #learnInPublic?" The next was "how do I learn in public?" I moved to google immediately and stumbled on [“The Coding Career Handbook”] (https://www.swyx.io/learn-in-public/) written by the almighty [swyx](https://twitter.com/intent/user?screen_name=swyx).

I love the way he structure the book and his down to earth simple way of putting words - I recommend it, read it, I assure you, it would lead you to make some right decisions as software developer

Back to our gist.

After studying some chapters(9 and 34) in the book I decided to start with creating two productive google chrome extensions that has been on my mind for awhile now:

1. URL Shortener: I realize I have been using this app online everyday recently, whenever I am preparing my DSA leedcode/hackerank solutions to share them on my social media, I have to use the shortener, several occassions my followers called my attention to shortened link that is not working(the shortener didn't do the right shortening), I have to use another app to shorten it right. I was like Danities, you are a software developer, why not build your own URL shortener? Join me as I create one with JavaScript/Nodejs

2. YouTube video downloader and mp3 converter - I download short tutorials videos and music on YouTube much. I told myself think it is better I use this to learn how streaming and pub/sub works in Nodejs.

I am going to build this extension in public join me guys.

Please I call on more experience and good observers to correct me if I am wrong, that is the idea of bringing it to the public right?
Downgrade create-react-app@latest to @17
Published: 2022-10-24 09:17:37

You ran `npx create-react-app@latest` to get things started. Now you want to take it down a notch, to say version @17.

**Do these:**

1. Remove node_module
2. Remove package-lock.json
3. In package.json > change version for react & react-dom to "^17.2.0" or your choice
4. Update index.js as shown:

```
import React from 'react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { render } from 'react-dom'; 

const root = document.getElementById('root');
render(

  <React.StrictMode>
    <App />
  </React.StrictMode>,

  root

);

reportWebVitals();
```

_@17 doesn't use ReactDOM_
_Get root element directly with DOM selector_
_Pass root as 2nd arg to render()_
Khám bệnh lậu ở Vĩnh Phúc
Tags: khambenhlauovinhphuc, chuabenhlauovinhphuc, chuabenhlauodautotnhat, chuabenhlauodau
Published: 2022-10-24 09:00:50



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4k7g9jnikcnkqaorctg.jpg)
http://trangsuckhoevinhphuc.com/dia-chi-kham-chua-benh-lau-o-vinh-phuc/