teleren/devto huggingface dataset:
Online-CV With Google-Cloud Run
Tags: gcloud, python, devops
Published: 2020-11-28 12:21:29

##Inherit from the post [pelican-resume with AWS EC2](https://dev.to/vumdao/pelican-resume-with-docker-compose-and-aws-cdk-33e5) this post shows how to create online-cv with gcloud-run

Source: https://github.com/vumdao/pelican-resume

###**1. Generate resume front-end output**
```
docker run -v $PWD:/site vorakl/alpine-pelican pelican /site/content -o /site/output -s /site/pelicanconf.py
$ docker run -v $PWD:/site vorakl/alpine-pelican pelican /site/content -o /site/output -s /site/pelicanconf.py
WARNING: Feeds generated without SITEURL set properly may not be valid
WARNING: No valid files found in content for the active readers:
  | BaseReader (static)
  | HTMLReader (htm, html)
  | MarkdownReader (md, markdown, mkd, mdown)
  | RstReader (rst)
Done: Processed 0 articles, 0 drafts, 0 pages, 0 hidden pages and 0 draft pages in 0.09 seconds.
```

###**2. Create nginx Dockerfile to create backend CV**
```
# nginx state for serving content
FROM nginx:alpine
# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets
RUN rm -rf ./*
COPY output .
# Containers run nginx with global directives and daemon off
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]
```

###**3. Create cloud build yaml file**
**General Steps Of the build set**
- Build image
- Push image to gcloud registry
- gcloud deploy
```
steps: 
- name: 'gcr.io/cloud-builders/docker'
  args: [ 'build', '-t', 'gcr.io/$PROJECT_ID/myresume', '.' ]
- name: 'gcr.io/cloud-builders/docker'
  args: ['push', 'gcr.io/$PROJECT_ID/myresume']
- name: 'gcr.io/cloud-builders/gcloud'
  args:
  - 'run'
  - 'deploy'
  - 'cloudrunservice'
  - '--image'
  - 'gcr.io/$PROJECT_ID/myresume'
  - '--region'
  - 'asia-southeast1'
  - '--platform' 
  - 'managed'
  - '--allow-unauthenticated'  
images:
- 'gcr.io/$PROJECT_ID/myresume'
```

###**4. Build and Deploy**
####Get familiar with gcloud-build and gcloud-run through
- https://cloud.google.com/cloud-build/docs/quickstart-build
- https://cloud.google.com/cloud-build/docs/quickstart-deploy

####Remember to add permission to the cloud build
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h2nlaqw2j9a4pqfz13ut.png)

```
gcloud builds submit --config cloudbuild.yaml
```

####**Note**
- Default listen port of gcloud container is ``8080``, update it to listen to port 80 (nginx)

- Ref: https://cloud.google.com/run/docs/configuring/containers#configure-port

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zzwez5vabuwm98t2zsp4.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2j2or8odp2dqzlhg7sfq.png)

####Result
```
Step #2: Service [cloudrunservice] revision [cloudrunservice-00002-fin] has been deployed and is serving 100 percent of traffic.
Step #2: Service URL: https://cloudrunservice-ytz2j3pyjq-as.a.run.app
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bqbz3dlfo9nvxxgndhe5.png)
JavaScript Code Daily Challenge #8
Tags: javascript, challenge, codenewbie, beginners
Published: 2020-11-28 11:59:01

# **About**

This is a series of JavaScript Code Daily Challenge. Each day I show a few solutions written in JavaScript. The questions are from coding practice/contest sites such as HackerRank, LeetCode, Codeforces, Atcoder and etc.

> Sub-array Division
> [https://www.hackerrank.com/challenges/the-birthday-bar/problem](https://www.hackerrank.com/challenges/the-birthday-bar/problem)

```javascript
'use strict';

const fs = require('fs');

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', function(inputStdin) {
    inputString += inputStdin;
});

process.stdin.on('end', function() {
    inputString = inputString.split('\n');

    main();
});

