teleren/devto huggingface dataset:
Using My npm Packages in a Node.js gRPC Server
Tags: node, npm, grpc, protobuf
Published: 2020-11-01 14:25:49

Having created a local npm package for the protobuf files in my cluster, I can now install that package and use it in a gRPC server.

I install the package:
```
npm install --save <path to package>
```
And use it like I would any other installed npm package:
```javascript
const { exportName } = require('<package name>');
```
For the gRPC server, I will use the Services export, since it the file that has the definitions for the operations that were defined.

So, my server ends up looking like this:
```javascript
const grpc = require('@grpc/grpc-js');
const <service_name>Services = require('<package_name>');
const protoDescription = grpc.loadPackageDefinition(<service name>Services);

// operation declarations as logic

async function main() {
  const server = new grpc.Server();
  server.addService(protoDescription.<name_of_service>.service, {
    // operations
  });

  server.bindAsync(
    `0.0.0.0:${config.port}`,
    grpc.ServerCredentials.createInsecure(),
    err => {
      if(err) {
        console.error('err: ', err);
      }
      server.start();
      console.log('Server Started');
    }
  );
}

main();
```
There is one major difference between using my generated file and directly using a proto file:
- When directly using a proto file, you need to import the proto file, create a `packageDefinition` using `@grpc/proto-loader`, and feed that to `grpc.loadPackageDefinition()`.

So the server file would look like this:
```javascript
const grpc = require('@grpc/grpc-js');
const protoLoader = require('@grpc/proto-loader');
const PROTO_PATH = '<path_to_proto_file';
const packageDefinition = protoLoader.loadSync(PROTO_PATH);
const protoDescription = grpc.loadPackageDefinition(packageDefinition);

// operation declarations as logic

async function main() {
  const server = new grpc.Server();
  server.addService(protoDescription.<name_of_service>.service, {
    // operations
  });

  server.bindAsync(
    `0.0.0.0:${config.port}`,
    grpc.ServerCredentials.createInsecure(),
    err => {
      if(err) {
        console.error('err: ', err);
      }
      server.start();
      console.log('Server Started');
    }
  );
}

main();
```
The generated files skip this step, because I used the `--grpc_out:generate_package_definition` flag for the `grpc-tools`.
(Delayed Post) 2nd PR & New stuff. Hacktober fun, Doctors not fun.
Tags: opensource
Published: 2020-11-01 14:22:13

Hello there yall! This is the 2nd week of my Hacktober. The last week was super fun and informative. Learned lots through research, in fact, learned many things that I thought did not exist. This week's PR was fun as I was issued a task for improving n UI for a web application.

I was always into frontend more than backed, well kinda. When I saw that issue request in Github, I got hyped up. It is because I never worked with UI PR before. SO, yea I changed up the background aesthetic, fix margins, paddings, border issues, etc. Then I submitted it for review, and it got accepted. 

Well, that's pretty much it for the 2nd PR for the month. BTW, study weeks are going to be super fun as most of my tests and assignments are going to be done before the study week starts. So, I will have some free time to breathe.
By the way, I had a doctors appointment(8th this/past month) this Friday (Follow up for my ultrasound), I am very happy with the ultrasound results as my doctor said I was okay, just a little bit of exercise every day will make my health go fit. I am ready for all the things that I missed due to my health implications and I will keep moving forward. I'll be taking a break from everything related to the internet for about a week and come back strong. So thank you, everyone!

LINK 

