teleren/devto huggingface dataset:
A Word of Caution Regarding Cross-Posting To DEV
Tags: meta, seo, webdev, indieweb
Published: 2020-08-28 12:39:57

I cross-post all of [my articles](https://viewsource.io/) to DEV (soon to other platforms such as [Medium](https://medium.com/@saulhardman) and [Hashnode](https://viewsource.hashnode.dev/) as well) and am very happy to do so.

DEV provides the ability to set a `<link rel="canonical">` pointing to the original article's permalink on the `viewsource.io` domain. Up until now this appears to have worked just fine with Google ranking my domain higher in the results than `dev.to` (if DEV is there at all).

However, my [latest article](https://viewsource.io/managing-access-tokens-with-github-actions-and-encrypted-secrets/) seems to have fallen between the gaps somewhere as the DEV version of the article is the only one which displays in the search results for the search term [`"Managing access tokens with GitHub Actions"`](https://www.google.com/search?hl=en&q=managing%20access%20tokens%20with%20github%20actions):

![A screenshot of Google search results showing only DEV article](https://dev-to-uploads.s3.amazonaws.com/i/b1ueqe1fhgx79jqwh3pn.png)

The original article only appears in the search results if I navigate to the final page of results and click the 'search with the omitted results included' link:

![A screenshot of Google with some copy stating that some 'very similar' results have been omitted](https://dev-to-uploads.s3.amazonaws.com/i/3yb9aj4m5ud66uwjclxi.png)

![A screenshot of Google search results showing both the DEV article and the original article](https://dev-to-uploads.s3.amazonaws.com/i/gx8nfssr5n02cn7fqx5p.png)

Despite both pages containing a `rel="canonical"` link pointing to the same page, the original article appears to be falling foul of Google's duplicate content filters.

This is either an anomaly or (as I suspect) this has happened due to the DEV article being crawled and indexed _before_ my site, meaning that the `href` attribute of the `<link rel="canonical">` was to a page that was not indexed.

Given the drastic differences in the size of the 2 sites it's not unreasonable to presume DEV simply has a larger crawl budget and is indexed far faster than my one-person publication.

In order to avoid this outcome in the future I'm planning to adopt the policy of waiting at least a few days before cross-posting my articles.

What do you think DEV community? Is my theory sound? Those of you who cross-post: have you been bitten by this before? Do you cross-post immediately or wait some time?
Day 43: So there's more to backend?
Tags: 100daysofcode
Published: 2020-08-28 21:34:40

I encountered two tools today TypeORM and postgres database. I know nothing about the two but i am supposed to use them for a project. So you can probably guess i've been up and about google trying to learn how to use the tools. 

TypeORM is an Object-relational mapping tool that converts data from JavaScript / TypeScript to fit a variety of databases. More on that will definitely be coming. Postgres is an object-relational database. The setup has been a nightmare, mongoDB was actually much more tender with me. Either way I still will pull it through, that is what makes a software developer.


 _API's were fun until i met databases, i might as well stick to frontend._
_Day 43_
How to initialize a vector in C++?
Tags: cpp, oop, programming
Published: 2020-12-17 16:41:27

Vector is a standard library class template, which is similar to array, but also supports dynamic resizing. Vector provides a data structure with contiguous memory location. This enables efficient, direct access to any element of a vector via the subscript operator [ ], exactly as with a built-in array. Like class template arrays, template vector is most commonly used when the data in the container must be easily accessible via subscript or will be sorted, and when the number of elements may need to grow.

---
title: How to initialize a vector in C++?
tags: cpp
canonical_url: https://kodlogs.com/blog/519/how-to-initialize-a-vector-in-c
---

**All of the above was a quick review over vectors, but the original topic of today’s article is how to initialize a vector in C++?**


#Methods to initialize a vector in C++
We can initialize vectors in many ways but in this article we will discuss only easy and familiar routes to initialize vectors. All the methods are given ahead.

* Specifying size and initializing all values
* Initializing like arrays
* Initializing from array
* Initializing from another vector


##Specifying size and initializing all values
```
// CPP program to create an empty vector 
// and push values one by one. 
#include <bits/stdc++.h> 
using namespace std; 

int main() 
{ 
	int n = 3; 

	// Create a vector of size n with 
	// all values as 10. 
	vector<int> vect(n, 10); 

	for (int x : vect) 
		cout << x << " "; 

	return 0; 
} 
```

###Initializing like arrays
```
// CPP program to initialize a vector like 
// an array. 
#include <bits/stdc++.h> 
using namespace std; 

int main() 
{ 
	vector<int> vect{ 10, 20, 30 }; 

	for (int x : vect) 
		cout << x << " "; 

	return 0; 
} 
```
###Initializing from array
```
// CPP program to initialize a vector from 
// an array. 
#include <bits/stdc++.h> 
using namespace std; 

int main() 
{ 
	int arr[] = { 10, 20, 30 }; 
	int n = sizeof(arr) / sizeof(arr[0]); 

	vector<int> vect(arr, arr + n); 

	for (int x : vect) 
		cout << x << " "; 

	return 0; 
} 
```
###Initializing from another vector
As the name suggests we will be initializing vectors from another vector. And the reason I put this method in the last is because before following this method we must know how to initialize a vector by another method. 

```
// CPP program to initialize a vector from 
// another vector. 
#include <bits/stdc++.h> 
using namespace std; 

int main() 
{ 
	vector<int> vect1{ 10, 20, 30 }; 

	vector<int> vect2(vect1.begin(), vect1.end()); 

	for (int x : vect2) 
		cout << x << " "; 

	return 0; 
} 
```
 

If you have any doubt or queries related to this article feel free to ask in the comment section. I would like to answer you.
My first project in Visual Basic.NET
Tags: beginners, project, visualbasic, codenewbie
Published: 2020-08-31 03:44:36

![visual Studio](https://dev-to-uploads.s3.amazonaws.com/i/8bysoy7da78tvbjlxd3o.jpg)

##Reason behind the Project

One of the first projects that, I have created in Visual Basic.NET is a text-editor application. 

In the most common scenario, Notepad is one of the first text editors that we have introduced when we started using the computer for the first time.  And similar goes with me, Notepad is the first text editor that I have used. After some time using it, I started liking this application. Yes, it is not the most powerful text-editor but we have to agree that, it is one of the simplest & most used applications in the computers.  And that motivates me to create a similar application, like Notepad.

Likely at that time, I was a bit familiar with the Visual Basic framework. And I started creating it in Visual Studio (2013 edition),  after a week later I finished the project.

##How was the Experience

In that one week, I have learned so many basic things about the development. Like, how to create a basic application interface, coding, handling run time errors, and so on. And most importantly, I learned, using an application and creating an application are completely two different things. Creating something, required countless time & effort compared to just using it.

##Application

After creating the application, I published it on Download.CNET.com. 

You can check it from [this link]  (https://download.cnet.com/Notepad-Pro/3000-2351_4-78156428.html)

I have also created a Word-Processor application. You can check this too from [this link](https://download.cnet.com/Edit-Pad/3000-2351_4-78238145.html). Basically I extend some of the functionality of my text-editor application

![Word Processor](https://dev-to-uploads.s3.amazonaws.com/i/13l1k3ib6jpgobiarlwd.PNG)

##Source code

You can also download the source code, and modify the application according to your needs.

[Github Link](https://github.com/rahedmir/notepadpro)

[Direct Download](https://www.dropbox.com/s/9xxfk1tzsb64tr4/notepadpro-master.zip?dl=1)

I would appreciate if you share your experience regarding your first project in the comment section below

Thank you.

Coffee https://www.buymeacoffee.com/rahedmir
Merge Sort
Tags: javascript, algorithms, sorting, arrays
Published: 2020-08-31 13:13:14

Hope you read my previous article on the selection sort, and how it is similar to Insertion sort.

If not, check out this article below.

{% link https://dev.to/sudharsanansr/selection-sort-43n %}

We will see the Merge Sort today.

Merge Sort is a divide and conquer sorting algorithms, which uses recursion to sort.

Here is a pictorial representation of how it works.

(Top -> Bottom)

![marge-sort-flow-diagram](https://dev-to-uploads.s3.amazonaws.com/i/smjnqbttfxwi0ncb8s5b.png)

In the above diagram, we are dissecting the elements of array based on a pivot value (depending on the length of the array).

Since the dissection happens back to back due to recursion, we would need a base condition. Here our base condition is to return the input if the "input.length" is less than or equal to 1.

Once the elements are dissected, the sorting happens.

Here we compare the values of 2 arrays dissected starting from the index "0". If the value on the left found to be smaller, we will push that element to the result array and increment the counter on the left array (only), same goes to the array on right. 

We do it repeatedly until the counter value reaches the array length.

In the end, there will be one element either in right or the left array which needs to be pushed to the result (the largest element), so we concatenate that value while returning the result.

Video reference (Start from 3:08) 
{% youtube kgBjXUE_Nwc %}

Below is the implementation in JavaScript for the Merge Sort algorithm

![merge-sort-js-implementation](https://dev-to-uploads.s3.amazonaws.com/i/g76a2deic0tayny73jxe.png)

Here is the result.

![merge-sort-js-implementation-result](https://dev-to-uploads.s3.amazonaws.com/i/4bt7ouswlv9t3sgpygxu.png)

Hope you find this helpful.

Please share your feedback, will see you again.

Thanks,
Sudharsanan Ravichandran
How to capture website screenshots using Node.js and Puppeteer
Tags: node, javascript, tutorial
Published: 2020-09-07 04:44:48

Puppeteer is a Node.js library that provides an API for controlling Chrome and Chromium browsers. In this article we’ll be using it to capture a screenshot of a website, but it can also be used to automate form submissions, perform UI testing, and help diagnose performance issues.

To get started with Puppeteer you’ll firstly need to have Node.js (v10.18.1+) installed.

With Node.js installed run the following terminal commands to create a project folder and install Puppeteer:

```
mkdir screenshot
cd screenshot
npm install puppeteer
```

This can take a little while to install as Puppeteer downloads Chromium which is around 120mb in size. Once installed we’ll setup the script to capture the screenshot in a new file called `screenshot.js` using Wikipedia as an example:

```javascript
const puppeteer = require("puppeteer");
const capture = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://www.wikipedia.org/");
  await page.screenshot({ path: "./screenshot.png" });
  await browser.close();
};
capture();
```

As we’re using the `await` operator to wait for a `Promise` the code must be run inside an `async` function. This allows asynchronous, promise-based behavior to be written in a cleaner style, avoiding having to explicitly configure promise chains.

It’s now time to test the script out by running the following command:

```
node screenshot.js
```

If successful this will save an image named `screenshot.png` in the same folder as the script is located. By default the screenshot will be 800×600 pixels but you can set a specific viewport size by adding the following with the required dimensions:

```javascript
await page.setViewport({ width: 1024, height: 768 });
```

Alternatively entire pages can be captured by modifying `page.screenshot` as follows:

```javascript
await page.screenshot({ path: 'screenshot.png', fullPage: true };
```

Up until now the screenshot is being saved as a .png but it’s also possible to save as .pdf by replacing the `page.screenshot` line with the following:

```javascript
await page.pdf({ path: 'screenshot.pdf', format: 'A4' });
```
Games are addicting. Learning web development isn't. Can it be?
Tags: webdev, javascript, html, css
Published: 2020-09-01 00:13:11

#Yes, when learning web development feels like playing a game!

##[Play 'Fix a function!'](http://freecodegame.com)
- 5 levels per session
- 1 session each day
- Pick one language, or pick random
- Pick one difficulty, or pick random
- Start the timer, if you dare!
IT Service Desk Là Gì? Những Điểm Nhấn Khi Trở Thành IT Service Desk
Published: 2020-09-03 08:09:01

Nhắc đến một công ty chuyên về công nghệ thông tin hay lập trình, chắc hẳn chúng ta ai cũng nghĩ bộ phận quan trọng bậc nhất ở các công ty ấy là đội ngũ các lập trình viên, các kỹ thuật viên chuyên làm việc trong các dự án, project… Tuy nhiên, có một bộ phận cũng có tầm quan trọng không kém và ảnh hưởng đến hoạt động của công ty, đó chính là IT Service Desk. Vậy IT Service Desk là gì, mục tiêu và lợi ích của bộ phận này trong công ty, các môn hình của IT Service Desk, và việc sắp xếp nhân sự cho IT Service Desk diễn ra như thế nào !. Chúng ta hãy cùng nhau tìm hiểu tất cả các thông tin này nhé !
Portfolio feedback
Tags: webdev, career, discuss, beginners
Published: 2020-09-04 15:37:22

Hello people

I am kindly requesting you to take a look at my portfolio. I have realized perfection is the enemy of getting things done. I have two versions. One with light theme and another with dark theme. Which one looks more professional and presentable? If there is anything i should add or remove please let me know. If you could go ahead and glance at the projects and comment about them too, i will be grateful .

1. [With dark theme](https://mawa.netlify.app/)
2. [With light theme](https://modified-portfolio.netlify.app/)
Customizing console.log in JavaScript
Tags: javascript
Published: 2020-09-05 17:07:02

How many of you use console.log to understand what is going on in your code, output messages or debug some code? The answer is everyone. 
In fact, most developers use console.log every few minutes when debugging code. You probably know this amd do so yourself, but did you know that you can customize it to be its own variable?

Let's explain.
We can assign the function of console.log to a variable we want and then use that variable as our method to log output to our console. What's the purpose? Well, instead of having to type console.log everytime we want to output to the console we can just use our shorter vsriable.

Let's see an example

```javascript
const msg = console.log
msg("Hello world") //hello world

```

This helps us use msg() which is shorter and faster to type than console.log

One thing to note is that it is highly recommended to declare our variable as a const and not as let or var. This is due to the simple reason that if 1000 lines down our code we forget we have assigned console.log to msg, we could unintentionally change its value, so by declaring with const we protect ourselves from this error.


Try the code and let me know what you think innthe comments!
3 ways to use JS reduce
Tags: javascript
Published: 2020-12-26 16:10:57

In Javascript reduce is a method that loops through the elements of an array and returns a single value. The single value can be a range of different things such as returning a number, string, or object, which will be discussed below. 

## Learning about reduce  

[MDN link on reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)

## Mathematical Reduce
Usually, reduce is used to return a mathematical result:
```js
function sumFunc(arrayOfNumbers) {
  let sum = arrayOfNumbers.reduce((total, number) => total + number, 0);

  return sum; 
}

sumFunc([1,2,3]) // returns 6
```


## String Reduce
However, reduce can do more than just return a single numerical value. It can also return a string:

```js
function reverseWordFunc(word) {
    // create array of letters basically word.split(‘’) 
    let letterArray = [...word];
    
    let reverse = letterArray.reduce((reversedWord, letter) => letter + reversedWord, '');

    return reverse; 
}

reverseWordFunc('hello') // returns ‘olleh’
```
NOTE: This version of using reduce is concatenating the accumulating string to the letter, which is why we get the word in reverse. However, by switching the order of the parameters we can get the word in order i.e. `letterArray.reduce((reversedWord, letter) => reverseWord, letter, ‘’)`

## Object Reduce
And it can even be used to return an object or a “hash table”: 
```js
function findMostFrequentElements(array) {
  let hashtable = array.reduce((object, key) => {
    // initialize property  or use existing value 
    object[key] = object[key] || 0;
    object[key]++;
    return object; 
  }, {}); // returns {1: 1, 2: 2, 3: 1, 4: 1, 5: 2}

    // get the frequency each element occurs 
    let getFreqency = Object.values(hashtable);
    // get the max of occurrences for an element
    let max = Math.max(...getFreqency);
    // filter to see which elements in the hash table appear the most
    let mostFrequentElements = array.filter(key => hashtable[key] === max); // returns [2,2,5,5]
	
    // remove any repeating elements 
    return [...new Set(mostFrequentElements)];
}

findMostFrequentElements([1,2,2,3,4,5,5]) // returns [2,5]
```

Thanks for reading and I hope this introduced new ideas around using reduce.
Learn Go with tests - Book Review
Tags: go, testing, books
Published: 2020-09-07 14:55:12

After going through [The Tour of Go](https://tour.golang.org/) and building a small Twitter bot in Go, I wanted to get more serious with this language I love.

So I decided to move on to [Learn Go with tests](https://quii.gitbook.io/learn-go-with-tests/) by Chris James ([quii](https://dev.to/quii)). I began learning Test Driven Development (TDD) with NodeJS a few months ago and found that it forced me to break down problems and to think about what I wanted ____ to do which resulted in writing better code.

Here is what the beginning of Learn Go with tests promises:
![Learn Go with tests introductory promises](https://dev-to-uploads.s3.amazonaws.com/i/4k05z2s8uf0kxe5veukn.png)

I think it achieves all of these goals very well.

Quii takes you through the fundamentals of Golang in the first half of the book and then takes you through the process of building a fully functioning application for both the web and a command-line interface (CLI).

You'll acquire the muscle memory for TDD. Each chapter ingrains the process of writing tests that fail, making them pass, and then refactoring the code and tests.

This book also includes many asides about the **why**s of TDD along with external blog posts and resources that relate to both Go and TDD. This provides additional motivation to keep learning this methodology and good starting points for continuing education.

The only issue I had with the book was in the second half of the book as the application became larger with many files. It was sometimes unclear where a code snippet should go or what should be changed.

If this is an issue you encounter, I'll recommend cloning the [Learning Go with tests repo](https://github.com/quii/learn-go-with-tests/tree/master) and opening it in another window of your text editor or IDE. With that, you can search through to see where a specific code snippet goes if you're lost.

So if you're new to Go or new to TDD, I highly recommend reading Learning Go with tests.
Should You Learn Bootstrap In 2020
Tags: webdev, html, css, javascript
Published: 2020-09-08 07:55:33

![Image](https://dev-to-uploads.s3.amazonaws.com/i/nyykelcztd17312ihss0.jpg)

# So Should You Use Bootstrap In 2020 
## The short answer is it depends. When it comes to frontend development bootsrap can save you a lot of time but if you want to develop your frontend skills bootsrap can't save your day.

# Opinion

## Every one's opinion defers when it comes to front end frameworks some people love those and  others hate them. Its not like learning a language or a skill but mostly I often refer to the docs. Boostrap is very easy to learn and its pretty good for people who doesn't want to spend lot of time on css.You can customize boostrap other wise it will be looking like other bootsrap web pages.

# So Bro What About Bootsrap 5?

## K so bootsrap 5 is now in a alpha stage it dosnt make any issue when u switch to boostrap 5 but its good for widgit js. 

# Jquery Is It Disappearing?
## The Short answer is yes jquery is fainting out and mostly no one uses jquery now a days.


# Bro What About My Css Skills
## You can improve your css skill by doing different challenges such as try [Challenge]
[![Everything Is AWESOME](https://img.youtube.com/vi/RuLRsMN9KJQ/0.jpg)](https://www.youtube.com/watch?v=RuLRsMN9KJQ"Everything Is AWESOME")


# Conclusion

## Every Framework has its own pros and cons 

# Keep Coding !!!


# 🙏  Share with your friends on  [Twitter](https://twitter.com/intent/tweet?text=%20Should%20You%20Learn%20Boostrap%20%20https://dev.to/alestor123/should-you-learn-bootstrap-in-2020-14ln "Share It" )
 

 
<h2 align=center> 👇  Find more posts on the following topics </h2>
My React abstraction dilema
Tags: react, webdev
Published: 2020-12-26 23:31:50

Hey peeps! don't mind me, just making this post to share my first impressions of #React server components and to talk a bit about my React journey.

As years past as developer I've had a wonderful time being mostly a Front-end developer with react as my main weapon against any challenge that appeared in front of me. It's in fact a great tool to develop any kind of interface anyone can imagine with a moderate bundle size and as more and more time past, more useful tools have appeared to approach different types of projects such as Gatsby(The Wordpress killer).

All of the react ecosystem seems incredible to think of, and with it came the tiniest drawback in the form of worry. As time kept passing the react team seemed to focus on making development easier, cleaner and more readable. But you can't have that without stacking more and more abstraction and as such the feel of the library seems to be changing.

My exact thoughts were "Is React becoming a UI design tool?" or "Am I gonna lose my job to a designer?" and with each abstraction my worry seemed to materialize but alas with the last big React feature called REACT SERVER COMPONENTS there's a little hope. The fact that it focuses on deep rooted programming issues gives me hope as a Front-end developer. Thank you for reading!