function readLine() {
    return inputString[currentLine++];
}
```
> Complete the birthday function in comment.
```javascript
function birthday(s, d, m) {


}
```
```javascript
function main() {
    const ws = fs.createWriteStream(process.env.OUTPUT_PATH);

    const n = parseInt(readLine().trim(), 10);

    const s = readLine().replace(/\s+$/g, '').split(' ').map(sTemp => parseInt(sTemp, 10));

    const dm = readLine().replace(/\s+$/g, '').split(' ');

    const d = parseInt(dm[0], 10);

    const m = parseInt(dm[1], 10);

    const result = birthday(s, d, m);

    ws.write(result + '\n');

    ws.end();
}
```
Collaborating with others on Github with Git
Tags: github, git, tutorial
Published: 2020-11-28 11:45:43

Hey guys, first of all, thanks so much for 100 FOLLOWERS! That's more than my Twitter! I've got a special for you, collaborating with others! This is also the first tutorial of mine to feature a video! Check it out below and sorry for my voice (you can mute it and turn on captions if you want)

{% youtube zPUKf3qLpZk %}
I received first donation on my open-source side project and it felt great 😍
Tags: opensource, showdev, vscode, typescript
Published: 2020-11-28 11:40:06

> You can read the updated version on https://gourav.io/blog/first-donation-on-open-source-side-project

I made a plugin for VS Code a while back (3 yrs) for my own use. Other people started using it so I recently decided to put a donate button in plugin description and see what happens. And guess what somebody donated 5$.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2cqaaamdk754d327w8lb.png)

I know I know it's not a big amount but somebody put an effort to make that transaction means he cares about it and found it useful.

This is the plugin I'm talking about. It adds new toolbar buttons to VSCode: https://github.com/GorvGoyl/Shortcut-Menu-Bar-VSCode-Extension

---

Thank you for reading, I would love to connect with you on Twitter [@GorvGoyl](https://twitter.com/intent/follow?user_id=325435736)
Which libraries should developers learn to meet the new design trends 2021?
Tags: discuss, design, javascript, animation
Published: 2020-11-28 11:30:54


I wanted to take the [Figma update](https://releases.figma.com/2020/11/design-like-you-code-with-auto-layout.html) for a spin and since it been a while since I designed for a living I was looking up [Design trends for 2021](https://99designs.com/blog/trends/web-design-trends/).

If you don’t have time to skim the post, here is a TLDR;

- Parallax animation
- Neumorphism
- Abstract art compositions
- Comfortable colors
- Web design for causes
- Scrolling transformations
- Digital interpretations of physical products
- Captivating questionnaires
- Three-dimensional colors

## What do you think would be a great lib to learn or to look into a little more in-depth?
GSAP, Canvas-libs, HTML5 Video-api, SVGator or something else/more? 3D-modeling of products with ThreeJS?
Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android...
Published: 2020-11-28 11:13:59

I also had this bug, I was investigating, and then I came up with the solution that using expo will not solve, however, it can be hidden.

Write this code snippet in the scope of your component, after the imports:

LogBox.ignoreLogs(["Setting a timer"]);
const _console = _.clone(console);
console.warn = (message: string) => {
  if (message.indexOf("Setting a timer") <= -1) {
    _console.warn(message);
  }
};
How to deploy React App to Heroku in 5 minutes 🔥(with video)
Tags: react, heroku, javascript, devops
Published: 2020-11-28 10:59:29

We can deploy our React Apps to Heroku easily. 🔥

In this video, I used `create-react-app` or CRA to build the react app boilerplate.

To learn how to deploy your React Apps to Heroku, watch the video 🤓

{% youtube IZNrZvk7pmw %}

SUBSCRIBE to YouTube Channel - https://www.youtube.com/channel/UCy5EgfydCQlVv_AM-FZyYcg?sub_confirmation=1
LIKE FB Page - https://www.facebook.com/the.destro.dev.show/
Follow on Twitter - https://twitter.com/destro_mas
Follow on DEV - https://dev.to/destro_mas

Made with ❤️ in Berlin!

Cheers!
👋
<hr />
As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸

<a href="https://www.buymeacoffee.com/destrodevshow" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 117px !important;" ></a>
𝗛𝗼𝘄 𝘁𝗼 𝗱𝗲𝗽𝗹𝗼𝘆 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽 𝘁𝗼 𝗛𝗲𝗿𝗼𝗸𝘂 𝗶𝗻 𝟱 𝗺𝗶𝗻𝘂𝘁𝗲𝘀 🔥
Tags: react, heroku, webdev, devops
Published: 2020-11-28 10:57:47

We can deploy our React Apps to Heroku easily. 🔥

In this video, I used `create-react-app` or CRA to build the react app boilerplate.

To learn how to deploy your React Apps to Heroku, watch the video 🤓

{% youtube IZNrZvk7pmw %}

SUBSCRIBE to YouTube Channel - https://www.youtube.com/channel/UCy5EgfydCQlVv_AM-FZyYcg?sub_confirmation=1
LIKE FB Page - https://www.facebook.com/the.destro.dev.show/
Follow on Twitter - https://twitter.com/destro_mas
Follow on DEV - https://dev.to/destro_mas

Made with ❤️ in Berlin!

Cheers!
👋
Play Matka Satta Online
Tags: sattamatka, playmatka, sattamatkaonline, playmatkapp
Published: 2020-11-28 10:53:40

Satta Matka and you should choose our app because we provide you many facilities and services to make your experience great with [Play Matka Online](https://www.playmatka.co/). We have exclusive tips created by our team of experts from many years of experience. Everything is flexible on our app and you can play this game with ease.
Mix arrangement in C (random order)
Tags: programming, oop
Published: 2020-11-28 07:19:23

In this post I show you how to mix an arrangement in C , that is, randomize it or randomize it; whatever you call it. In this way at the end we will have the arrangement mixed, ordered randomly .

#Table of contents:
* Mix arrangement in C
* Putting it all together

To achieve this we simply need to loop through the array and at each iteration:

1. Get a random index that is in the range of alongitud -1
2. Swap the item at the cycle index for the random index

Let's go there!

##Mix Arrangement in C
I have explained the operation above. We start by defining the function that will give us a random number and feeding srand.

The function looks like this:
```
// maximum and minimum are inclusive
int  random_in_range ( int minimum, int max) {
    return minimum + rand () / (RAND_MAX / (maximum - minimum + 1 ) + 1 );
}
```
We feed **srand**:
`srand(getpid());`
Then we define the array and calculate its length:

```
int array [] = { 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 };
int length =
        sizeof (array) / sizeof array [ 0 ];
