teleren/devto huggingface dataset:
Robocopy Intro
Tags: windows, cli, powershell
Published: 2020-10-30 20:41:53

I recently had to copy a lot of files and in another case a huge file (8GB database dump). As i work on a windows machine i used a nice command line tool called robocopy. Every windows comes with robocopy and it has, even with the default parameters, a better performance than the copy function in the explorer. So how does it work? 

* This how you list all possible parameters. 
```powershell
robocopy \?
```
* This copies the contents of the first folder into the second one. So far not surprising. 
```powershell 
robocopy c:\test f:\test 
```
* This will keep the first folder with second folder synchronized. So only files will be copied that were added or changed in the first folder since the command was run last.
```powershell 
robocopy c:\test f:\test /MIR
```
* If you just want to copy a single file you type something like this: 
```powershell
robocopy c:\test f:\test testfile.txt
```
* By default robocopy uses just one thread when copying. But if you have a lot of files to copy, you can use the parameter /mt:[number]. This allows robocopy to use more threads and copy multiple files at once. 
```powershell
robocopy c:\test f:\test /mt:4
```

* If you want to skip empty folders while copying use the /S Flag. 
```powershell
robocopy c:\test f:\test /S
```
CSS Halloween Faces: Pumpkin
Tags: css, design
Published: 2020-10-30 20:38:50

So far I have made aliens, ghouls, and skulls with CSS. What else could I make for Halloween? How about a Jack O'Lantern?

I started by changing the background color to orange to match a pumpkin.
```css
.minifig_face {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ff9800; 
	flex-direction: column;
	border: 4px solid black;
}

```

Next I changed the size of the eyes. I made them longer and oval shaped. I changed the border style from solid to double to make look carved into the pumpkin shell. Finally I changed the background color to look like the interior of a pumpkin.

Then used the eye shape for the mouth and decided to just drop the nose altogether. 