[2ND PR](https://github.com/shkaushal/Manage-Expenses/pull/3)

[2ND Issue](https://github.com/shkaushal/Manage-Expenses/issues/1)
My First I/O
Tags: node, beginners
Published: 2020-11-01 13:54:28

# `learnyounode`

From your terminal: `learnyounode` to open up that menu again, and this time, select the 3rd challenge.

# Overview

As per the directions, we are working with I/O - input/output. 

Here, that means using the `fs` module to read some file contents and count the number of lines.

The `fs` module leverages our Operating System (OS) to, among other things, read/write file contents.

The directions also mention that we will read the file _synchronously._ This means that we will 'block' the execution of our program from going any further until all of the file contents are read.

Once again, we will receive the name of the file from the _command line_ as part of `process.argv`.

Start by creating a new file for this program. From the command line: `touch my-first-io.js`.

# `require("fs")`

We'll _destructure_ `readFilesSync` from the `"fs"` _module: `const { readFileSync } = require("fs");`


# Get Info from the CLI

Once again, we are _destructuring_ and 'throwing away_ the first 2 arguments from the _command line._ The one that we are interested in is the name of the file that we need to read, provided by, `process.argv[2]`, as mentioned in the directions.

# Reading and Splitting the File

Now, you can try: `console.info(readFileSync(file))`.

Run it with `learnyounode run my-first-io.js` from the command line. This will show us the output of the file provided by `learnyounode`.

You will see something like: `<Buffer`. It's pretty useless for this case - it's a 'raw data' buffer 👎🏽.

Let's 'decode' it by letting Node know that we want to read this as `'utf-8'`. This is a standard for universally converting raw data streams into 'human-readable' characters. 

For an interesting bit of trivia, you can watch this:

{% youtube MijmeoH9LT4 %}

Now, try: `console.info(readFileSync(file, "utf-8"));` That's a bit better! 🤓 We see some readable words.

Next, we need to split this up into individual lines: `console.info(readFileSync(file, "utf-8").split("\n"));` That ``"\n"` tells JS that we want to look for anywhere there is a ''new line' in the text.

If you inspect the output closely, you'll see a `]` at the end. There are also `,`s between each 'sentence.' 

That's because `split` has converted this _string_ into an _array,_ where each _element_ inside of the _array_ is a separate 'new line.'

# Wrapping Up

Our task was to count the number of new lines...we have an _array_ where each element is a new line...

`console.info(readFileSync(file, "utf8").split("\n").length - 1);`

`learnyounode verify my-first-io.js` should get it done! 🤓
What is CSS? What does it stand for? How to use?

Published: 2020-11-01 13:47:20

CSS stands for "Cascading Style Sheets", which means "Cascading Style Layers". "What is CSS?" The answer to the question can be expressed as a definition language that allows web sites to be visually shaped and has its own rules. CSS, which is among the most basic web technologies along with HTML and JavaScript, offers a lot of visual control on web pages.
read continue : https://sirnode.com/what-is-css
Make an Instagram Spam Bot
Tags: python, automation
Published: 2020-11-01 13:40:53

In this video I will walk you through step by step on how to create a Instagram spam bot using python
First you will need to install two most important libraries 

* pyautogui
* time
you will use this two to write the code and make it run

for more details watch the video 👇👇👇

Video: {% youtube zn4K0t_y7Po %}
Changing Headers in React with react-helmet.
Tags: react, beginners, tutorial, webdev
Published: 2020-11-01 13:39:25


Stuck while changing your react app's header? This tutorial is going to help you solve that issue.

We are going to use <bold> Helmet</bold>  which is a npm package used to include 'head' tags in react.js websites.

In terminal use the following code, to install react-helmet package.

<code>npm install react-helmet</code>

After installing react-helmet, In App.js we are gonna include, the following code,

```js

import React from 'react' 

import {Helmet} from 'react-helmet'

const App = ()=>{

return(
<div>

<Helmet>

<title>Your own title</title>
<meta name="description" content="Your description" />

</Helmet>

</div>


)

} 
export default App;
```

In 'Helmet' tag we can have,

- meta tag.
- title tag. 
- link tag.
- script tag.
- noscript tag.



Thats it, we have changed the header of the page and its meta description with Helmet.

So, react-helmet gives us a easy way to change our meta data content and title for each and every page in react which is good for SEO purposes.

> This is really great for <bold><u>SEO<u></bold>



If we just keep our header same in all our pages, google is not going to take it well and may penalize us when its bot is crawling our website for content.

> A Crawling bot is a software which crawls our website for data. It crawls our website's body tag, meta tag and all others which would be useful for search engine purposes.


Remember we can also dynamically render Helmet head data with either

- Axios (render from backend).
- Redux.
- Context API.
- Pass it as props from parent to children.

You can use any of the above mentioned methods.

#### Thank you for reading!


>  If you like this article, Heart/Like this one and save it to 
   read later. 

###<u>My other React articles:</u> 


- <a href="https://dev.to/gautham495/creating-a-new-react-app-with-create-react-app-4e9m" target="_blank">Create-React-App</a>
Cyclic Programming Challenges
Tags: python, react, javascript
Published: 2020-11-01 13:38:31

The 30 Days of Python, 30 Days of JavaScript, and 30 Days of React have helped hundreds of thousands of developers to improve their problem-solving skills and programming skill. If you want master JavaScript, Python, or React you may try these challenges in November. A monthly challenge that changes lots of people to an advanced developer.


💻 30 Days Of React: https://lnkd.in/d8VAS2J
👥 Join telegram group: https://lnkd.in/dNbxT8M

💻 30 Days Of JavaScript Github: https://lnkd.in/efqy_df
👥 Join the 30 Days Of JavaScript group: https://lnkd.in/er7kdTE

💻 30 Days Of Python Github: https://lnkd.in/epW6d_U
👥 Join the 30 Days Of Python group: https://lnkd.in/eE5Qgqd
The self-hosted CI, my experience
Tags: selfhosted, droneci, docker
Published: 2020-11-01 13:33:28

A quick feedback about how my CI/CD runs every day in my living room using Drone CI and Docker. 🛋

# But why?!

As a web developer, like many other, I use Continuous Deployment and Integration quite often, for my work in a company, as an independent, even for personal projects. You may know, it may take some time, first when setting it up, then to run it. And when it's fast, it means that you're with a powerful and often expensive solution.

So, as I don't like when things get out of control, I wanted to try something new: run my CI on my personal hardware. What a luck, I just bought a brand new Dell R240 server to make this kind of experience.

# The setup 🔧

The best way I found to make my server easy to maintain was using docker, and maybe quite a big docker-compose file, so I can store and version every new service I run.

I've got some hardware to host my CI system, but what about the software. After some research, I found the very good [Drone CI](https://drone.io/) open source software.

![Drone CI homepage](https://dev-to-uploads.s3.amazonaws.com/i/gcdok84e2evj8khf85ji.png)

Documentation made things really easy to install the two services needed to run a CI: the web service, with a great UI to access logs for example, and a runner, which actually executes the steps you configured. Around 20 lines in docker-compose file !

# But, does it really works? 🤔

Yes! 🥳 When arriving on the web UI, you have to connect your Github account, your projects should be listed, and in a few clicks, you've got you repo setup ! Now the last step is to configure your CI for the current project. It's done with a yaml file, and if you're familiar with CircleCI for example, it's pretty much the same.

# Docker in Docker, headache guaranteed! 🤯

I had some memories of running Docker in Docker, or dind, in the past. But in this case, I finally took the Docker socket forwarding solution. This means that every time I have some docker tasks in my CI steps, I give access to the host docker socket, to permit its usage inside the CI itself. You can do it with this code inside your docker-compose file:
```yaml
volumes:
      - /var/run/docker.sock:/var/run/docker.sock
```
So for example if you want to build a Docker image, you will pass this volume to the step, so that the Docker main deamon can be used to run the command. You can also use it to deploy the project on the server itself. I use this in deploy steps, as most of my projects are hosted at home! 🏠

# And today? ☀️

I use this solution for almost every new project I start! 

Don't hesitate to give it a try, on your dev machine for example. 🙂
CSS Table data ( <td>)
Tags: css, beginners, webdev
Published: 2020-11-01 13:29:29

So I am playing around creating country flags with CSS.

1. It seems using the divs in HTML works better. All I got to do divide the divs into their respective rows and or columns and fill them up with the colors 

2. I tried using <table> for these too but I noticed that you can leave a table field blank. I guess this is not the best method for this then, but my question is, is there a way to leave a table field blank ?

Also, how do I place icons/images in the flag. Like placing the black star of the Ghana flag in the middle of the yellow ?
Using SQL bindings in Laravel Raw Methods
Tags: sql, laravel
Published: 2020-11-01 13:23:21

Raw methods are sometimes required when there is not an eloquent relationship available.

<b>? Binding</b>

Used a lot in the Laravel Raw methods e.g.

User::whereRaw('name = ?', ['Stuart'] )->get()

Here the ? the SQL query gets replace with the String 'Stuart'


<b>Named bindings</b>

User::whereRaw('name = :name', [':name' => 'Stuart'] )->get()

Here the :name the SQL query gets replaced with the String 'Stuart'. Any name can be used
text-transform - property - CSS3
Tags: css, performance
Published: 2020-11-01 13:09:50


## Introduction

Today I return to share with you a **CSS3** property that until recently was unknown to me. This property will allow us to ``capitalize``, ``upper case`` and ``lower case`` any text using **CSS** in this way we will avoid using **Javascript** for it by introducing a **small optimization** in our application.

## Examples

### ``capitalize``

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

```html
<p class="example-text-transform">
hello this is a sample text to be able to demonstrate the use of the CSS3 text-transform property 
<p>
```

```css
.example-text-transform {
  text-transform: capitalize;
}
```

### ``uppercase``

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

```html
<p class="example-text-transform">
hello this is a sample text to be able to demonstrate the use of the CSS3 text-transform property 
<p>
```

```css
.example-text-transform {
  text-transform: uppercase;
}
```


### ``lowercase``

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

```html
<p class="example-text-transform">
HELLO this is a sample text to be able to demonstrate the use of the CSS3 text-transform property 
<p>
```

```css
.example-text-transform {
  text-transform: lowercase;
}
```

## Property Values

| Value | Description |
|---|---|
| none | No capitalization. The text renders as it is. This is default |
| capitalize | Transforms the first character of each word to uppercase |
| uppercase | Transforms all characters to uppercase |
| lowercase | Transforms all characters to lowercase |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. |

Original source -> [here](https://www.w3schools.com/cssref/pr_text_text-transform.asp)


___

Thanks for reading me. 😊

![thanks](https://media.giphy.com/media/uj8YbXjNuwZ7iFRD4n/giphy.gif)

___

#### Credits to the author of the icons for the banner.

Icons made by <a href="https://www.flaticon.com/authors/vaadin" title="Vaadin">Vaadin</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
Daily Developer Jokes - Sunday, Nov 1, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-11-01 13:00:18

---
title: "Daily Developer Jokes - Sunday, Nov 1, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Nov%201%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12598ab1885.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How do you stop a web developer stealing your stuff?

___A:___ Write 403 on it.
 -->
Creating a Local npm Package for Protobuf Files
Tags: node, grpc, npm, protobuf
Published: 2020-11-01 12:59:36

Making a local npm package is relatively easy - you create a new Node.js project.
```
npm init
```
In my case, the sole purpose of this package is to deliver generated protobuf files to various gRPC servers and clients.

I made my entry point `main.js` and used it to export references to the protobuf files.  Since `protoc` creates two files - one for the messages and one for the services - I created a created a variable for each with the naming pattern of `<service>Messages` and `<service>Services`.
```javascript
const <service>Messages = require(`<name of service>_pb.js`);
const <service>Services = require(`<name of service>_grpc_pb.js);

module.exports = {
  <service>Messages,
  <service>Services
};
```
This pattern makes it very easy to import the code I need into my servers and clients.  Also, any of my co-workers needing to consume the packages will not need to guess as to what the name of the exports are.

I can now install these packages as part of the service, and they will update themselves as the package updates.
```
npm install --save <path to module>
```
And the `package.json` will have:
```
"<name of package>": "file:<path to package>"
```
The AWS Well-Architected Framework and it's 5 Pillars - Part 2
Tags: aws, architecture
Published: 2020-11-01 12:55:12

For the continuation of the **The AWS Well-Architected Framework and it's 5 Pillars Series**.

For the others who haven't yet read the initial part of this series, please read the previous parts above or below this article.

Let's continue on diving deep and this time let's venture the Cost Optimization realm to gain knowledge on what are the key areas, what questions you must conquer and what are the key phases involve in this pillar for us to satisfy it's standards.

## **Cost Optimization**
*... is a continual process of refinement and improvement of a system over its entire life cycle.*

In other words, *Maximizing Value - Deliver business value for the lowest price point*

To satisfy this pillar, your architecture needs to **spend only what you have to** leveraging these key areas:
- Consumption-based pricing
- Measure efficiency constantly
- Let AWS do the work whenever possible

### Phases
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7m5yuza7v8jb05bfz7hc.PNG)

#### **Cost Effective Resources**
Use the appropriate resources and configurations:
- Provision to current needs with an eye to future
- *"Right size"* to lowest resource that meets needs
- Use data to choose purchase options
- Optimize by geography
- Default to managed services
- Optimize data transfer

#### **Matching Supply and Demand**
Know how much you're spending and where:
- Understand your stakeholders
- Implement an governance model
- Attribute costs to teams/projects
- Tag AWS resources
- Track the life cycle of resources

#### **Optimize**
Continuously work to maximize value delivered:
- Align utilization with requirements
- Report and validate findings
- Evaluate new services for value
- Continue push to managed services

The key takeaways in this pillar is *you need to have an ongoing effort to maximize value - awareness of spend is a critical factor in maximizing value.* 

__Follow or Connect with me__:

[Dev.to](https://dev.to/edwardmercado)
[Twitter](https://twitter.com/edwardmercado_)
[LinkedIn](https://www.linkedin.com/in/edwardallenmercado-677b69139)
The GitHub CLI
Tags: github, git
Published: 2020-11-01 12:16:52

# Pilot ✈️

[GitHub CLI](https://cli.github.com/) beta version was released a while ago, and it comes with really cool features. I have been using and interacting with GitHub without necessarily visiting the website, that's fun right.

An alternative to using GitHub CLI is [HUB](https://hub.github.com/), which was there before GitHub cli was introduced.

GitHub CLI is an open-source project, here on [GitHub](https://github.com/cli/cli/).

I had an article before on using [GitHub CLI and its commands](https://dev.to/chrisachinga/using-github-s-cli-on-ubuntu-commands-3a89), so this is kind of like an update because the cli is up on version 1.x.x right now, better to stay on the know/updated. To get the latest releases of the cli <https://github.com/cli/cli/releases>

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

Everything you need to know about the cli is on their site, <https://cli.github.com/>

# Installation

[GitHub CLI](https://cli.github.com/) has to be installed on your device for you to use it.

View installation procedures based on your operating system:

[Installing GitHub CLI](https://github.com/cli/cli#installation)

# Usage

With the cli, you can create repositories, pull requests, issues, clone repos, and much more.

 If I were to write on every usage gh cli has to offer, this would have been one of the longest and probably most boring technical articles, so I'll break them down and make a mini-article-series if that makes sense.

# `gh repo clone`

This is one of the commands GitHub cli comes with. The gh clone works in a similar way as the popular git command, git clone.

Note that git and GitHub cli are two different things, but the gh clone and git clone perform a similar function altogether and have a similar syntax.

to use the command, browse into your favorite GitHub project, and clone it using GitHub cli, easy and fun.

For me, I'll go to one of my repos, https://github.com/ChrisAchinga/javascript.
Click on the green button code, a dropdown appears, click on the Github CLI tab and copy the command;
`gh repo clone ChrisAchinga/javascript`

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

Simple as that and you are done.

A simple start to becoming a GitHub cli master!