teleren/devto huggingface dataset:
How do you cross-post articles from your blog to DEV?
Tags: blogging, discuss, writing, productivity
Published: 2020-11-21 13:58:07

I’m a big fan of [POSSE](https://indieweb.org/POSSE). I love the idea of owning your content, saving it in your private place on the Web, and share it anywhere. I already cross-posted some articles from my website to DEV, but every time I had to arrange the text to let it fits DEV’s context. To give you an example, on my website, I can write “This website uses…”, but when I copy the article on DEV, I need to change the sentence to “[My website](https://francoscarpa.com) uses…”. Do you apply some best practices during writing when you plan to cross-post your articles?
Move Zeroes LeetCode Python Solution
Tags: python
Published: 2020-11-21 13:55:21

Prompt states:
Given an array nums, write a function to move all 0's to the end of it while maintaining the relative order of the non-zero elements.

Example:
Input: [0, 1, 0, 3, 2]
Output: [1, 3, 2, 0, 0]

We need to look through the given array and keep track of the current number and another number which we will call position.

Starting at position 0, if our number we are iterating is equal to 0, then we want to move on to continue looping until we hit a nonzero. 

Then we would swap the two numbers, the position we are keeping track of and the current number. We would repeat this process until the very end of the array.

```python
def moveZeroes(nums):
    pos = 0
    for i in range(len(nums)):
        num = num[i]
        if num != 0:
            nums[pos], nums[i] = nums[pos], nums[i]
            pos += 1
```
Sunk Cost Fallacy and Books
Tags: books, startup
Published: 2020-11-21 13:50:51

---
title: Sunk Cost Fallacy and Books
published: true
description: 
tags: books, startup
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/up64bqk8v6l1nrgvn4xk.png
---

> “Individuals commit the sunk cost fallacy when they continue a behavior or endeavor as a result of previously invested resources (time, money or effort)
> (Arkes & Blumer, 1985)”

How often have you read a terrible book all the way through just because you have already paid for it or read halfway through it. This is the sunk cost fallacy at play.

Online book stores allow you to preview books — read the first few pages before deciding. But what if you decide you don’t like a book halfway through?

There are two factors that typically contribute to the sunk cost fallacy — one is the effort and time already invested, the second is the actual money already spent.

There is not much one can do about the former, but the financial cost is definitely something that can be addressed. There are two ways to do this.

* The easiest is to reduce the cost so that you the consumer don’t have to worry about it when deciding what to do next. This approach however is zero-sum — i.e to benefit you, the creator of the content you are consuming will have to suffer.

* Another is a pay-per-use model. You pay only for what you consume. When you decide to stop, you can. But not all media lends itself to this model; books for instance. But what if there was a way to implement pay-per-use for books?

We at [FeldsparTech](https://www.feldspartech.com/) think we know of a way and can’t wait to show you what we have in mind.

Also posted [here](https://feldspar-tech.medium.com/sunk-cost-fallacy-and-books-3cb5bc9c12d0)
What's your favorite ESLint Config and Plugins?👮🏽🚨🐞
Tags: discuss, javascript, devops
Published: 2020-11-21 13:50:42

---
title: What's your favorite ESLint Config and Plugins?👮🏽🚨🐞 
published: true
description: Discussion to share your ESLint Hacks 👩🏻‍💻
tags: discuss, Javascript, DevOps
//cover_image: https://direct_url_to_image.jpg
---

Let's agree on one thing that ESLint is awesome. If used properly this can increase your productivity by 10x, if not then it can be a mess. 

While working on [connect](https://dev.to/connect) feature for ***dev.to***, I came across the real power of ESLint (perks of working with a great team). From I became a real fan of ESLint and using it in almost all my projects. I have recently written a *complete guide for ESLint* on ***[xenox.dev](https://xenox.dev/eslint-the-easy-but-complete-guide/)***. 

So I thought, Let's ask you what's your fav ESLint config and plugin. Here is mine:

{% gist https://gist.github.com/sarthology/9beb8ae4a6d90d90d9f7e3462a05c5eb %}

Add your config in the comment section and share your personal hack if any.

Also👇

[![Simple Junkyard Tumblr Banner](https://dev-to-uploads.s3.amazonaws.com/i/ttz3ksess8dbmgz0pcfh.gif)](https://xenox.dev/eslint-the-easy-but-complete-guide/)
JS dictionary!
Tags: javascript, library, beginners, 100daysofcode
Published: 2020-11-21 13:21:57

One of my goals yet for this year is to contribute more, so I will make a repo just for consulting JS most used functions, with explanations, comments, and self-made codes, the sequence will approach the same sequence in Eloquent JS + Bonus!😀 

https://eloquentjavascript.net/index.html
some() method explained : JS
Tags: javascript, webdev, codenewbie, 100daysofcode
Published: 2020-11-21 13:00:20

The `some()` method tests whether at least one of the elements in the array passes the test implemented by the provided function. The result of the `some()` method is a boolean. 
Let's see the syntax:- 

```javascript
const new = array.some(( v, i, a) => {
         // return boolean
   });

// newArray - the new array that is returned
// array - the array to run the map function on
// v - the current value being processed
// i - the current index of the value being processed
// a - the original array
```
The `some()` method can be thought of like a for loop, that is specifically for checking values. Let's see this example... 

```javascript 
cost nums = [11, 12, 13, 14];
let aboveTwenty = false;
for(let i = 0; i < nums.length; i++) {
   if(!aboveTwenty) {
    aboveTwenty = nums[i] > 20;
   }
}
   // aboveTwenty = true; 
```
This code results in a boolean, the result of the implemented. Yes, it works, but there is an easy to get this.  

Now we will rewrite the previous function using the `same()` method.

```javascript
const nums = [11, 22, 13, 14]; 
const aboveTwenty = nums.some(value => value > 20); 
      // allBelowTwenty = true;  
```

**Just see. No loop needed. **

And using the arrow function we have a nice and clean function to create the same array. Because we only use the value, we only pass that to the `some()` method. 

Let's peek to another example: 
```javascript
const nums = [11, 22, 13, 14]; 
const nums2 = [34, -1, 16, 75];

nums.some( value => vaue < 0 ); 
   // returns false

nums2.some( value => vaue < 0 ); 
  // returns true
```
The first statement returns false because not a single item in the nums array is smaller than 0. 

<hr>

I'm done!
Read more;-
- [map() method explained](https://rahulism.co/map-method-explained-js)
- [filter() method explained](https://rahulism.co/filter-method-explained)
-  [reduce() method explained: JS](https://rahulism.co/reduce-method-explained) 
<hr>

Thanks For Reading! Comment below if anything is going on your mind.
Daily Developer Jokes - Saturday, Nov 21, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-11-21 13:00:15

---
title: "Daily Developer Jokes - Saturday, Nov 21, 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=Saturday%2C%20Nov%2021%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/5e125964dfaa7.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:___ What is React's favorite movie genre?

___A:___ Suspense
 -->
Ode à depressão
Published: 2020-11-21 12:49:44

# Por que queremos morrer?

Pessoalmente NUNCA entendi porque quero me matar.

Trabalho com o que amo, consigo ajudar minha família, financeiramente falando. Consio ensinar várias pessoas.

A única cois que consigo pensar é que quero fazer muitas coisas.

E não fazer todas essas coisas me diminui e vai diminuindo.

Todas as pessoas que me conhecem acham que eu sou inteligente, logo poderia galgar passos maiores que os outros. Sabe quando todo mundo elogia sua inteligência e você não percebe nada disso?

Será que as pessoar que nunca tiverem esse peso de ter uma facilidade de aprendizado são mais felizes?

Gostaria muito de corroborar a ideia que as pessoas têm de mim, o problema é não alcançar o que TODOS ACHAM.

É errado eu não aguentar mais viver?

Espero quem esteja lendo isso não seja depressivo. 

LUTE CONTRA ESSA VONTADE...

Pois eu ainda estou lutando, só não sei até quando.
Install Jenkins in Ubuntu 18.04
Tags: jenkins, ubuntu, cloud, ci
Published: 2020-11-21 12:36:13

######Info: This post is one of the article in context of this post: [Huawei Cloud ECS server notes](https://dev.to/jemaloq/huawei-cloud-ecs-server-notes-1gnj)

Install firstly Java:
```
sudo apt update
sudo apt install openjdk-8-jdk
```

Add official Jenkins source key into Ubuntu source:
```
wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -

sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
```

Update apt source and install Jenkins: 
```
sudo apt update
sudo apt install jenkins
```

Service Jenkins shall automatically start once the installation finishes. One can check its status using:

```
systemctl status jenkins
```
or 
```
serviec jenkins status
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ej8fpuuljoyq9oo97vgx.PNG)


We can use `systemctl` cmd to *stop/start/restart* jenkins service.


Default port of Jenkins is 8080, thus one can visit Jenkins in browser via address: http://localhost:8080/. In order to change default port of Jenkins, one should modify file /etc/default/jenkins:

```
vim /etc/default/jenkins
```
Change HTTP_PORT to his/her expected port id: 
```
# port for HTTP connector (default 8080; disable with -1)
HTTP_PORT=8080
```

Jenkins requires the default password when user logs in for ths first time. The initial Password can be viewed using:
```
sudo cat /var/lib/jenkins/secrets/initialAdminPassword
```
These two most common errors come when you try to install new software.
Tags: errors, installation
Published: 2020-11-21 12:34:53

1) Some path are not included in your environment variables.
2) Some permission is denied.

## solution :
1) Find which path are not included in environment variables. May be errors give you hints. 
2) Don't run setup or installer by just double click. First right click and then select `run as administrative`.
A CLI for generating Optional Node.js Boilerplate
Tags: javascript
Published: 2020-11-21 12:21:50

I've created a basic CLI for generating Node.js boilerplate
GitHub: https://github.com/irevenko/forge-node-app
Try it with: ```npx forge-node-app```
PREVIEW
<img src="https://i.imgur.com/y8hdTau.gif">
List of Supported Options:
- VanillaJS, TypeScript, Babel
- npm, yarn
- ESLint, Prettier
- dotenv, nodemon, ts-node-dev
- Jest, Mocha + Chai
- git repo (GitHub, GitLab)
Inspired by the vue-cli <3
Display results
Published: 2020-11-21 12:08:11

I m trying to display All the result of characters on my localhost on my home page, i did my .map to all of my element from my back end but i have only 20 characters no more , i made a console log (characters) i received a result but the limit is 20 i don t know why please someone can help me 

Many thanks



import React, { useState, useEffect } from "react";
import Character from "../Component/Character";
import Loader from "react-loader-spinner";
import axios from "axios";
import { Link } from "react-router-dom";

const Home = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [characters, setCharacters] = useState([]);

  useEffect(() => {
    //on va envoyer une requete au serveur qui va nous renvoyer les objets
    const fetchData = async () => {
      try {
        const response = await axios.get(`http://localhost:3100/characters`);
        setCharacters(response.data);
        //console.log(characters);
        setIsLoading(false);
      } catch (error) {
        console.log(error.message);
      }
    };

    fetchData();
  }, []);
 
  console.log(characters);
  return isLoading ? (
    <div className="loading">
      <span>Please wait</span>

      <Loader
        type="Bars"
        color="#ED1F21"
        height={100}
        width={100}
        timeout={99999}
      />
    </div>
  ) : (
    <div>
      <h1>DISCOVER OUR CHARACTERS</h1>

      {characters.results.map((item, id) => {
        return (
          <div key={id}>
            <Link to="/character">
              <p>{item.name}</p>
              <img src={item.thumbnail.path + "." + item.thumbnail.extention} />
            </Link>
          </div>
        );
      })}
    </div>
  );
};
export default Home;
Adding TailwindCSS v2 in your Next.js project
Tags: tailwindcss, nextjs
Published: 2020-11-21 11:37:22

---
canonical_url: "https://overcompiled.com/blog/nextjs-tailwindcss-start"
---

TailwindCSS v2 was recently released. Their release trailer was freaking amazing. They even got music composed especially for their trailer.

{% youtube 3u_vIdnJYLc %}

Now let's focus on how you can add TailwindCSS v2 to your new or existing Next.js project. 

## Creating a new Next.js project

```bash
npx create-next-app
```

This command will bootstrap a new Next.js project for you. 
The `package.json` should contain these scripts.

```json
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
```

You can start the project by running

```bash
npm run dev
```

## Adding TailwindCSS

```bash
npm install tailwindcss postcss autoprefixer
```

PostCSS v8 or up is required for Tailwind v2 to work. `autoprefixer` is a PostCSS plugin. It adds vendor-specific prefixes to the compiled CSS like `-webkit`, `-ms`, etc.

## Configuring PostCSS

Both `tailwindcss` and `autoprefixer` are `postcss` plugins. To use them in our project, we first need to configure postcss and pass these two plugins to it.

Create a file named `postcss.config.js` in the root of your project.

```bash
touch postcss.config.js 
```

Now add this to the file.
```js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```

## Adding TailwindCSS styles

Now create a `src/styles/tailwind.css` file and add the following to it.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

The `@tailwind` directive will inject the `base`, `components`, and `utility` classes for us to use.

Now we have added TailwindCSS to our project. The only thing remaining is importing the styles globally. Doing so will let us use them from anywhere in our project.
To do that let import the `tailwind.css` file into the `pages/_app.js` file.

```js
import '../src/styles/tailwind.css';

function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default App;
```

Restart your server after making changes to `pages/_app.js` so the changes can reflect.

Now you are ready to use Tailwind v2 in your project. Let's try it now, shall we?

Remove everything from your `pages/index.js` file and paste this there.

```js
export default function Home() {
  return (
    <h1 className="text-4xl text-red-400 bg-gray-800 p-4 text-center">
      TailwindCSS v2 with Next.js
    </h1>
  );
}
```

![Screenshot of TailwindCSS v2 working in Next.js app](https://dev-to-uploads.s3.amazonaws.com/i/s12kw8r5m43p3tu51o3g.png)

## Configuring TailwindCSS defaults

To change the TailwindCSS defaults we first need to create a tailwind config file. Add it by running this command.

```bash
npx tailwindcss init
```

This will create `tailwind.config.js` in the root of your project with following content,
```js
module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

Thanks for reading and I hope this was helpful :)
Everything About Hackathons-A place where your ideas become actions
Tags: programming, techtalks, beginners
Published: 2020-11-21 11:25:32

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k2yowjbzr1xedmac7qpz.png)
## Why Hackathons?
* Since Hackathons have time restrictions. You have to do the project within the given time and without procrastinating your work.
* It will help you network with students from other colleges and know about them. Also, you can get guidance from many mentors and working Professionals during Hackathons.
Hackathons will reveal the inner you, the talent in you. Since you will be choosing your idea from the given topics, you will be thinking out of the box creatively.
* Another advantage is, you can enhance your skills in collaboration and Team making, as you work with others during the hackathon.
* Some companies hire students through hackathons if they find your project creative.
* Last but not least, if you make it into the final round it will be a good achievement in your resume/Portfolio as well as you will get rewards.

## Do’s and Don’ts

* When I attended my first hackathon recently, I observed a few things which I want you to know if you are a newbie to Hackathons.
Choose a team that is willing to learn and do something. Because your team must not be quitting during the hack due to pressure.
Be proficient in at least one tech stack. (ML, WEBDEV, ANDROID)
* If you are a newbie, choose a small idea but a creative one that was not implemented before(something that is unique). Because there is time constraint choosing a complicated or big project may not give you output within time.
* Brainstorm your ideas with your teammates, If you know the theme before itself and try to divide the work among your self and try to know the resources for your hack.


### Some of the websites where hackathons are being conducted
2021 Season Schedule

[Link](https://mlh.io/seasons/2021/events)

MLH hosts many hackathons across the globe. They also collaborate with top-notch companies. And they organize webinars with working professionals. They also provide you necessary stuff that you can use during the hackathon. Like, free credits for deploying your website.

[Link](https://www.hackerearth.com/challenges/)

2. Hacker earth organizes hackathons actively where you can get benefits like FTE and Intern opportunities too.

[Link](https://www.techgig.com/home)

3. Tech gig is another website where hackathons are conducted.

[Link](https://devfolio.co/)

4. Devfolio is another website where you can find hackathons.
That’s it guys. Hope you liked the content. Start applying if you want to upskill.

WRITTEN BY
Tejaswini
Follow me for more such content
Functions in C++
Tags: cpp, beginners, computerscience, oop
Published: 2020-11-21 11:11:58

---
title: Functions in C++
published: true
description: Declaring and Defining functions
tags: cpp, beginner, computerscience, oop 
cover_image: https://images.unsplash.com/photo-1597008641621-cefdcf718025?ixlib=rb-1.2.1&auto=format&fit=crop&w=2137&q=80
series: Programming 101 with C++
---

In C++, you can write functions that make things happen.
* To use a function, you **call** it.
* Before you can call a function, the **compiler** must know what it is--**declare** it.
* Somewhere in your program you must implement it--**define** it.
* This can be anywhere, the **linker** will link the function to the code that calls it.

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

* defining a function also declares it
* functions have a return type
* here, add has a return type int. 
* just as with declaring variables the type comes before the variable name, while defining a function we put the return type before the function name.

# Parameters

* The values in the round braces or parenthesis are called parameters.
* Some functions don't take any parameters ().
* Parameters are separated by commas, where each of them looks like a variable declaration.

> int x

* Functions take parameters which have a name and a type.

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

* When you call the add function, you don't have to pass it variables that are called x and y in the *calling scope* but that is what they will end up being called inside the function.
 
> int a = add(3,4); // called add at 3,4

makes a call to the add function with x = 3, y = 4 and then add returns 3 + 4 = 7, which is then put into a.

**main** is also a function we have been writing so far.

### A function to add two integers

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

The compiler enforces **type rules** when you call a function.

Most of the time, you don't write a function if you are only going to call it once and especially not if it is one line long.

Functions really come into their own when they let you achieve some kind of **abstraction**. Something complicated like calculating sales tax that can be put into a function and used without knowing the underline working of calculating sales tax.

> Clean Code Tip: Function should be readable in one go, not having to read up and down.

> Don't Repeat Yourself (DRY): With functions, you save on writing the same piece of code again and again.

**TODO: Write a function that allows to add two doubles.**

[Code](https://github.com/SaloniGoyal/CPP/blob/main/addDoubles.cpp) for reference.

Please leave out comments with anything you don't understand or would like for me to improve upon.

Thanks for reading!
Modelling multiple relationships
Tags: architecture, c4model
Published: 2020-11-20 08:15:05

---
title: Modelling multiple relationships
published: true
description: 
tags: #architecture #c4model
//cover_image: https://direct_url_to_image.jpg
---

The topic of how to model multiple relationships between the same two elements has come up a number of times this week, so here's a quick tip.

To explain the situation, imagine you have an online book store that has customers. Those customers can do a number of things; make purchases, make pre-orders, browse, search, view their previous orders, and so on. To describe this with a diagram, many people would simply draw two boxes, and have one arrow per major use case/feature/story/etc. That would look something like this.

 ![Multiple relationships](https://dev-to-uploads.s3.amazonaws.com/i/rnwa12xq0u9tlghpe94i.png)

While correct and accurate, this approach tends to clutter the diagram, and each time you add a new major feature, you need to add another arrow.

A better way to think about this is that there's a single relationship between the customer and the online book store. Perhaps the customer "uses" the online book store or, to be more descriptive, perhaps the customer "browses and makes purchases using" the online book store.

![A single relationship](https://dev-to-uploads.s3.amazonaws.com/i/77n6ao93eb0csa9cagoc.png)

If you do want to show each of the major use cases/features/stories/etc and how they work at runtime, you can do that with a unique [dynamic diagram](https://c4model.com/#DynamicDiagram) for each of those use cases/features/stories. With this approach, essentially what you have is a single relationship in the static model, with each dynamic diagram showing an _instance_ of that relationship.

I hope that helps!

{% youtube 9LnYV2g7S-w %}