teleren/devto huggingface dataset:
Generate Files for gRPC in Node.js
Tags: node, grpc, microservices, protoc
Published: 2020-11-01 12:52:42

When I started working with [gRPC](https://grpc.io/) in Node.js, I followed Google's [dynamically generated code base](https://github.com/grpc/grpc/tree/v1.33.1/examples/node/dynamic_codegen/route_guide) to create my servers and clients.  And for basic development, this works really well.  At least in a mono repository using relative paths to import the proto files. As we move closer to deployment though, a glaring problem has emerged.

> A growing collection of proto files - many of which are sharing messages and models - that need to be imported into various gRPC servers and clients.  These servers and clients will be hosted in various Kubernetes clusters.

My solution:
> Create an npm package for each service cluster to house the needed proto files.

At first, I thought I would just write a bash script to copy the needed service and message/model files into an npm package and call it a day.  However, I know that you can generate actual server and client from the proto files (in some languages), and I want to be ready for that when it comes to Node.js.  Therefore, I decided that my npm packages would hold `protoc` generated files.

To do this, I needed to have [`protoc`](https://grpc.io/docs/protoc-installation/) and [`grpc-tools`](https://www.npmjs.com/package/grpc-tools) installed on my development machine. (**Note:** `grpc-tools` needs to be installed globally for this to work).

I decided to make a bash script file to handle the actual generation.  I figure we can use/modify this file later to use in a more automated process.  

1. I remove any existing files. For Node.js, `protoc` creates two files, both of which end in `_pb.js`.  So I used a wildcard to select and delete all files ending that way.
```
rm -f <path to target>/*_pb.js
```
2. Then I actually generate the files:
```
grpc_tools_node_protoc --js_out=import_style=commonjs,binary:<path to export directory> --grpc_out=generate_package_definition:<path to export directory> <proto file>
```
**Note:** I found that the script needed to change directories and run in the directory housing the proto file.  I was not able to figure out how to use relative paths to that directory, though I do believe there is a way to do it.

The `--grpc_out=` flag supports two options:
> - `grpc_js`: Generates code with `require('@grpc/grpc-js')` instead of `require('grpc')`
> - `generate_package_definition`: Generates code that does not require any gRPC library, and instead generates `PackageDefinition` objects that can be passed to the `loadPackageDefinition` function provided by both the `grpc` and `@grpc/grpc-js` libraries.

I tried both flags and found that the `generate_package_definition` worked best in both my servers and clients.

My export directory is the npm package I had created for the cluster that needed the proto file. I am now able to use the package - and therefore the files - in both my servers and clients.

I am very pleased with the results.  The script files does need to be manually run with any proto file changes, but I can automate that at a future date.
Authorize.net - Validate Webhook Signature
Tags: authorize, php, backend
Published: 2020-11-01 12:28:01

Couldn't find any complete examples on how to do this, so here is one:

```php
define('AUTHORIZE_SIGNATURE_KEY', 'abc123');

$body = file_get_contents('php://input');

$headers = getallheaders();

$header = $headers['X-ANET-Signature'];

parse_str($header, $output);

// need to match case since PHP will generate the hash as lowercase
$signature = strtolower($output['sha512']);

$hash = hash_hmac('sha512', $body, AUTHORIZE_SIGNATURE_KEY);

if($hash === $signature) {
    echo "signature matches";
}

```
#codevember - 1 - Bouncing particles - Made with tsParticles
Tags: codepen, showdev, javascript, html
Published: 2020-11-01 12:04:00

# Bouncing particles for Codevember

**Made with [tsParticles](https://github.com/matteobruni/tsparticles)**

{% codepen https://codepen.io/matteobruni/pen/GRqdjmb %}

Checkout more samples on CodePen [here](https://codepen.io/collection/DPOage)
SilvenLEAF
Tags: silvenleaf, typescript, javascript, node
Published: 2020-11-01 11:52:26

Hi there! I'm SilvenLEAF, an insane Dev, basically BackEND with an INSANE CRAZE for TypeScript and JavaScript, Node heavy, with a little bit of python.

# Tech Stack:
**FrontEND:** JavaScript | TypeScript | React | Redux | Context API (React) | HTML5 | CSS3 | SASS

**BackEND:** JavaScript | TypeScript | NodeJs | ExpressJs | HapiJs | Restify | MongoDB | PostgreSQL | SQL | PassportJs | oauth2.0

**Database:** MongoDB | PostgreSQL

**ChatBOT:** Bot framework (SDK) | LUIS | QnA Maker | TypeScript

**App Development:** React Native (with Expo) | Redux | TypeScript 

**Others:** Git | Heroku | Chrome Dev Tools | Third Party APIs
My Journey to the World of Open Source
Tags: hacktoberfest
Published: 2020-11-01 11:42:19

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### Intro Heading
Hello world, i am A.Samad an aspiring Software engineer from MUET ✨
### Background

Being a newbie to the world of Open Source Development #HacktoberFest2020 made the first experience a lot better.

### Reflections

Hacktoberfest enabled me to start my open source journey and i feel so excited by just thinking of the contributions i can make, helping my fellow developers, making this place more sustainable to live in. As i know code bugs are too frustrating, specially when you can't find them out and having the coding community your back is so relieving.
Thanks  DigitalOcean, GitHub
useDispatch deos not re-render my component
Tags: redux, react, typescript
Published: 2020-11-01 11:33:09

I was using redux with data strecture looks like this
```
mydata = {id:'1', name:'the name ishere", children:[{id:'0',name:'name",children:[...]}]}
``` 
later I convert my data structure to look like this
```
mydata = [{id:string, name:string, children:[]} ,{...}]
```
and of course, I change my code to suits this new structure, but I face tow problems after that
1. the first problem is the component doesn't re-render after I use dispatch I even used a usestate inside the updating function in `tree.tsx line 17` just to rerender the component
2. the second problem is there is a function called `adding()` that don't work properly any more.
- you can notice that by seeing `reducer.tsx line 88` where i console.log(state) and the logged state actually new state but in line `134` the logged state is not not effected by the `adding function`
- [codesnadbox](https://codesandbox.io/s/trusting-dust-x6qky?file=/src/reduser.tsx)
Getting Data from API: fetch 
Tags: javascript, beginners, html, vscode
Published: 2020-11-01 11:31:01

Here, I'll be going over a simple fetch method to get the data from an API using javascript code.

I'll be using a public api called [TVmaze](https://www.tvmaze.com/api), where you can get info on hundreds of tv shows! I love using this api to practice!

Let's start with fetch method. In your `.js` file, add:
```javascript
const url ='http://api.tvmaze.com/shows/1' 

fetch (url)
   .then(resp => resp.json())
   .then(data => console.log(data)) //api data will be visible in your browser console. 
   .catch(err => console.warn("ERROR", err));
```
You will be able to see the data on your browser console, like this:
![](https://imgur.com/UadWwWT.png)

Now, to display a selected data on the browser, you need to create an `id` or a `class` in your `.html` file.
```javascript
<h1 id="name"></h1>
```
You are now able to grab the `id` and add `textContent` in your `.js` file. In this case, I want the name of the tv show to display on the screen. I have created a function that executes this:
```javascript
function info(data) {
    document.getElementById("name").textContent = data.name;
}
```
Now, you need to call this function after you fetch the data:
```javascript
fetch (url)
   .then(resp => resp.json())
   .then(info)
   .catch(err => console.warn("ERROR", err));
```
Finally, data is displayed on the browser, like this:
![](https://imgur.com/iT8p3oL.png)

And that's it! Thank you for making it till the end :)
My Hacktoberfest Journey :)
Tags: hacktoberfest, beginners, codenewbie
Published: 2020-11-01 11:17:10




I’m a newbie towards programming. I was introduced to this field in September 2019 when I started a CS50 course “Introduction to Computer Science” besides, I also learnt the basics of HTML from w3school.

I came to know about Hacktoberfest in the same year. So jumped into it to participate. Watched tutorials to get guidance on how I could participate. The interface of GitHub was just passing over my head. While trying to understand what Github is I forked one of the repositories by an accident, but could not understand what is it, what I have done… I was confused throughout October, and often visited GitHub's and Hacktoberfest's website and my feelings were like standing in the ground alone staring at the things there and then returning back. And then on 22 October, my classes at university started and I got busy into that… now just having the idea that Hacktoberfest is about contributing to others code, I left it behind.

This year in 2020 I got an email regarding Hacktoberfest as a reminder. I decided to do the best and take part in it. Still, I didn’t know how to use the GitHub. Started my search again after my last exam on 29th of September and luckily found one of [DevTips](https://www.youtube.com/channel/UCyIe-61Y8C4_o-zZCtO4ETQ) video on the [workflow of Git](https://www.youtube.com/watch?v=_ALeswWzpBo&list=PLq-vIE4MSkLCQVZy7D2LhS5_EhluEj8Fl&index=2&ab_channel=DevTips) in which everything was clearly mentioned. This was the turning point. I created my own repository on 3rd of October practised everything I learned e.g how to fork, clone, create the branch and commit it, create a pull request and much more. And here the interesting journey started and I contributed to others repository. It was really fun I enjoyed a lot.
The issues on which I worked were changing the background colour of the website, redesign the footer, add speed testing paragraphs and much more.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h32lr3yoypeg2rz5rbjh.jpg)
Due to Hacktoberfest, my fear to contribute to any open-source projects has vanished.
Here the journey of my first Hacktoberfest ends and I claimed for the T-shirt. But this was just the first step towards contributing to the open-source community and now it will be continued…
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6oys3ekfbf7chgo5fe83.jpg)
PyQt5 Tutorial - Hello World!
Tags: python, gui, tutorial, pyqt5
Published: 2020-11-01 11:05:46

For creating GUI in python we have multiple choices like tkinter ,WXPython, Kivy and PyQt5 , a cross platform very famous library for creating Graphical User Interfaces as well as cross-platform applications, in this tutorial we will use it for creating GUIs.

## Installation:
For Windows :

```
pip install PyQt5
```

For Linux & MacOS:
```
pip3 install PyQt5
```

## Hello World! The traditional beginning:

In this tutorial we will make a simple app showing "Hello World!" after pressing a button, so let's start.


```
# importing the required libraries 
from PyQt5.QtWidgets import * 
import sys 
  
class Window(QMainWindow): 
    def __init__(self): 
        super().__init__() 
  
        # set the title 
        self.setWindowTitle("Hello World!") 
  
        # set the geometry 
        self.setGeometry(0, 0, 300, 300) 
  
        # create label widget 
        # to display content on screen 
        self.label = QLabel("Hello World !!", self) 
  
        # show all the widgets 
        self.show() 
  
# create pyqt5 app 
App = QApplication(sys.argv) 
  
# create the instance of our Window 
window = Window() 
  
# start the app 
sys.exit(App.exec()) 
``` 

### The Result:

![image.png](https://i.ibb.co/gTqrZ5S/FU5sb-Qr-L5.png)


First of all we have created the Window class which inherits **QMainWindow** class. Within this class we can add widgets which will get displayed on main window, in the next step we have used **setWindowTiltle** method to set title for our window, **setGeometry** method to set size and position of the window and , **QLabel** for displaying message in the window and the **show** method for showing all the widgets.

The **QApplication** class manages the GUI application’s control flow and main settings. It specializes in the **QGuiApplication** with some functionality needed for QWidget based applications. It handles widget specific initialization, finalization. For any GUI application using **Qt**, there is precisely one **QApplication** object, no matter whether the application has 0, 1, 2, or more windows at any given time.
One possible fix for your Wifi card
Tags: personaltips
Published: 2020-11-01 10:29:37

<sub><span>Photo by <a href="https://unsplash.com/@mbaumi">Mika Baumeister</a> on <a href="https://unsplash.com/s/photos/screwdriver">Unsplash</a></span></sub>

If your Wifi card is no longer working (no Wifi at all in your Connection panel), you can try the following:

- Go to your Device Manager
![Device Manager](https://dev-to-uploads.s3.amazonaws.com/i/jssbsldwql3m79i0v4mj.png)
- Find your Wifi card 
- Disable it
- Enable it

it should work.

I hope it will help (me, in the future) !
Visualizing your dedication to writing code
Tags: datascience, ux
Published: 2020-11-01 10:12:42

I'm a huge fan of visualizations and how you can get data to tell stories 📖.

Today I stumbled upon my activity diagram in Gitlab. It made me realize in a glimpse how little I knew the time I dedicate writing code 🧑‍🚀.

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

It's always interesting to look back, analyze and visualize data, to get a different angle from something you are involved with.

Gitlab, Github and Gitea offer similar visualizations, and I think Bitbucket provides slightly different graphs.

Do you know of any tool that helps understand your commitment to writing code by visualizing data in an authentic and meaningful manner ?

Share yours !

Happy coding 🚀

--------

<div style="text-align: center">
I'm also on Twitter [@gempain](https://twitter.com/gempain) 👍
</div>
Hacktoberfest 2020 - a retrospective
Tags: hacktoberfest, opensource
Published: 2020-11-01 09:58:00

---
title: Hacktoberfest 2020 - a retrospective
published: true
description: A maintainers look at Hacktoberfest 2020
tags: hacktoberfest, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/nw128yv3ddj36v1f4sg7.png
---

This years [Hacktobfest](https://hacktoberfest.digitalocean.com/) didn't have a great start. There was a lot of understandable [controversy](https://news.ycombinator.com/item?id=24643894) around the fact that some people abused the system by sending spam pull requests in order to get a free shirt. Eventually, this lead to some important [policy changes](https://hacktoberfest.digitalocean.com/hacktoberfest-update), one of which was to make Hacktoberfest opt-in for maintainers.

While I think this is a good result overall, I also felt kind of sad because it put the whole event in such a bad light. Personally, I had great experiences with Hacktoberfest in the past years - both as a contributor as well as a maintainer. Which is why I decided to actively enable "Hacktoberfest" contributions on some of [my projects](https://github.com/sharkdp/).

For [`bat`](https://github.com/sharkdp/bat) specifically, I opened three tickets that included ideas and instructions for contributing [[1]](https://github.com/sharkdp/bat/issues/1211) [[2]](https://github.com/sharkdp/bat/issues/1213) [[3]](https://github.com/sharkdp/bat/issues/1216). They were mainly targeted towards first-time contributors. In the following chart, you can see what kind of effect the opt-in strategy had on the number of contributions to the `bat` repository:

![number of pull requests per month](https://dev-to-uploads.s3.amazonaws.com/i/27lnwjh1kdtda32mvni1.png)

Now I should note that the large majority of these are small contributions. New test cases or documentation updates. But that does not mean that they are not helpful for the project - quite the contrary. And more importantly, I don't think that's even the point of Hacktoberfest.

The really great thing is that it motivates people to get started with open source work (or to rekindle their engagement). For `bat`, we received a lot of contributions from newcomers. It is fantastic to see the excitement when their PR is being merged. Most of them are also really grateful for review comments and very happy to push further updates.

We did not receive a single spam contribution. Sure, there is always a small fraction of PRs that are going to be rejected (3 out of 129 for `bat`). But that is not specific to Hacktoberfest. As a maintainer, the amount of work you put into an average first-time contribution is definitely a bit higher than usual. But we have all started as a beginner once. Personally, I can definitely still remember my first contributions to the open source world and the kind of excitement I felt.

To summarize: I still think that Hacktoberfest is a great initiative and I am definitely looking forward to future events.

Thank you to all contributors and to my co-maintainers [eth-p](https://github.com/eth-p) and [keith-hall](https://github.com/keith-hall)!
Should I use Linux?
Tags: linux, macos, os, discuss
Published: 2020-11-01 09:36:01

Cover Image Credits:
<a href="https://onehack.us/t/which-os-you-use-windows-linux-macos-post-here-discussion/65891">https://onehack.us/t/which-os-you-use-windows-linux-macos-post-here-discussion/65891</a>

Hello Dev Community!

I am currently using macOS as my operating system. I have been told that Linux is better than macOS and Windows for programming. If you use Linux, I would like to know the pros of Linux and the limitations it has. Also, if you would recommend using Linux, should I dual boot or use something like VirtualBox?

Thanks for your help.
Host a web application with Azure App service in a minute.
Published: 2020-11-01 08:04:47

Azure app service provided you to Build and deploy your web application in your languages (PHP, Django,ASP.Net. Core, java, Python, and many more) Without creating an infrastructure.

Suppose you are building a website or want to host a website in-app service but your are running an old version of web app services. You are planning to create a new webserver but It can be a new challenging task for you.

So, You are just thinking to host a web application using your azure app services for creating and hosting a web application in Microsoft Azure.
In this article we will going to learn:
1) Create a Web Application in Microsoft Azure.
2) Deploy a Web Site in Microsoft Azure
3) Manage a Web App in Microsoft Azure.


Creating a Web application in Microsoft Azure
1) Open https://portal.azure.com/ and login with your azure account
2) Once you enter in your Azure portal, click on the Create a Resouce.
3) Type Web App in the Search box then press the enter key and Click on the create button.


4) Fill the following details in the Web app Wizards:
A) Subscription: Select a valid and active subscription id.
B) Resource group: Enter a valid resource group or create a new resource group.
C) App name: Enter your Unique Application Name and this name is also used in your URL.
D) Publish: Choose a Code or Docker Container.
E) Runtime Stack: Select your application Language.
F) Operating System: Choose OS between Linux and Windows
G) Region: The region in which your application will be served.
H) App Service Plan: Choose your app plan service (If you have just planning to test your application or you have a small application always choose a Free Plan service.)
I) Once you have done feel free and Click on the Review+Create.