```
Wre print the original so that the difference is noticeable:
```
printf ( " Original fix: \ n " );
for ( int i = 0 ; i <length; i ++) printf ( " % d , " , array [i]);
```
Now comes the part of the algorithm to make a random arrangement in C:
```
// Cycle from 0 to array length
for ( int i = 0 ; i <length; i ++) {
    int Random Index = random_in_range ( 0 , length - 1 );
    // Swap the current with an element of the random index
    temporary int = array [i];
    array [i] = array [RandomIndex];
    array [randomIndex] = temporary;
}
```
We get a random index on line 3 . The security in the index iis then temporarily backed by temporal. Then, to the element that is in iwe put what is in the random index and to the random index we put the temporary one. [Read more](https://www.kodlogs.com/blog/2088/mix-arrangement-in-c-random-order)
Displaying a Deployment Status Badge for your Next.js App on your Github Readme
Published: 2020-11-28 10:49:49

*This article was first published on [https://devx.sh](devx.sh).*

Some webapp deployment providers, like Netlify, automatically generate badges for displaying the deployment status of your project. Others, like Vercel, don't. 

It is, however, quite straight forward to implement your own solution for this use case if you use a provider that is integrated with the Github API, like [Vercel](https://vercel.com).



I have published an [NPM package](https://www.npmjs.com/package/deployment-badge) *deployment-badge* to use with your Next.js app, so you can get started as fast as possible. DevX.sh [(Github)](https://github.com/FelixMohr/nextjs-material-ui-blog) is an example of an app using *deployment-badge*. 
 
![Deployment Badge](https://dev-to-uploads.s3.amazonaws.com/i/npwd9t3n0m05kt92n474.png)
 
Let's see how to use this package. 


## How to use the NPM package to display a status badge on your Readme

Install *deployment-badge* with your package manager:

``yarn add deployment-badge`` or ``npm install --save deployment-badge``

Create an API handler as follows in the directory *pages/api* of your Next.js project:

```typescript
import type { NextApiRequest, NextApiResponse } from 'next'
import deploymentBadgeHandler from 'deployment-badge'

const handler = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  await deploymentBadgeHandler(req, res, { deploymentsUrl: DEPLOYMENTS_URL, namedLogo: 'vercel', env: 'Production' })
}