![Jack o Lantern](https://dev-to-uploads.s3.amazonaws.com/i/y3w6mzo68aeanzcf90oh.jpg)

```css
.eyes {
	height: 195px;
	width: 145px;
	background: #FFF8E1;
	border-radius: 100%;
	border: double 4px black;
	margin:-10px 10px 0px 10px;
	display: flex;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
```
I have a Jack O'Lantern. But quickly changing the colors and removing the pupils and border from the eyes. gives me a Howling Ghost. 


![Howling ghost white with large oval eyes and mouth.](https://dev-to-uploads.s3.amazonaws.com/i/6tkc13xfvf9o0n21q8xo.jpg)

 

##A gallery of other CSS creations.##

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

Ghoul

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

Alien

![Green alien face. Alien has large round eyes with thin black pupils.](https://dev-to-uploads.s3.amazonaws.com/i/1bh2y5ptyouhkfvt79qf.png)


Alien with scales
![snake skin alien](https://dev-to-uploads.s3.amazonaws.com/i/rn8gqxml3kovfly0mf0n.jpg)

```css
	background-image: url(fish-net.png), radial-gradient(rgba(255, 204, 0, 0.01), rgb(253, 245, 192)); 
```

This branched off Cody Pearce's [Bender in CSS post](https://dev.to/codypearce/draw-and-animate-bender-s-face-with-css-e8p).




Have you ever made something cool with CSS? Share it.

-$JarvisScript git push
Daily Challenge #301 - Array Combos
Tags: challenge
Published: 2020-10-30 18:07:16

---
title: Daily Challenge #301 - Array Combos
published: true
series: Daily Challenge
description: Return the number of unique arrays that can be formed by picking exactly one element from each subarray.
tags: challenge
//cover_image: https://direct_url_to_image.jpg
---
In this challenge, you will be given an array of arrays and your task will be to return the number of unique arrays that can be formed by picking exactly one element from each subarray.

###Examples
For example: `solve([[1,2],[4],[5,6]])` = 4, because it results in only 4 possibilities. They are `[1,4,5],[1,4,6],[2,4,5],[2,4,6]`.

Make sure that you don't count duplicates; for example `solve([[1,2],[4,4],[5,6,6]])` = 4, but the extra outcomes are just duplicates.

###Tests
`solve([[1,2],[4,4],[5,6,6]])`
`solve([[1,2],[3,4],[5,6]])`
`solve([[1,2,3],[3,4,6,6,7],[8,9,10,12,5,6]])`

Good luck!

***
_This [challenge](https://www.codewars.com/kata/59e66e48fc3c499ec5000103) comes from KenKamau on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Drawing a butterfly with HTML and CSS
Tags: css, html, codepen, showdev
Published: 2020-10-30 20:31:34

---
title: Drawing a butterfly with HTML and CSS
published: true
description: How to draw a butterfly in HTML and CSS with a video.
tags: css,html,codepen,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sods9xf27wksapjc8wm3.png
---

I really enjoyed drawing today's illustration in HTML and CSS... although I must admit that I don't know much about butterflies and probably made a ton of mistakes. For starters, I don't think monarch butterflies have that eye on their wings, but let's not get too technical.

It also has a gentle animation with the wings flapping slightly as butterflies do sometimes (or always, as I said, not an expert here :P)

Here it is the [CodePen with the illustration](https://codepen.io/alvaromontoro/full/MWeVGRV):

{% codepen https://codepen.io/alvaromontoro/pen/MWeVGRV %}

[Here it is the video of how it was coded](https://www.youtube.com/watch?v=olYdXtPhbvw):

{% youtube olYdXtPhbvw %}
Writing Mutations with Apollo Client
Tags: apollo
Published: 2020-10-30 20:29:29

#What is Apollo Client?

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI. Mostly, while working with apollo I don't think you need any other state management library like(vuex or redux)

#what are mutations and queries?

we all know while working with REST APIs we have the basic request we make which are 'GET, POST, PUT, PATCH ...etc', but when making requests to a graphql endpoint we have two major requests which are QUERIES AND MUTATIONS. A QUERY is any request that reads from the server i.e getting all post from an API endpoint will require us to use a query and MUTATION on the other end is any request that writes to the server i.e saving a post to an API endpoint will require you to write a mutation.


#How To Write A Simple Mutation

let's assume we have an API Endpoint to create a blog post(mutation)
![Create Blog Post]
(https://res.cloudinary.com/dhootdh4f/image/upload/v1602784226/Screenshot_2020-10-15_at_18.46.13_ns62nm.png)

as you can see from the image above we have the createPost mutation takes an 'input' object that contains 'data' and the data property takes post_title, post_date, post_detail, etc. You will notice each property on the data object has a type of property that can be String, String!, ID, Date, Upload, and Enum types also which won't cover in the article.
 
Our Mutation

```
mutation createPost(
    $post_title: String
    $post_date: Date
    $post_detail: String
    $post_image: ID
  ) {
    createPost(
      input: {
        data: {
          post_title: $post_title
          post_detail: $post_detail
          post_date: $post_date
          post_image: $post_image
        }
      }
    ) {
      post {
        id
      }
    }
  }`
```

#How to Write multiple Mutations
mutations fields run in series i.e the first mutation must finish before the second starts. Let's assume we have a button that does two things it creates a post and also creates a post collection.
This is the playground
![Create Blog Post]
(https://res.cloudinary.com/dhootdh4f/image/upload/v1602785188/Screenshot_2020-10-15_at_19.06.09_g6zskq.png)

Mutation
```
export const CREATE_POST = gql`
  mutation createPost(
    $post_title: String
    $post_date: Date
    $post_detail: String
    $post_image: ID
    $name: String
  ) {
    createPost(
      input: {
        data: {
          post_title: $post_title
          post_detail: $post_detail
          post_date: $post_date
          post_image: $post_image
        }
      }
    ) {
      post {
        id
      }
    }
    createCollection(input: { data: { name: $name } }) {
      collection {
        name
      }
    }
  }
`;
```

you can pull this [Vue](https://github.com/ayemitibo/vue-apollo-blog.git) repo to check the full source code
100 Days of code
Tags: 100daysofcode, html, css, braziliandevs
Published: 2020-10-30 20:27:20

Hello there, i'm [Ricardo Costa](http://www.ricardo.digital/). Nice to meet you! :)

I'm going to start this **100 Days of Coding Challenge**, this is a hashtag that i found on Twitter and decided to join.

So, let's begin :D i'll always make a repo in my [GitHub account](https://github.com/ricardo-cas) so everyone can see the source :)

Feel free to update or make sugestions :)

See you soon! :)
Revised RDoc for Ruby CSV
Tags: ruby, documentation, csv
Published: 2020-10-30 20:20:18

---
title: Revised RDoc for Ruby CSV
published: true
description: 
tags: ruby, documentation, CSV
---

I've completed a major revision of the RDoc for Ruby class [CSV](https://ruby.github.io/csv/CSV.html), along with its nested classes [CSV::Table](https://ruby.github.io/csv/CSV/Table.html) and [CSV::Row](https://ruby.github.io/csv/CSV/Row.html). This is not yet merged into the master branch at ruby/ruby, but may be seen on ruby.github.io at the links above.

I've also been experimenting with [CSV recipes](https://ruby.github.io/csv/doc/csv/recipes/recipes_rdoc.html), which focus on specific user tasks rather than on API capabilities.

Oh, and here's the [existing RDoc](https://ruby-doc.org/stdlib-2.7.2/libdoc/csv/rdoc/CSV.html).
The Wait is Finally Over!!
Tags: hacktoberfest
Published: 2020-10-30 19:56:17

In the beginning of October'20, I remember there was a huge rush to complete the hacktoberfest challenge and be eligible for prizes. Looking at the prizes even I wanted to participate and contribute. But the frenzy confused me and for a while I was unsure of which repositories to contribute in as some of them were being labelled as invalid by the staff. 
So I gave up on it. 
After about half a month, in which I completed an Azure cloud course, I opened my LinkedIn to find my friends sharing screenshots of them getting messages saying all their PRs were accepted and they were eligible for prizes. That was amazing news, but it kinda put me off as I felt left out but remembered I myself had given up. So it was game over. 
Around 24th October, I received a mail from digitalocean saying we had time till 31st October to submit PRs which really boosted my morale. Thanks to their timely mail, I got back my enthusiasm to participate in this fest!
Thank you digitalocean and the hacktoberfest community for being so encouraging and kudos to all those people out there who created repos for others to contribute in. :)
ESLint + Prettifier VSCode Lean Setup
Tags: typescript, vscode
Published: 2020-10-30 05:53:00

A basic VSCode setup of ESLint + Prettifier that includes configuration for automatic linting/fixing upon filesave. I listed out steps from khalilstemmler's articles about [ESLint](https://khalilstemmler.com/blogs/typescript/eslint-for-typescript/) and [Prettier](https://khalilstemmler.com/blogs/tooling/prettier/) integration to Typescript and merged them to a compact setup.

- Install lint and other lint plugins via npm cli 
```
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
```

- Create `.eslintrc` from root directory with contents:
```json
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": { }
}
```

- Create `.eslintignore` from root directory with contents:
```
node_modules
dist
```

- (Optional) Add eslint script to `package.json`. This enables you to execute lint script on npm cli.
```json
{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
  }
}
```
Run in cli: `npm run lint`

- Install prettier via npm cli
```
npm install --save-dev prettier
```

- Create `.prettierrc` on root directory with contents:
```json
{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80
}
```

- (Optional) Add prettier script to `package.json`.
```json
{
  "scripts": {
    ...
    "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write"
  }
}
```
Run in cli: `npm run prettier-format`

- Install Prettier and Eslint from VSCode Extensions `Ctrl + Shift + X`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0895sp7gyfumil6d1j17.JPG)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ij23ug2vilx1pfuv7sk3.JPG)

- Set the defaults via `CTRL + Shift + P` then select `Preferences: Open Settings (JSON)`

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

- Add below configuration (if not yet existing)
```json
// Default (format when you paste)
"editor.formatOnPaste": true,
// Default (format when you save)
"editor.formatOnSave": true,
```


You can now either run the scripts via cli or choose to lint every time you save changes on your code.
SCSS FTW on my latest bug
Tags: css, webdev, design, codenewbie
Published: 2020-10-30 19:55:36

Hey everyone! It's my first post 🎉 I've been a "lurker" for years, following and bookmarking amazing devs and their articles. I figured it was time 😀

I’ve been trying to improve my CSS for the longest time, and I was fortunate enough to find [Frontendmentor.io](https://www.frontendmentor.io/challenges) as the perfect platform to do so. It has lots of projects in different skill levels that you can practice with and add to your portfolio. If you are trying to get out of the tutorial loop, I highly recommend to check it out. Here’s how I worked out one of the major issues I ran into with the latest project I worked on.

Live: https://insure-landing-page.emestabillo.now.sh/
Github: https://github.com/emestabillo/insure-landing-page
Frontendmentor submission page: https://www.frontendmentor.io/solutions/insure-landing-page-GaMK1QZAW

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

### Planning
I compared the differences between the layouts and note that there’s a left and right margin going through the entire page. The hero and the footer containers however, spans the entire screen width with their contents inside these margins, so I can’t just place the whole page in one wrapper. The hero also has that photo that overflows vertically on desktop view.

### The problem
My go-to solution for these kinds of layout is to place all the contents inside a container class:

```
.container {
   width: 90% //prevents it from touching the left and right gutter
   max-width: 110rem //keeps it fluid
   margin: 0 auto //horizontal centering
}
```

I tried this out initially and though it did work, it gave me another issue with the mobile layout.

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

The wavy background patterns also look a little odd floating around as is instead of touching the edges of the browser.

My first instinct is to ditch the container solution for the header and apply appropriate paddings. While it’s a completely valid approach, I think it would result to more media queries for larger screens, since I’m always lining it up with the rest of the page. I’d like to try to be consistent with the margins, so I had to think of another route. How do I customize the container div without affecting its use on the rest of the page?

### Solution
The answer came to me while eating adobo (a popular Filipino dish). I’m using SCSS for this project, so why not take advantage of NESTING. The container is nested under `.hero`, so I targeted that specific container only and for smaller screens, set it at full width:

```
.hero {
  //styles here
  .container {
   @media screen and (max-width: 767px) {
      width: 100%;
    }
  }
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vmuo1k7by3v49anepen3.gif)



Pretty neat!
The Google Doodle Games - Open Sourced?
Tags: opensource
Published: 2020-10-30 19:54:11

---
title: The Google Doodle Games - Open Sourced?
published: true
description: 
tags: #opensource
//cover_image: https://direct_url_to_image.jpg
---
Have you played the Halloween game on Google's home page? It's super clever. I love the little interactive doodles they do.

I've been wanting to get into making (relatively) simple games like that. I'm wondering if Google has public repositories for their interactive doodles. Does anyone know?
JavaScript built-in & beautify JSON
Tags: javascript, tool, json, webdev
Published: 2020-10-30 19:47:48

Do you know the best way how to beautify JSON in pure JavaScript?
As answer: now I know?
But in the past it wasn't obvious.
I have used online tools.
Today, I know quick solution:
```JavaScript
const beautifyJson = (json) => {
    var object = JSON.parse(json);
    return JSON.stringify(object, null, 4); // 4 spaces as indent
}

// Usage example:

const uglyJson = '{"id": 2, "name": "Tom", "age": 25}';
const beautyJson = beautifyJson(uglyJson);

console.log(beautyJson);
```
Online runnable examples: https://dirask.com/posts/pqqJxp
Roast my landing page 🔥
Tags: showdev, discuss, design, wordpress
Published: 2020-10-30 19:30:57

Hey DEV friends! 👋🏻

I've been working on a landing page for my new project this week and would love your feedback on the design & content. You know how when you look at a project too long you go a bit blind to it?

Link is here: https://wpfor.dev/

Many thanks in advance.
What Linux distribution is Powering Azure App Service?
Tags: azure, linux, dotnet
Published: 2020-10-30 19:14:51

---
title: What Linux distribution is Powering Azure App Service?
published: true
description: Have you ever wondered what version of Linux is powering the Azure App Service for Linux offering? 
tags: azure, linux, dotnet
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/azopk8irmlxmahrmzfa6.png
---

You probably know by now that you can have Linux-powered App services. 

But, have you ever wonder what Linux distribution is powering that App Service? 

Looking at the `Environment` section of the Kudu console won't help:

![environment section in kudu](https://dev-to-uploads.s3.amazonaws.com/i/cgvq8np0j0dqy0b6mos5.png)

Well, wonder no more! Simply open a WebSSH terminal:

![app service ssh](https://dev-to-uploads.s3.amazonaws.com/i/mjsh4t0vd8m7ti700d7x.png)

And type this command:
``` bash
cat /etc/os-release
``` 

And you'll get the requested information:

![linux distro info](https://dev-to-uploads.s3.amazonaws.com/i/hpjcxhe6isk1e7aap1kb.png)

Easy, right? ;)


# In conclusion...
Today, we have lifted the veil on some part of the magic that powers the Azure App Service for Linux offering which is what version of Linux this service is running on.

# Let's keep in touch
You can reach me on [Twitter](https://twitter.com/tidjani_b) or [LinkedIn](https://ca.linkedin.com/in/tidjani-belmansour-ph-d-98460912).

See you soon !
[PT] Como colocar um banner no seu overview GitHub
Tags: github, tutorial
Published: 2020-10-30 19:11:40

1º <b>Primeiro</b>: Criar um novo repositório
<br />
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jempossveb1il4f214qo.png)
<br/>

Inserir seu nome no repositório <b>ID da sua conta<b/>
<br/>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d18iao5tfalz00hz0zca.png)
<br/>

Observe a mensagem

"You found a secret! Jhow-Ms/Jhow-Ms is a ✨special ✨ repository that you can use to add a README.md to your GitHub profile. Make sure it’s public and initialize it with a README to get started."

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bj3rq6vlxq4b2f9al87q.png)
<br />
Selecione como <b>Public</b>
<br/>

Inicie seu repositório com: 
Add a README file.
<br/>

<b>Create Repository<b>

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



Agora personalize o texto/imagem conforme sua preferência.

Commit changes.


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


Agora volte para a tela do seu overview e observe o resultado da sua obra de arte =)
Compensating open source developers via GitHub Sponsors. Good or bad?
Tags: discuss, watercooler, opensource, sponsors
Published: 2020-10-30 19:02:28

I've been kicking around this idea of sponsoring developers via GitHub Sponsors to work on feature requests on our ([RudderStack](https://rudderstack.com)'s) open source software (GitHub repo [here](https://github.com/rudderlabs/rudder-server)).

I'm of the opinion that just because you are doing work on open source software doesn't mean you shouldn't be compensated. I know some people don't agree with me on this though.

What are your thoughts? Is compensating open source developers, in our case via GitHub Sponsors, to do work on open source software good or bad?