It will take a couple of minutes to host a web application. When your application is ready Just click on the URL, A new web app page appears. Leave this page and come back to the panel. Just click on the link and open your WebApp.

Deploy Your Code to App Service:
We have two option to deploy a code to app service
1) Automated deployment
2) Manual deployment
Push Your Code to App Service By using an FTP
1) First we need to configure FTP Details. Open WebApp Dashboard>Deployment Credentials> Change your login credentials and save.
2) Open your FileZilla App and Enter your Login Credentials (URL, Hostname, and Password).
3) Once You have connected with your web app service. Go to wwwroot>Site>______ delete default page and publish your folder.
4)when you did, Enter Your link in a new browser and you and check your site.
The choice of a new dev language, my subconscious has spoken!
Tags: javascript, python, php, ruby
Published: 2020-11-01 07:49:53

---
title: The choice of a new dev language, my subconscious has spoken!
published: true
description: Python, Javascript, Ruby or PHP
tags: javascript, python, php, ruby
//cover_image: https://direct_url_to_image.jpg
---

Ever since I learned C# I was looking to add a new language to my skills. I was hesitating between PHP, Python, Ruby, and Javascript. So I started to learn the basics of each  of these languages and made practical projects to learn/integrate them.

A few months later, I realized that I had learned the basics of all these languages ​​but I still didn't know which one I was to choose for my next project.

