teleren/devto huggingface dataset:
Adding text or image watermark programmatically
Tags: dotnet, watermark, csharp, productivity
Published: 2020-10-25 15:45:57

Have a look at [these](https://docs.groupdocs.com/watermark/net/supported-document-formats/) supported file formats. Yes, you can add watermark (image or text) to all of them programmatically. 
Have a look at the following code, it adds a text watermark with a specific font-family and size.

```csharp
using (Watermarker watermarker = new Watermarker("sample.pdf"))
{
    TextWatermark watermark = new TextWatermark("top secret", new Font("Arial", 36));
    watermark.ForegroundColor = Color.Red;
    watermark.HorizontalAlignment = HorizontalAlignment.Center;
    watermark.VerticalAlignment = VerticalAlignment.Center;
    watermarker.Add(watermark);
    watermarker.Save(Constants.OutDocumentPdf);
}
```
For further details, please visit this documentation [article](https://docs.groupdocs.com/watermark/net/add-text-or-image-watermark/) and in case of any issue, you can post it [here](http://forum.groupdocs.com/).
How to install the latest stable Nginx version on CentOS 8
Tags: linux, devops
Published: 2020-10-25 15:44:05

This video shows you how to install the latest Nginx available on CentOS!

{% youtube jdb1xNFno-0 %}

Useful links:

- [Affiliate link for $100 free credit for DigitalOcean so you could spin up your own servers](https://m.do.co/c/2a9bba940f39)

- [To copy the content of the Nginx repo make sure to visit this link here](https://www.digitalocean.com/community/questions/how-to-install-the-latest-stable-nginx-version-on-centos-8#)

- [For more information on how to get started with Nginx, make sure to check the steps from the following tutorial](https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-centos-8)
My hacktoberfest 2020 experience
Tags: hacktoberfest
Published: 2020-10-25 15:34:16

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


### [Intro Heading]
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
Hey! My self Amit Sagar. Currently, I'm a Student. I'm pursuing electronics and communication engineering from Uttrakhand Technical University. I'm in a way to be a MERN full stack developer. 
### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →
I'm new to opensource. This is my first hacktoberfest and through this fest, I learn how to contribute at opensource code. When I'm Scrolling the Linkedin, so there was post about hacktoberfest 2020.And I go through the post and check the details about fest and register for fest.   

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->
When, I was register for the hacktoberfest 2020, I was totally new to the open source coding. Through this fest I have learned about how to contribute at opensource coding. And, I have learned about git and github.  This fest really helps me to boost up my career.

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->
I'm beginner to the opensource coding. So, In this fest, I choose the beginner projects. But now, I'm ready to work on intermediate projects.  


### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
This is an amazing fest. In which large number of developers are participating. I have learned lots of things through this fest. This is my Hacktober and I really enjoyed it. Definitely, I will participate in the Hacktoberfest 2021 and so on. Now , I'm ready to contribute in the opensource.
An iOS 14 widget for TravisCI
Tags: showdev, javascript, ios
Published: 2020-10-25 15:22:03

I recently learned that it's possible to build iOS 14 widgets with [Scriptable](https://scriptable.app/), a really useful app to automate things on iOS with JavaScript.

To give it a hands-on, I've built a [Travis CI](https://travis-ci.com)
 widget which displays build states for a repository.

It supports all sizes of widgets and is available at https://github.com/s1h-org/scriptable-travis-widget
MY HACKTOBERFEST 2020 EXPERIENCE
Tags: hacktoberfest
Published: 2020-10-25 15:03:50

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


### About Myself
I am an open-source enthusiast and passionate about Web Development. Currently I'm a third year undergrad and actively looking for the internships.😁

### Background

I started Open Source contribution with exploration and curiosity and with a lot of excitement from my second year and now I enjoy doing it. 

### Progress

I have completed 4 PR and few are on the way 😊.

### Contributions

I made contributions mainly to the repositories where the contribution had to be made on the questions that exists in the competitive programming platforms as well as data structures problem. For more information you can visit my github repositories (https://github.com/neha07kumari).


### Reflections
I had participated in Hacktoberfest 2019 also and this is the second time I had participated in Open-source event. It's was a great learning experience. I would like to thanks #hacktoberfest and DigitalOcean for providing an opportunity to contribute back to the community.
How to Install Golang on CentOS 8
Tags: go, centos
Published: 2020-10-25 14:39:29

In this article, we will show you how to install Golang on CentOS 8.

Go is an open source programming language that makes it easy to build simple, reliable, and efficient software. It is a statically-typed, compiled, C-like programming language developed by Google.

Go's simplicity and versatility has made it to be the preferred language for developing high-performance web applications and microservices.

**Prerequisites:**
<a href="https://www.hostnextra.com/10gbps-dedicated-servers.html" target="_blank">CentOS 8 Dedicated servers</a> or <a href="https://www.hostnextra.com/vps-hosting.html" target="_target"> KVM VPS</a>

A root user access or normal user with administrator privileges.<br>
**Step 1. Keep you server up to date**
<br>
>yum update -y

<br>**Step 2. Download and extract Go 1.15.3**
We will download Go using wget command and extract it in /usr/local path.
<br>
> wget https://golang.org/dl/go1.15.3.linux-amd64.tar.gz

> tar -zxvf go1.15.3.linux-amd64.tar.gz -C /usr/local

<br>At the time of writing this guide, the latest available version was 1.15. You can check the latest Go version from the Go official download page.

<br>**Step 3. Setup Environment variables**

The Go's runtime and build executables are now available under /usr/local/go/bin. Add the executable path to PATH environment variable. Add the GOROOT environment variable referencing your local Go installation. Use thesource command to reload the updated values.
<br>
> echo 'export GOROOT=/usr/local/go' | sudo tee -a /etc/profile

>echo 'export PATH=$PATH:/usr/local/go/bin' | sudo tee -a /etc/profile

>source /etc/profile

<br>**Step 4. Verify the installation**
To verify the installation, we can check the version of the Go by using following command:
<br>
>go version

<br>Output will show similar like:

>go version go1.15.3 linux/amd64

<br>**Step 5. Write a Hello World application**

We can write our first Hello World! program using following steps:
<br>
1. Create a folder and navigate into it.

>mkdir hello

>cd hello

2. Create a Go module using the go mod command.

>go mod init hello

3. Create a file named hello.go

>touch hello.go

4. Edit the file hello.go

>vi hello.go

5. Add following lines

package main

import "fmt"

func main() {
fmt.Printf("Hello World!")
}
<br>Execute our first Go program using following command:

>go run hello.go

Output:

>Hello World!

We have successfully installed Golang on CentOS 8.

In this article, we have explained how to install Golang on CentOS 8
How to Organize Your React/Redux Projects 
Tags: react, redux, javascript
Published: 2020-10-25 14:38:31

# Introduction
React is one of the most unopinionated frontend frameworks in existence. From the selection of states, and routing to managing your code structure, React doesn't provide any guidance on how to structure your project - and that can be really confusing for developers.

Here is the best way you can structure you _react/redux_ app

```

└──src/
	 │
	 ├──actions
	 │       ├── Post.action.js
	 │       └── User.action.js
	 ├── components
	 │       ├── Header.js
	 │       ├── Footer.js
	 │       └── Error.js
	 ├── containers
	 │       ├── PostContainer.js
	 │	 ├── LoginContainer.js
	 │       └── RegisterContainer.java
	 ├── constants
	 │       ├── User.constant.js
	 │       └── Post.constant.js
	 ├── images
	 │       ├── user.jpg
	 │       └── post.png
	 ├── reducers
	 │       ├── Post.reducer.js
	 │       └── Pser.reducer.js
	 ├── style
	 │       └── Main.css	 
	 ├── util
	 │       ├── Store.js
	 │	 └── authUtils.js
	 ├── views
	 │       ├── Home.js
	 │	  ├── Register.js
	 │       └── Login.js
	 │
	 ├── index.js
	 └── root.js
```
Directory functions, in brief, include the following:

* **components** - Contains all 'dumb' or shared components, consisting only of JSX and styling.
* **containers** - Contains all corresponding components with logic in them. Each container will have one or more components depending on the view represented by the container. For example, PostContainer.js would have a Header.js as well as Footer.js.
* **images** - Contain all Images that will be imported inside a component
* **actions** - All Redux actions
* **reducers** - All Redux reducers
* **style** - This is where you include all of your main stylings 
* **utils** - Other logical codes that are not React specific. For example, authUtils.js would have functions to process the JWT token from the API to determine the user scopes and store.js which simply is the Redux store.
* **view** - keeps app pages or screens  (route endpoints)
* **routes.js** - aggregates all routes together for easy access.


**Note:** Defining all routes in a single file has been deprecated as a practice, according to new React Router docs. It promoted segregating routes into components for better readability. Check [React Router Docs](https://reactrouter.com/web/example/route-config) for a better understanding.
My Hacktoberfest 2020 experience!
Tags: hacktoberfest
Published: 2020-10-25 14:33:42



I was intrigued by the idea of open-source and the ability to play around with the codebase of some popular open source applications that we use almost everyday. 

I knew intermediate level coding in C and CPP till my 1st year in college. As I was about to be promoted to the 3rd semester, I thought of learning something new and that is when Web-Development came into my mind. I started my web-deveopment journey in April,2020 and it has been only an uphill journey from then.

Hacktoberfest 2020 has been one of the most memorable experiences as I was introduced to a whole new world of open source that I didn't know exist. It has been a wonderful journey with hacktober.


I have learnt a lot from #hacktoberfest 2020 and I wish to continue this journey with open source for a long time. I am grateful to @DigitalOcean for providing such a great opportunity to everyone to learn and reflect accordingly.
What are the best podcast hosting sites?
Published: 2020-10-25 14:32:14

Podcasting has exploded in recent years and the most popular ones are raking it in. Joe Rogan recently signed a $100 million dollar deal with Shopify to have it as his exclusive hosting platform. If you want to jump in and try podcasting you need to find the best podcasting hosts to ensure your audio files are safely stored and accurately delivered. I've curated a list of my [favorite podcasting hosting sites] (https://passiveincometree.com/podcast-hosting/) to help you in this.
Manage your calendar with scheduling software
Published: 2020-10-25 14:29:42

If you are a busy professional but don't have a personal assistant to manage your calendar then you can opt to use scheduling software. Good scheduling software allows you to sync multiple calendars, integrate with various video streaming platforms (Google Hangouts, Zoom), and even set recurring appointments. Here is a list of the [top scheduling software] (https://passiveincometree.com/scheduling-software/).
Become a better writer with grammar tools
Published: 2020-10-25 14:23:41

You don't need to have a masters degree in literature to write well, you don't even need English as a first language. I've seen many online bloggers succeed who are not native English speakers. Their secret is using online grammar tools and checkers.  I've created a post here talking about the [best online grammar tools] (https://passiveincometree.com/best-grammar-checker/) currently on the market.
Why am I so bad at using CSS
Tags: css
Published: 2020-10-25 14:21:41

Whenever I see on someones resume mentioning CSS as one of their skills i giggle to myself. They can't be serious? CSS is not a programming language! All you need to do is just google a few stuff and copy paste!.

I guess that's why even after ~5 years of developing websites, I would still rate my CSS as below average(way below to be honest).

Although it's true that CSS is not a programming language, but it's still a language nonetheless. A style sheet language and like any other language, you need to take it seriously in order to be good at it.

So, sorry CSS. I promise to take you more seriously next time.
What are the best video editors on the market?
Tags: videoeditor
Published: 2020-10-25 14:21:31

If you want to launch a career on YouTube, or are interested in creating your own documentary you need video editing software. You will need to look at features such as video rendering times, ease of use, transition quality, range of export formats, audio integration and cross-device compatibility. Here is a [list] (https://passiveincometree.com/best-video-editing-software/) of the best video editors on the market.
Created new Portfolio using React.js! 
Tags: react, webdev, javascript, showdev
Published: 2020-10-25 14:13:10

Checkout my portfolio [here](https://shubhamkr.me)
This is third version of my portfolio earlier I had created using HTML, CSS & JS only, this time I created using React js and also tried to add slight animations to it, for animations I used react-spring library. 
Do give your thoughts how is it,
It's not fully responsive, It should work well on mobile & laptops.
My Hacktoberfest 2020 experience!!!
Tags: hacktoberfest
Published: 2020-10-25 14:09:03


### About myself
I am an open-source enthusiast and passionate about cloud technology. I am working on Cloud-native technologies(K8s, Kafka, Cassandra, MariaDB, ELK stack, Minio etc)
### Background

I started Open Source contribution with exploration and curiosity. But now for me, 2020 is the year of open source contribution. 

### Progress

I have completed 5 PR and few are on the way :)

### Reflections
This is the first time I had participated in Open-source event. It's was a great learning experience. I would like to thanks #hacktoberfest and DigitalOcean for providing an opportunity to contribute back to the community.
API Tests Optimization - Config & Random data
Tags: javascript, api, testing, tutorial
Published: 2020-10-25 13:54:47

In this post, we'll take a look at some other ways to optimize our test. We will create a new config file to store configuration related data as well as use `faker.js` to randomize test data. 

#### Configuration file
Instead of storing URLs and other configuration related within our tests file, we can create a config file and store data there and import it directly in our tests. This will help clean up our tests and make it easier to read. Even something as simple as this works:
```javascript
export default {
  baseUrl: 'https://gorest.co.in/public-api/',
  // ... other config data
};
```

#### Randomizing test data
Instead of hardcoding test data, we can use external libraries such as [`faker.js`](https://www.npmjs.com/package/faker) to help generate random test data for us. To use faker, import the package using `npm install faker` and then start using it -

```javascript
const faker = require('faker')

const data = {
  name: faker.name.findName() // will generate random name
  email: faker.internet.email() // will generate random email
}

```
***

#### Check out this video to see how we can cover the above two items as well as take a look at how we can securely store test tokens using the `.env` file:

{% youtube NXorgale-hE%}

You can also clone the [GitHub repo](https://github.com/automationbro/JavaScript-API-Automation-Tests) to access this code

***

#### To learn more about API testing, check out my free tutorial series here - 
https://www.youtube.com/watch?v=ZSVw3TyZur4&list=PL6AdzyjjD5HDR2kNRU2dA1C8ydXRAaaBV&ab_channel=AutomationBro
***

I hope this post helped you out, let me know in the comments below! 

Happy testing! 😄 

...

Subscribe to my [YouTube](https://www.youtube.com/channel/UCjugV5pnY6WjvTGYm7U1ucg?sub_confirmation=1) channel
Support my work - https://www.buymeacoffee.com/automationbro
Follow [@automationbro](https://twitter.com/automationbro) on Twitter
Why React Is So Popular?
Tags: react, javascript, jsx, html
Published: 2020-10-25 13:20:35

If you have started with the Web Development or if you are doing web development from a long time then you must have heard of Angular, React and VueJs. They all are JavaScript framework for web development. But among then React is more popular than other. 
# What is React?
React is a JavaScript __library__ developed by Facebook for easy and fast web development. It is used to create Single Page Applications and now days you can create native Mobile applications using React Native. Its first release was in year 2013. 

# So the Question arises is Why React is So Popular?
* __Declarative Style__: A declarative style, like what react has, allows you to control flow and state in your application by saying "It should look like this". An imperative style turns that around and allows you to control your application by saying "This is what you should do".

* Virtual DOM : The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called __reconciliation__.

* Easy to Learn : Being its only HTML and Javascript React is very easy to learn.

* Community Support : React has a large base of developers and supporters. Since it is a old library you can find most of the answer in the Community.

* JSX : JSX stands for JavaScript Xml, It means you can use javascript inside html or xml just by typeing your code inside '{' and'}'.

* SEO: React on its own is not SEO friendly and everything works on Virtual DOM it is difficult of web crawler to find the content but if you are using Nextjs or Gatsby you can optimize you site for SEO.

* SPA : One of the main Advantage of React is that We can create Single page Applications ie our site will not reload when change the page. UI is changed without Refresh.


Github repo of React  is:

[https://github.com/facebook/react](https://github.com/facebook/react)

-----------------------------------------------------

Follow me on [Github](https://github.com/akarshbarar)
Follow me on [Instagram](https://www.instagram.com/mycodecave/)
Follow me on [Twitter](https://twitter.com/CodeCave2)

-----------------------------------------------------

--------------------THANK YOU------------------------
TIL: How to pass data from child to parent component in Angular
Tags: angular, todayilearned
Published: 2020-10-25 13:07:59

A simple way to pass data from the child to the parent component using `EventEmitter`. 

I have a child component which holds a message object and I want to pass it back to the parent `postMessage` component

####message.component.ts
```typescript
import { Component, EventEmitter, OnInit, Output } from "@angular/core";

@Component({
  selector: "message",
  templateUrl: "./message.component.html",
  styleUrls: ["./message.component.css"]
})
export class MessageComponent implements OnInit {
  message: IMessage;
  @Output()
  postMessageEvent = new EventEmitter();

  constructor() {}

  ngOnInit() {
    //eg message - would basically come from user input though
    this.message = {
      value: "This is a message I like to post",
      id: 1
    };
  }

  handleClick() {
    this.postMessageEvent.emit(this.message);
  }
```
If you look closely, I have created an `@Output` `postMessageEvent` that emits the current `message` when the `handleClick()` function gets called from the view

####message.component.html
```html
<div>
  {{message.value}}
  <button (click) = handleClick()>Post message</button>
</div>
```
This is just a simple view that displays the message value and has a button that calls the `handleClick()` function when pressed. It would be better to have an input field, but that is a topic for another day ;)

Now back to the parent component. In order to get the message object, I call the `postMessageEvent` through the view like so
###post-message.component.html
```html
<div>
 ...
 <!-- other code -->
 <message (postMessageEvent)=postMessage($event)></message>
</div>
```
I use the same event name `postMessageEvent` inside the brackets and assign that to a function `postMessage()` on the component like

###post-message.component.ts
```typescript
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "post-message",
  templateUrl: "./post-message.component.html",
  styleUrls: ["./post-message.component.css"]
})
export class PostMessageComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

  postMessage(messageFromChild: IMessage) {
    console.log(messageFromChild.id);
    console.log(messageFromChild.value);
    //call service/api to post message
  }
}
```
As we emit the message from the child component, the `postMessage` function takes a parameter which is basically the message object from the child. So when you click the button on the child component the `postMessage` on the parent component gets fired and you have access to the current `message` object And that's all. Now you can use your `messageFromChild` to call a service/api or do anything you want.