teleren/devto huggingface dataset:
Prevent Heroku Server from Sleeping for FREE
Tags: webdev, tutorial, node, beginners
Published: 2021-10-31 09:25:45

In this article, I am gonna tell you about how you can run the Heroku server free for a lifetime. So let's get into it.

As you may have known that Heroku does not allow your app to run for more than 1 hour. When an app on Heroku has only one web dyno and that dyno doesn't receive any traffic in 1 hour, the dyno goes to sleep.

When someone accesses the app, the dyno manager automatically wakes up the web dyno to run the web process type. This causes a _short delay_ for this first request, but subsequent requests perform normally.

So now how can we run it forever without sleep? so that web process or API request doesn't have any kind of delay.

### [Heroku](https://www.heroku.com/)

Firstly you need to have a Heroku app which can be a new or old one. if you don't have a Heroku app [Click Here](https://dashboard.heroku.com/apps)

![Create an Heroku App](https://rb.gy/3r2e4i)

Now the next part is the domain of the app if you know the domain then you can skip this part. To get the domain you can go to **Settings > Domain**.

![domain](https://i.imgur.com/eRyB34w.png)

### [UptimeRobot](https://uptimerobot.com/)

Now is the main part we need to use service called **[UptimeRobot](https://uptimerobot.com/)**. Create an account for free and then you will see the dashboard same as below -

![dashboard](https://i.imgur.com/IeCbHFM.png)

Click on the **Add New Monitor** on the Top Left corner. It will open a dialog box

![dialog](https://i.imgur.com/aA2QW7y.png)

**Monitor Type** - should be HTTPs
**Friendly Name** - Name of your app (anything)
**URL or IP** - root domain of heroku app such as `https://your-domain-name.herokuapp.com/`
**Monitoring Interval** - the time difference between two requests. (recommended 20 minutes)
**Monitor Timeout** - the max time it wait for the server to respond

Then Click on **Create monitor** on the bottom right corner.

After that, it will create the monitor server which will send requests to the Heroku server constantly for a lifetime and you can even check the details of the monitor and the server response time.

![res](https://i.imgur.com/1QvgAAq.png)

### Conclusion

With the help of UptimeRobot, we create the robot server which sends automatic requests to the server after the certain time period which we have specified earlier.

<blockquote>
<p>If you like it then you can now extend your support by buying me a Coffee.😊👇</p>
</blockquote>
<a href="https://www.buymeacoffee.com/j471n"><img src="https://cdn.buymeacoffee.com/uploads/project_updates/2021/05/918bc0ffae9a1865553d54bc11e65c4b.gif" alt="Buy Me A Coffee" loading="lazy" width="100"></a>

#### You might be interested in -

- [10 CSS Resources that you should bookmark](https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6)
- [How to share anything from your website by Web Share API](https://dev.to/j471n/how-to-share-anything-from-your-website-by-web-share-api-1h5g)
- [Some Strange Concept of JavaScript](https://dev.to/j471n/some-strange-concept-of-javascript-4icc)
Task force 4.0 week 1 Experience
Tags: codeofafrica, awesomitylab
Published: 2021-10-31 09:24:22

>if it doesn't challenge you, it can never change you

##The origin

It all starts Monday 25th Oct 2021 at 9:00 AM to be exact, where i got to meet all the Taskforce 4 team members, and have some information on how the program will go then the learning began.
where we started with team building session, learning to communicate inside the team in order to achieve success in our work, it really challenged me and learned that communication it's not only about talking.

we kicked the week going with a little bit of technical challenge which was to come out with user stories of a given project idea, where we had discussion as team to make sure we all understand the project in the same way, 

###Cultural differences

during week one we also discussed about cultural differences, different stereotypes and how it can affect in business setup, and some measures to tackle that issue.

###Business Pitching
![Pitching](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkcxwoln5l1pj5ox2nhb.png)

We finished up with a Business Pitching session where we pitched our project we've been working on thought the week and got feedback, on what to improve to have a successful journey with our project. and we got introduced to the awesomity lab team and codeofafrica team vice versa.

generally it was a awesome week and had a lot fun, i'm just curious on what next week will bring.

```
const nextWeek = new Week();
nextWeek.ready("bring it on!");

console.log("hooley")
```
code every day with me
Tags: javascript, programming, 100daysofcode, algorithms
Published: 2021-10-31 09:07:07

##--DAY 13--
Hi, I am going to make #100DaysOfCode Challenge. Everyday I will try solve 1 problem from leetcode or hackerrank. Hope you can go with me until end.
**Now let's solve problem today:**
- Problem: Add binary
- Detail: [here](https://leetcode.com/problems/add-binary/)
- Idea: check sum of each pair binary number from tail.
  - **ex:** 1010, 1011
  - initiate empty string s, one left over = 0;
  - 1 + 0 + (oneleftover=0) = 1 -> s=1, oneleftover = 0
  - 1 + 1 + (oneleftover=0) = 0 -> s=10, set oneleftover = 1
  - 0 + 0 + (oneleftover=1) = 1 -> s=101, set oneleftover = 0
  - 1 + 1 + (oneleftover=0) = 0 -> s=1010, set oneleftover = 1
  - oneleftover = 1 -> s=10101
  - reverse string s : 10101
- My solution (javascript):
```
var addBinary = function(a, b) {
   let binary='',i=a.length-1,j=b.length-1,s=0;
    while(i>=0||j>=0||s){
       let digit = (+a[i]||0)+(+b[j]||0)+s;
       s=Math.floor(digit/2);
       binary+=(digit%2);
       i--;j--;
    }
    return binary.split('').reverse().join(''); 
};
```
-->*If you have better solution or any question, please comment below. I will appreciate.*
Print ANCII value of character
Tags: computerscience, beginners, programming, tutorial
Published: 2021-10-31 04:18:00

Hello Readers...

In this blog we will see how to find the ANCII value of given character using C and C++.

***Program in C***

```c
#include <stdio.h>

int main()
{
   char character;
   printf("Enter character of your choice = ");
   scanf("%c", &character);
   printf("value of character is %c = %d", character, character);
}
```
***Output of above program***

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

No let us see how to write a same program using C++

***Program in C++***

```c
  #include <iostream>  
    using namespace std;  
       
    int main () {  
        char character;    
        cout<<"\n \n \t Enter any character = ";    
        cin>>character;
        cout<<"\t ANCII value of character " <<character << " = " << int(character);    
       return 0;  
    }  
```

***Output for above program***
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m282dczxls8oxieuw3zu.png)


In this way we can find the ANCII value of given character using C and C++.

Thank you for reading.. :unicorn: :heart:
What is API and Top 5 APIs to use in 2021
Tags: javascript, webdev, beginners, tutorial
Published: 2021-10-31 09:02:21

## What is an API?

- **API** can also be said as Application Programming Interface, it is a connection between computer or with a cloud service. It allows applications or websites to send data from each other.
- In simple language one can say, a call between to service which shares data to each other like we share when on call
- Please do refer the image below 👇 for the simplification

![API FLOWCHART](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m80aurzetbl7x1nt293u.png)

This was the brief about the APIs. Now we'll talk about some APIs to use as beginners.

## Top as well good APIs for beginners in 2021:
There are list of the APIs listed below, I hope it will help you 🤞

#### Random / Anonymous User 
Random user generator is a FREE API for generating placeholder user information. Get profile photos, names, and more. It's like Lorem Ipsum, for people.

- [Website](https://randomuser.me/)
- [API URL](https://randomuser.me/api/)

#### Tiny News API
It is a News Fetching totally free API (Application programming interface) which fetches data in JSON format and can be used for your next projects

- [Documentation](https://github.com/snowbit-coderboi/tiny-news-api)
- [API Endpoint](https://tiny-news-api.herokuapp.com/api/)

#### Swapi - The Star Wars API
All the Star Wars data you've ever wanted: Planets, Spaceships, Vehicles, People, Films and Species.

- [Website](https://swapi.dev/)

#### NASA API 
The objective of this API is to make NASA data, including imagery, eminently accessible to application developers

- [Website](https://api.nasa.gov/)

#### Googles API
This is an important API to use, as Google serves all the APIs of its services like Gmail, YouTube, Google Drive, and bunch of APIs.
Better try visiting their [API page](https://developers.google.com/apis-explorer)


I hope you have liked this post, considering liking it which helps me to keep motivated, Thank you! 🙏

## Enjoy a meme

![Just a meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xp2vaemakusmktck1v4.png)
 
Comment if you have understand the meme 😂
Hawk Open Source Project
Tags: github, python, opensource, showdev
Published: 2021-10-31 08:55:30

Hawk is a network and pentest utility that I developed so that I could perform different kinds of task using the same suite, instead of jumping from one tool to another.
Currently, this script can perform a good variety of tasks such as: 
- ifconfig, 
- ping, 
- traceroute, 
- port scans (including SYN, TCP, UDP, ACK, comprehensive scan), 
host discovery (scan for up devices on a local network), 
- MAC address detection (get MAC address of a host IP on a local network), 
- banner grabbing, 
- DNS checks (with geolocation information), 
- WHOIS, 
- subdomain enumeration, 
- vulnerability reconnaissance, - 
- packet sniffing, 
- MAC spoofing, 
- IP spoofing, 
- SYN flooding, 
- deauth attack, 
- brute-force attack (beta).

Other features are still being implemented. Future implementations may include WAF detection, DNS enumeration, traffic analysis, XSS vulnerability scanner, ARP cache poisoning, DNS cache poisoning, MAC flooding, ping of death, network disassociation attack (not deauth attack), OSINT, exploits, some automated tasks and others.
If you want to become a contributor, make a pull request or issue.
Waiting for your feedback. Kudos
Link to the repository: 
https://github.com/medpaf/hawk
Contributors needed (Pentest/networking project)
Tags: programming, python, cybersecurity, showdev
Published: 2021-10-31 08:53:21

Hawk is a network and pentest utility that I developed so that I could perform different kinds of task using the same suite, instead of jumping from one tool to another.
Currently, this script can perform a good variety of tasks such as: 
- ifconfig, 
- ping, 
- traceroute, 
- port scans (including SYN, TCP, UDP, ACK, comprehensive scan), 
host discovery (scan for up devices on a local network), 
- MAC address detection (get MAC address of a host IP on a local network), 
- banner grabbing, 
- DNS checks (with geolocation information), 
- WHOIS, 
- subdomain enumeration, 
- vulnerability reconnaissance, - 
- packet sniffing, 
- MAC spoofing, 
- IP spoofing, 
- SYN flooding, 
- deauth attack, 
- brute-force attack (beta).

Other features are still being implemented. Future implementations may include WAF detection, DNS enumeration, traffic analysis, XSS vulnerability scanner, ARP cache poisoning, DNS cache poisoning, MAC flooding, ping of death, network disassociation attack (not deauth attack), OSINT, exploits, some automated tasks and others.
If you want to become a contributor, make a pull request or issue.
Waiting for your feedback. Kudos
Link to the repository: 
https://github.com/medpaf/hawk
DevBox 1.2.0 🎉
Tags: news, productivity, startup, development
Published: 2021-10-31 08:45:04

Hi 👋

I'm happy to announce that [DevBox](www.dev-box.app) 1.2.0 is out! It adds **6 new tools** and bug fixes!

DevBox is a desktop application / browser extension of useful tools for developers. If you are curious, check out the [introductory post](https://dev.to/gdotdesign/devutils-everyday-utilities-for-the-everyday-developer-4m) and [website](www.dev-box.app).

You can read full change log below:

- Fixed some tools not working in the extension.
- Fixed a bug in PDF merger tool.
- HTML previews background is defaults to white and full HTMLs can be previewed.
- Added search input to search for tools.
- Added **HTML To Markdown** tool.
- Added **HTML To Text** tool.
- Added **QueryString Parser** tool.
- Added **URL Parser** tool.
- Added **Image Extractor** tool.
- Added **SVG Extractor** tool.

You can still buy DevBox [here](https://gdotdesign.gumroad.com/l/devbox/earlybird) for **a lifetime price of ~~$25~~ $20 💰** - with these new tools included.
Run JS directly from the browser
Tags: javascript, webdev, programming, tutorial
Published: 2021-10-31 08:35:52

**Hey folks!**

Sometimes when working on large project we need to check if this piece of code will work what it says or not and we can't debug in our project as it will take time to debug, In this case some dev use online js compiler or other editors/IDE but you can run `javascript` directly from your browser and also save code for your future use.

**Step 1 :** Right click in browser and click on inspect.
**Step 2 :** Click the **Sources** tab to open the **Sources** panel. The **Page** pane usually opens by default.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of5yj0c8gy7pfvbmjphj.png)
**Step 3 :** Click the  **Snippets**  tab to open the  **Snippets**  pane. You might need to click  **More Tabs**  >> in order to access the  **Snippets**  option.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u7lb1elz3p45e1aesxg.png)

##   Open the Snippets pane

The  **Snippets**  pane lists your Snippets. When you want to edit a Snippet, you need to open it from the  **Snippets**  pane.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cw9nl056abssicpdhbby.png)
press **Control+Enter** or Command+Enter (Mac).

##   Rename Snippets

1.  [Open the  **Snippets**  pane](https://developer.chrome.com/docs/devtools/javascript/snippets/#open).
2.  Right-click the Snippet name and select  **Rename**.

## Delete Snippets

1.  [Open the  **Snippets**  pane](https://developer.chrome.com/docs/devtools/javascript/snippets/#open).
2.  Right-click the Snippet name and select  **Remove**.

[More details on snippets here.](https://developer.chrome.com/docs/devtools/javascript/snippets/#open)

<center>*What's your thought on this ?*
Beginner to beginner introduction to Svelte
Tags: beginners, svelte, 100daysofcode, codenewbie
Published: 2021-10-31 08:31:24



## Conditional Rendering





Hello friends, this is the second chapter of my series about Svelte, a new idea of framework.

 This series of posts are not intended to teach anyone, they are basically a way for me to learn better the topic, so be free to roast me or help me where I make mistakes.

What is Conditional Rendering?

![Question mark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7w57qbjzxfjg7t9seo29.png)

 As the official documentation says:
 **“ Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app“**.
 
I can’t really say my opinion on other frameworks, I am really new in this area, so I’ll take it to granted!

In the last few days, I’ve been playing with it, and I can tell you that it’s really easy to grasp it and hold it and at the same time if you are new to frameworks, the syntax it’s easy to learn.

For me the difficult part it’s, no it’s not difficult, let’s say unusual, it’s working with different components.

I usually play with single app or a single page with a single style sheet and another for JavaScript, but I see the convenience and speed of working on small chunks of code and puzzle it together, I like it!

**Remember that this is all new for me, using the JavaScript power in this way it’s vitalizing my knowledge about it.**




Today i am writing about: Conditional Rendering

Conditional rendering means the way we show or hide elements from the Dom, based on JavaScript conditions, that we write directly in the HTML.

Render a component is extremely simple: 

```
<main>

<h1>Hello World </h1>

</main>
```


Basic `if` conditions start with a special syntax:

```
{#if isActive} // we open the condition with "#"

<h1> Your title goes here </h1> // HTML

{/if}  // We close the condition with "/"
```

The full example:

```
<script>
  Let isActive = true;
</script>
<main>
{#if isActive}
<h1> Show your title </h1>
{/}
```
We render the h1 element into the dom if isActive property is true.

Now we can chain differents statements, another ``else``block or an ``else if`` block and so on.

A very good place to play with Svelte is the REPL on the Svelte official page, the follow link is related for the [Conditional Rendering](https://svelte.dev/repl/b023c56cdf0d42819fe7ccc38ea75c41?version=3.44.0)

That’s it for my contribution about conditional rendering, there is a lots more to add to it, but this set of my first post will be not very long, because I am still not use to it, but I promise I will improve my writer skills along my improvements with Svelte .

Happy Halloween! ![halloween pumpkin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uuz9pbjoe66335646e1.jpeg)

See you next Sunday, during the week you can find me on [Twitter](https://twitter.com/giuzioale).
Javascript : Understand Map() & Filter () methods of an Array  in Laymans's Terms.
Tags: javascript, webdev, beginners, programming
Published: 2021-10-31 08:23:33

<b>I explained map() and filter() methods of an array in javascript in simple Laymans's terms. </b>

Timeline : 

00:00 Introduction to Video 

00:13 Scenario to understand Map 

00:35 using Map method 

03:14 Filter Method 

05:00 Similarities between Map & Filter

{%youtube -Ab9hRb7dZs%}
Diving deep into JavaScript functions
Tags: javascript, react, webdev, angular
Published: 2021-10-31 08:19:11

![codewithaditya](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pez73y7ytp75cn3hzgxo.png)

![codewithaditya](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twjj2gofzvo4rvhznojs.png)

![codewithaditya](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qla4ig6nx8k54go170oc.png)

![codewithaditya](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dtbsj9kac7f5724d0qk.png)

![codewithaditya](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8zw8zr90q9j4sskp4al.png)
 
![codewithaditya](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23h3g5pg8uyyimfkfkgd.png)
  
![codewithaditya](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywxb5yqhql35wnm0x8cv.png)
 
 
![codewithaditya](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu26nqer40s5rhk9b7ec.png)

## Follow me on Instagram for more such content [@codewithaditya](https://www.instagram.com/codewithaditya/)
JavaScript Arrow Functions
Tags: javascript, html, webdev, programming
Published: 2021-10-31 08:11:30

**JavaScript Arrow Function**
Arrow functions were introduced in ES6.

Arrow functions allow us to write shorter function syntax:

Before Arrow Function

```
function hello() {
  return "Hello World!";
}
```

After Arrow Function

```
let hello =()=> “Hello World”;
```

<hr>


***Arrow Function Syntax***

```
let myFunction = (arg1, arg2, ...argN) => {
    statement(s)
}
```


If the body has single statement or expression, 
you can write arrow function as:



```
let myFunction = (arg1, arg2, ...argN) => expression
```


It gets shorter! If the function has only one statement, 
and the statement returns a value, you can remove the brackets 
and the return keyword

<hr>


***Arrow Function with No Argument***

If a function doesn't take any argument, then you should use empty parentheses. for example,

```
let greet = () => console.log('Hello');
greet(); // Hello
```


***Arrow Function with One Argument***

If a function has only one argument, you can omit the parentheses. For example,

```
let greet = x => console.log(x);
greet('Hello'); // Hello 
```


***Arrow Function with more than one Argument***

```
let x = (x, y) => x * y;
```

<hr>

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations.

***Differences & Limitations:***

Does not have its own bindings to **this** or **super**, and should not be used as methods.

Does not have **new.target** keyword.

Not suitable for **call**, **apply** and **bind** methods, which generally rely on establishing a scope.

Can not be used as **constructors**.

Can not use **yield**, within its body.


<hr>

Thankyou


Follow me on Instagram: https://instagram.com/reboot13_dev

Checkout my Github: https://github.com/reboot13-git
Fetching Query and Route Parameters in Express.js
Tags: javascript, express, node
Published: 2021-10-31 08:10:51

---
title: Fetching Query and Route Parameters in Express.js
published: true
description: How to access Query and Route Parameters in an Express.js App
tags: javascript , express , nodejs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlew7uihtb7llae7r2o6.jpg
---
Photo by <a href="https://unsplash.com/@oskaryil?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Oskar Yildiz</a> on <a href="https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  
## Introduction

Express.js is a popular backend web application framework for Node.js. While setting up your routes you might encounter scenarios where you need to fetch the parameters specified in the URL path to retrieve a particular set of data. This article will take you through how to extract values from URL route and query parameters. 

We recommend you have some basic experience with Javascript and NodeJS and have setup simple routes using Express.js before you go on with this guide.

## Extract Query Parameters

A Query String is the part that comes after the Question mark `?` in a URL. Let's take an example URL.

```
https://example.com/api/users?type=admin&status=active
```

The URL above fetches a list of users with a `type` of `admin` and `status` is `active` .To fetch these values in Express you can access them using `req.query` object in your route handler.

```jsx
const express = require('express')
const app = express()

app.get('/users', (req, res) => {
  const type = req.query.type;
  const status = req.query.status;
})
app.listen(8080);
```

## Extract Route Parameters

On some routes we might want to fetch parameters that are specified within the URL path. Extracting these parameters is similar to the Query parameters. Let's take an example URL.

```
https://example.com/api/users/1
```

This URL fetches a User resource with and `id` of `1`. Using Express we can write a single route handler that can fetch any User with any provided `id` . Lets take a look at an example.

```jsx
const express = require('express')
const app = express()

app.get('/users/:id', (req, res) => {
  const id = req.params.id;
})
app.listen(8080);
```

In this example, you can notice that the route specified is `/users/:id` , where `:id` represents the provided user id in the URL. Whenever we navigate to the URL with a value passed in that part of the path gets populated as the `id` parameter. We can fetch the `id` within the route in the `req.params` object.

## Conclusion

We can see that we can access both Query and Route parameters from a URL using Express.js.  If you need to do some added validation of the parameters you can check out [express-validator](https://express-validator.github.io/docs/) to get the right data into your web app. I hope this guide will assist in better grasping Express.js as you use it in your projects.