Yes I learn 4 new languages in 6 months :) More on that later...

But which one to choose for my next project? The true is any of them will be ok. They are all very mature dev languages.

Ok any of them will work but I was still struggling with my choices... 

Until one evening, I had an idea for a great mini project related to my current business. I wanted to do something good and fast.

Without thinking I jumped on my laptop and started typing some code and within hours I had a draft that I was eager to show my associates the next day.

A few days later I re-thought about my choice of language for my next project and I said to myself let your instinct choose.

I said to myself the other day,  when you were in a hurry, and you were under pressure, what language did you choose for your draft project?

Without realizing it, I chose Python. I don't know why, I could have done it in any languages but my subconscious chose it.

I guess naturally I have a certain ease/fit with python.

So I stopped pestering myself with this question and decided to trust my instincts. :-) He can't lie to me! Can he?

By the way, along the way, as I learned these new languages ​​I realized how easy it is to learn a new language when you already know one.

The first was Visual Basic and at the time it took me a few years to learn how to program and understand how to use this language.

The second was C# which I learned the basics in three months. For Ruby, Python and PHP it took me even less time.

It's crazy how it’s easy to learn those languages. In fact a lot more than I thought. They have their own particularity, but in general it is the same functioning and internal logic.

I think in a way it's reassuring because in our field it changes very quickly and it has always scared me, I thought that I would be quickly overwhelmed by events ...
How to get started with Linux 
Tags: linux
Published: 2020-11-01 07:41:51

Good morning!
In my video tutorial I explain:
🐧 Which distributions I recommend for beginners 
🐧 How to install Linux in a virtualbox 
🐧 How to create a bootable USB-Stick with Linux

{% youtube gxrSIudUTv0 %}

Let me know if you have any questions!😊