export default handler
```
If you aren't using typescript, simply omit the types above.


The third parameter of ``deploymentBadgeHandler`` accepts these values as options:

* *deploymentsUrl*: The Github API deployments URL of your project, e.g. https://api.github.com/repos/FelixMohr/nextjs-material-ui-blog/deployments 
* *namedLogo*: A logo to include in the generated badge. Any name from [Simple Icons](https://simpleicons.org/) can be chosen. Can be omitted.
* *env*: The environment for which to generate the badge. Can be omitted, default is *Production*

This handler will generate JSON responses that can be used by [Shields.io](https://shields.io), from where they will be added to the README.md:

```markdown
[![Deployment Status](https://img.shields.io/endpoint?url=https://devx.sh/api/deployment)](https://devx.sh)
```

Replace the URL above with the URL of your deployed handler.

## Check out the source code of *deployment-badge*

The source code of this project is quite concise itself. If you are interested, you can find the whole code at [Github](https://github.com/FelixMohr/deployment-badge).
TODO [28-11-2020]
Published: 2020-11-28 10:42:11

Java Assignment [2/12/2020]
ENTR2001 Journals X 2 [4/12/2020]
Discrete Exam [8/12/2020]
Java Exam [18/12/2020]
IIMT 1611 Journals X 3 [23/12/2020]
Build your first telegram Bot with Nodejs
Tags: programming, javascript, node
Published: 2020-11-28 10:37:54

### What is telegram?
Telegram is one of top social media apps/platforms that offers security with encryption and on a completely free, fast, and distributed system.

### What is a chatbot?
A bot is a software program that operates on the Internet and performs repetitive tasks.

### What is a Telegram Bot?
>Telegram Bots are accounts operated by software – not people – and they'll often have AI features. ... They can do anything – teach, play, search, broadcast, remind, connect, integrate with other services, or even pass commands to the Internet of Things.



### Getting started


#### Step 1: Getting Permission From BotFather
Sign In to your telegram account and search for BotFather himself and start a conversation with him.

![Screenshot_20201127-223612.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606514223597/knCVcvWtr.png)


![Screenshot_20201127-223700.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606514264558/ABT9EPAOE.png)


We’ll now invoke the process of creating a new bot with:

``` /newbot ```

![Screenshot_20201127-223908.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606514610279/5PuI8vwG-q.png)

Give it a name and a username:

Once that process is complete, you’ll get an API Token to use, copy it somewhere, we’ll be using it soon in our application.

![Screenshot_20201127-230658.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606514947359/Op8eBavXI.png)

#### Step 2: Set up your project directory
Now that we have Node.js and npm installed and our Telegram account is ready, we can start with the project. Open up your preferred terminal and run these commands:

Create a directory

`mkdir movie-finder-telegram-bot 
`

Move into the directory

`cd movie-finder-telegram-bot`

Now we have a directory for our Telegram bot, but we need a package.json, this tells npm information about our project. To do this, (in the same terminal window) we need to run this:

Continue Reading at https://iamnotstatic.hashnode.dev/build-your-first-telegram-bot-with-nodejs


Hopefully, this article can be useful for readers. If given the opportunity, I will explain about Node.js again or anyone has a request?
Please criticize and advise, do not forget to leave a comment and give Clap 👏👏
Python Enumerate
Published: 2020-11-28 10:30:44

## Iterating with `for in`

In a variety of languages, especially c-based languages, iterating over lists, or arrays involves incrementing a variable until it reaches a certain size. Python for-loops actually lack this syntax, so `for in` tend to get used a lot.

```python
from string import ascii_lowercase as ascii

for c in ascii:
	print(c)
```

Output:

```python
a
b
c
d
...
```

## Iterating with indices

Thus what you end up doing to access a list via indices, is:

```python
from string import ascii_lowercase as ascii

for i in range(len(ascii)):
	print(i, ascii[i])
```

Output:

```python
0 a
1 b
2 c
3 d
...
```

## Using `enumerate`

The pythontic way, when you want to access both the index and value directly, without the extra lookup, is to use `enumerate`.

```python
for i, c in enumerate(ascii):
	print(i, c)
```

Output:

```python
0 a
1 b
2 c
3 d
...
```

### Indexing from an arbirary number

If a second argument is passed into enumerate, it will begin indexing from that number. For example, to start indexing from `1`:

```python
for i, c in enumerate(ascii, 1):
	print(i, c)
```

Output:

```python
1 a
2 b
3 c
4 d
...
```
🚀 We are live on Product Hunt - TOP #3
Tags: reactnative, productivity, producthunt
Published: 2020-11-28 10:26:37

Hey guys!

We are really excited to launch our side-project on Product Hunt. Billbot is an app to manage your subscriptions and regular expenses with ease.

Here's a highlight of some of Billbot's best features so far:

- ♾️Unlimited subscriptions: Add as subscriptions and expenses as you need with no limits
- 📲Android & iOS compatible
- 🔔Set reminders for your subscriptions to get notified before the due date
- 📦Create separate spaces to classify your expenses (home, personal, freelancing, etc...)
- 🎨Customize the accent color of your spaces and subscriptions... and add tones of emojis!
- 💶Convert your subscription value to 15 different currencies
- 🔥+200 popular templates ready to add with one tap
- 🌍Enjoy Billbot in 8 different languages: english, spanish, french, german, italian, portuguese, russian and hindi
- 💡Get insights on your regular costs

We would love to get your feedback and support 🙏

https://www.producthunt.com/posts/billbot
How will an app like Uber handyman services help with your business?

Tags: uberforhandyman, devops
Published: 2020-11-28 10:10:55

Quality and trust are the two wheels that every business will rely on irrespective of the industry. As we are moving towards the peak of the digital age, on-demand services have become the need of the hour. Adapting an app like Uber for handyman services can be the ideal solution to grow your business exponentially. Customers can avail multiple services based on the providers’ location, experience, location, and specialization. Managing business operations is easier than ever with the inbuilt tracking system. Expand your customer base and maximize your overall revenue with the on-demand multiservices app like Uber.
function inside javascript
Tags: css, javascript, html
Published: 2020-11-28 09:12:38

HTML File
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Photo Gallery</title>
	
	<link rel="stylesheet" href="css/gallery.css">

	<script src = "js/gallery.js"></script>

</head>

<body>
	
	
	<div id = "image">
		Hover over an image below to display here.
	</div>
	
	<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">
	
	<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "upDate(this)" onmouseout = "unDo()">
	
	<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()">

</body>
</html>


CSS file

body{
		margin: 2%;
		border: 1px solid black;
		background-color: #b3b3b3;
}
#image{
    line-height:650px;
		width: 575px;
    height: 650px;
		border:5px solid black;
		margin:0 auto;
    background-color: #8e68ff;
    background-image: url('');
    background-repeat: no-repeat;
    color:#FFFFFF;
    text-align: center;
    background-size: 100%;
    margin-bottom:25px;
    font-size: 150%;
}
.preview{
		width:10%;
		margin-left:17%;
    border: 10px solid black;
}
img{
		width:95%;
}


Need to write a code inside  function 

function upDate(previewPic){
 /* In this function you should 
    1) change the url for the background image of the div with the id = "image" 
    to the source file of the preview image
    
    2) Change the text  of the div with the id = "image" 
    to the alt text of the preview image 
    */

    
     
	}

function unDo(){

     /* In this function you should 
    1) Update the url for the background image of the div with the id = "image" 
    back to the orginal-image.  You can use the css code to see what that original URL was
    
    2) Change the text  of the div with the id = "image" 
    back to the original text.  You can use the html code to see what that original text was
    */
		
	}
Finding a Loop in a Singly Linked List in Python
Tags: python
Published: 2020-11-28 09:10:31

Given the head of a Singly Linked List that contains a loop, which is the list's tail points to some node in the list instead of none.

Given a standard class of Linked List
```python
class LinkedList:
    def __init__(self, value):
        self.value = value
        self.next = None
```

When we look through the Linked List we should return where the loop returns us too. So after our tail node, we return what comes after that.

We look at 2 nodes at a time moving at different speeds. If the nodes ever equal each other, then that is where our loop is.

```python
def findLoop(head):
    first = head.next
    second = head.next.next
    while first != second:
        first = first.second
        second = second.next.next
    while first != second:
        first = first.next
        second = second.next
    return first
```
Create Your Own Solar System Using Python 
Tags: python, plotly, visualization
Published: 2020-11-28 09:02:00

Hi,
If nobody told you about the many wonders Python can do, then you are in for a treat. I am going to tell you how I made my own solar system from scratch using Python.

Python offers you a great selection of graphic libraries and allows you to plot all major types of graphics so that you can visualize your data.

Here, I will be using a combination of Plotly Scatter3D and Plotly Surface plots to create an entire solar system inside a graph. In this article, I’m going to introduce you to the Python code that will allow you to recreate it yourself.

You can find the code here:
https://github.com/sanjanamops8752/Create-Your-Own-Solar-System-Using-Python

For more information on the project, visit: 
https://medium.com/analytics-vidhya/create-your-own-solar-system-using-python-6ff550dbf099