teleren/devto huggingface dataset:
How do I NOT to commit changes to other people's github repos I clone for learning?
Tags: newbie, github, vscode
Published: 2020-02-01 15:40:21

I like trying out many lesson projects. Often they involve cloning github repos. I know the repos aren't mine and I often add a lot of my own commentaries for my personal learning purposes.

I use vscode as my editor. Vscode tracks my changes and asks me to commit them but I really don't want to do that at all. 

I'd rather keep my personal learning notes and comments private at this point. It's not that I don't want to share them. It's more that as a newbie I'd be embarrassed to so so. Maybe later on.

I normally don't fork the repos. I download them into my personal local projects folders. After a bunch of not committed changes, vscode gives me a message something like I have too many uncommitted changes.

Can anyone give me some advice on how to do all my local learning commentaries and notes without publishing them in github or becoming a nuisance with ridiculous pull requests, and stop vscode from telling me I have too many uncommitted changes?
A Very Big Sum
Tags: javascript, java
Published: 2020-02-01 15:33:03

Calculate and print the sum of the elements in an array, keeping in mind that some of those integers may be quite large.

**Function Description:**

Complete the aVeryBigSum function in the editor below. It must return the sum of all array elements.

aVeryBigSum has the following parameter(s):

ar: an array of integers.

**Input Format:**

The first line of the input consists of an integer.
The next line contains space-separated integers contained in the array.

**Output Format:**

Print the integer sum of the elements in the array.

**My Solution:**

'use strict';

const fs = require('fs');

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', inputStdin => {
    inputString += inputStdin;
});

process.stdin.on('end', _ => {
    inputString = inputString.replace(/\s*$/, '')
        .split('\n')
        .map(str => str.replace(/\s*$/, ''));

 main();
});

function readLine() {
    return inputString[currentLine++];
}


function aVeryBigSum(ar) {
    var sum=0;
for(let i=0;i<ar.length;i++){
    sum = sum + ar[i];
}
return sum;
}

function main() {
    const ws = fs.createWriteStream(process.env.OUTPUT_PATH);

    const arCount = parseInt(readLine(), 10);

    const ar = readLine().split(' ').map(arTemp => parseInt(arTemp, 10));

    let result = aVeryBigSum(ar);

    ws.write(result + "\n");

    ws.end();
}
👫When You're Dating A UX Designer 🤦‍♀️😱| Funny (Sketch)
Tags: uxdesigner, ux, funny, jokes
Published: 2020-02-01 15:21:06

This is supposed to be a funny video, I don't want to offend anyone or anything.

[Another funny video](https://dev.to/eleftheriabatsou/how-to-pretend-you-are-an-awesome-ux-designer-funny-part-1-4fbp)

Enjoy :)



--
**Thank you for taking the time to watch my video.**

*Would you like to get me a coffee?!☕️
You can do that here → paypal.me/eleftheriabatsou
But If you can’t, that’s ok too 😍.*

It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.
[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elef_in_tech)
Introdução ao Kibana Canvas 
Tags: canvas, elasticsearch, kibana, sysadmin
Published: 2020-02-01 15:09:47

O **Canvas** é uma das ferramentas presentes no Elastic Stack que tem como objetivo facilitar a criação de dashboards mais amigáveis. Nele você pode criar designs mais elaborados e também pode colocar o logotipo da sua empresa, tudo isso consultando seus índices e trazendo todos os dados que você precisa em *near real time*. Outro diferencial é utilizar a sintaxe **SQL** para consultar diversas fontes de dados. 

## Quais dados posso utilizar para criar um Canvas?
- Logs de infraestrutura
- Métricas de aplicação
- Métricas de eventos de segurança
- Métricas de negócio

## Termos importantes para aprender antes de começar a trabalhar com o Canvas

### Workpad ###

Um workpad é o espaço onde você cria e configura elementos visuais, nele você pode configurar o tamanho e plano de fundo por exemplo.

### Data sources ###
Os data sources são as fontes de dados que você utiliza para basear os seus elementos.

### Elementos ###
Os elementos são itens que você colocará no seu workpad, podendo ser filtros, gráficos, tabelas, entre outros.

O **Kibana Canvas** é simples de usar e faz parte dos recursos grátis do Kibana, o que você precisa é pensar em uma maneira de tornar os dados mais claros e amigáveis na hora de colocar no dashboard, ele é um recurso que torna a apresentação de dados mais flexível.

No site da Elastic é possível navegar por vários Dashboards feitos com o recursos Canvas: https://demo.elastic.co/app/canvas#/

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jqngyx91lx8hxcdf6loh.PNG)
CivicGraph - A versioning data store for time-variant graph data.
Tags: eventstore, historicalgraph, arangodb, foxx
Published: 2020-02-01 15:01:01

I would like to introduce an open source, Apache 2.0 licensed project of mine: [https://github.com/CivicGraph/CivicGraph](https://github.com/CivicGraph/CivicGraph)

CivicGraph is a versioned-graph data store - it retains all changes that its data (vertices and edges) have gone through to reach their current state. It supports point-in-time graph traversals, letting the user query any past state of the graph just as easily as the present.

It is a [Foxx Microservice](https://www.arangodb.com/why-arangodb/foxx/) for [ArangoDB](https://www.arangodb.com/) that features VCS-like semantics in many parts of its interface, and is backed by a transactional event tracker. It is currently being developed and tested on ArangoDB v3.5, with support for v3.6 in the pipeline.

CivicGraph is a potential fit for scenarios where data is best represented as a network of vertices and edges (i.e., a graph) having the following characteristics:

1. Both vertices and edges can hold properties in the form of attribute/value pairs (equivalent to JSON objects).
1. Documents (vertices/edges) mutate within their lifespan (both in their individual attributes/values and in their relations with each other).
1. Past states of documents are as important as their present, necessitating retention and queryability of their change history.

Its API is split into 3 top-level categories:

### Document
**Create** - Create single/multiple documents (vertices/edges).
**Replace** - Replace entire single/multiple documents with new content.
**Delete** - Delete single/multiple documents.
**Update** - Add/Update specific fields in single/multiple documents.
**(Planned) Explicit Commits** - Commit a document's changes separately, after it has been written to DB via other means (AQL / Core REST API / Client).
**(Planned) CQRS/ES Operation Mode** - Async implicit commits.

### Event
**Log** - Fetch a log of events (commits) for a given path pattern (path determines scope of documents to pick). The log can be optionally grouped/sorted/sliced within a specified time interval.
**Diff** - Fetch a list of forward or reverse commands (diffs) between commits for specified documents.
**(Planned) Branch/Tag** - Create parallel versions of history, branching off from a specific event point of the main timeline. Also, tag specific points in branch+time for convenient future reference.
**(Planned) Materialization** - Point-in-time checkouts.

### History
**Show** - Fetch a set of documents, optionally grouped/sorted/sliced, that match a given path pattern, at a given point in time.
**Filter** - In addition to a path pattern like in 'Show', apply an expression-based, simple/compound post-filter on the retrieved documents.
**Traverse** - A point-in-time traversal (walk) of a past version of the graph, with the option to apply additional post-filters to the result.

I hope some of you may find this a useful service to address several types of data modelling challenges pertaining to retention and querying of historical graph data.
API Testing with Postman
Tags: beginners, testing, api, postman
Published: 2020-02-01 14:43:45


Recently I've been learning all about API testing with Postman. I've put together a small collection of my favourite tutorials and practice API's for anyone else who is new to API testing and wants to learn more.

### What is Postman?
[Postman](https://www.getpostman.com/) is currently one of the most popular tools used in API testing. It's free for individuals and small teams with wide support for all API types. It can be used for [exploratory testing](https://www.getpostman.com/use-cases/exploratory-testing) and [automated testing](https://www.getpostman.com/automated-testing).

### Tutorials
[The Postman Learning Center](https://learning.getpostman.com/?_ga=2.97498591.151621366.1577222241-1815186062.1576190324)
[Exploring Service APIs Through Test Automation](https://testautomationu.applitools.com/exploring-service-apis-through-test-automation/)
[API - Testing Tips from a Postman Professional](https://blog.getpostman.com/2017/07/28/api-testing-tips-from-a-postman-professional/)
[Testing APIs with Postman: 10 common challenges & solutions](https://medium.com/distant-horizons/testing-apis-with-postman-10-common-challenges-solutions-c4674c78528d)

### Practice API's
[PokéAPI](https://pokeapi.co/)
[Restful-Booker](https://restful-booker.herokuapp.com/)
[JSON Placeholder](https://jsonplaceholder.typicode.com/)
[The Star Wars API](https://swapi.co/)
[Rick and Morty API](https://rickandmortyapi.com/)

### Code Snippets
Check Status code is 200:
```
pm.test("Status code is 200", function () {
    pm.response.to.have.status(200);
});
```
Check response time is below 300ms:
```
pm.test("Response time is less than 300ms", function () {
    pm.expect(pm.response.responseTime).to.be.below(300);
});
```
Check a value is true:
```
pm.test("Check Connected is true", function () {
    var jsonData = pm.response.json();
    pm.expect(jsonData.Connected).to.eql(true);
});
```
Check values within an array:
```
pm.test("First group in list is Test 1", function () {
    var json = pm.response.json();
    pm.expect(json[0].Name).to.eql("Test 1");
    pm.expect(json[0].State).to.eql(3);
    1pm.expect(json[0].Type).to.eql(1);
});
```
Check nested values:
```
pm.test("Check ability is torrent", function () {
    var jsonData = pm.response.json();
    pm.expect(jsonData.abilities[0].ability.name).to.eql("torrent");
});
```
### Newman

[Newman](https://learning.postman.com/docs/postman/collection-runs/command-line-integration-with-newman/) allows you to run and test a Postman collection directly from the command line. Newman can be used for continuous integration.

![newman.gif](https://emelkan.netlify.app/images/newman.gif)

### Postman Alternatives
[soapUI](https://www.soapui.org/)
[Postwoman](https://github.com/liyasthomas/postwoman)
[Insomnia](https://insomnia.rest/)

Cover image: https://icons8.com/
How I coded neumorphic shadow
Tags: html, css, neumorphism
Published: 2020-02-01 14:31:01

---
title: How I coded neumorphic shadow
published: true
description: 
tags: html, css, neumorphism
---

While coding the new UI for my company’s website (calypsu.com)I came across an interesting shadow style which they call neumorphic design. It’s like what you do while sketching, you consider direction of light and the side from which light is coming is lighter and there’s a shadow on the other side.

![light and shadow on object example](https://miro.medium.com/max/3200/1*7Fet-RhSHVUs9CLyqRwKqA.jpeg)

Following similar methodology, they created shadows like the one shown in the image below. Top and left shadows are lighter in color while the bottom and right shadows are darker.

![neumorphic cards on calypsu.com](https://miro.medium.com/max/2650/1*5sEDN_2DZ613q7A9Xd_D5Q.png)

I did some research and realised box-shadows in CSS suppers multiple comma-separated values. Just like this.

.box {
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;

So to code neumorphic shadow as my team wanted, I just had to add two shadows with different colors and different horizontal/vertical offset value. I used rgba(101, 96, 96, 0.533) as color of negative horizontal/vertical offset and rgba(0, 0, 0, 0.4) as color of positiove horizontal/vertical offset. Below is the two line code that you get doing this.

.box {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4), 
  -2px -2px 5px rgba(101, 96, 96, 0.533);
}

Here you go. Experiment with it, use it in your UI projects and do share your creative outputs.
Daily Challenge #178 - Create Phone Numbers
Tags: challenge
Published: 2020-02-01 14:30:17

---
title: Daily Challenge #178 - Create Phone Numbers
published: true
series: Daily Challenge
description: Implement a function that will turn an array into a phone number.
tags: challenge
---
###Setup
Implement a function that accepts an array of 10 integers. Have the function return those numbers as a String in the form of a phone number. Please use the following format for the phone number: `(XXX) XXX-XXXX`. Integers in the array will be no larger than 9. 

###Example
`createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])` // should return `(123) 456-7890`

###Tests
`createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])`
`createPhoneNumber([1, 1, 1, 1, 1, 1, 1, 1, 1, 1])`
`createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])`

Good luck!

***
_This [challenge](https://www.codewars.com/kata/525f50e3b73515a6db000b83) comes from xDranik 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!_
How to fix Page Not Found (404) error in django

Tags: django, python, html, webdev
Published: 2020-02-01 14:24:28

#Django v3.0


Hi, Im new to Django programming language, Now im developing a college project in django, When Im using forms to create login in POST method. If I put it on main page, It's working well. But when I put the forms into inside of another page (about.html) I got this error. I can't fix it. So guys Please help me..

https://stackoverflow.com/q/60006271/11665780

This is the link of my stack overflow post with my codes. Please DEV help me fix it.
🥑🍌🍆 Creating a Stacked Bar Chart – Using React (Hooks) with D3
Tags: react, dataviz, d3, stackedbarchart
Published: 2020-02-01 13:49:03

Hi, I created a new video for "Using React (Hooks) with D3", where we build a stacked bar chart with D3 and create-react-app.

Stacked Bar Charts are nice if you want to visualize your data for individial trends over time, while also being able to compare summed-up values for each time interval.

You can find the code for this video on GitHub:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/15-stacked-bar-chart

You can also find this video on YouTube:
{% youtube bXN9anQN_kQ %}

Enjoy!
View any document in your windows forms application C#
Tags: csharp, dotnet, beginners, winforms
Published: 2020-02-01 13:47:46

Do you want to view/display a document (e.g. PDF, Word, Excel, PPT) in your **windows forms** application? 
It doesn't matter if MS Office or any PDF reader is installed on your machine or not. All you have to do is to implement this <a href="https://downloads.groupdocs.com/viewer/net">API</a> in your (new or existing) .NET application. 
Have a look at following helpful resources:
 
<ul>
<li><A href = "https://forum.groupdocs.com/t/how-to-view-a-file-in-the-winform-application/7661">How to view a file in windows form application?</a></li>
<li><A href = "https://forum.groupdocs.com/t/possibility-of-viewer-integration-with-windows-forms-app/2158">Possibility of Viewer Integration with Windows Forms app</a></li>
</ul>
Use Sass Variables in Javascript
Tags: sass, javascript, vue, tutorial
Published: 2020-02-01 13:41:09

*Sass variables are awesome in that they guarantee that you are using the right colors, dimensions, animations etc. everywhere in your Webapp. It is, unfortunately, not very straightforward to access them in Javascript - and using them from Tauri is an exercise in mind-bending futility.*

> This is a little writeup about a nice and easy solution for accessing Sass variables in your Javascript. 

For this tutorial, we are going to assume you already have Sass working in your project. We're going to be using the VueJS based [Quasar Framework](https://quasar.dev), but the same principle should work with other frameworks as well.

### 1) Add the dependency
We don't need to ship this, as we are going to be using it only at build time.
```bash
yarn add --dev node-sass-json-importer
```

### 2) Update your webpack config
Quasar has a special build setting in `quasar.conf.js` that you can easily modify:
```js
const jsonImporter = require('node-sass-json-importer')
module.exports = function (ctx) {
  return {
    ...
    build: {
      ...
      sassLoaderOptions: {
        sassOptions: {
          importer: jsonImporter()
        }
      }
    }
  }
}
```

### 3) Create your variables
You can save your settings as JSON in `src/css/quasar.variables.json`. Of course you can add whatever you want here, just be sure not to repeat these keyValues in your real SASS file.
```json
{
    "primary": "#3215B3",
    "secondary": "#29269A",
    "accent": "#9C27FF",
    "info": "#3100EC",
    "spotColor" "#C0FF33"
}
```

### 4) Update your SASS file:
Replace your `src/css/quasar.variables.sass` with the following:
```sass
@import "./quasar.variables.json"
```

### 5) Create and register a bootfile `src/boot/sass.js`
With quasar you can put this in a bootfile. 
```js
import sass from '../css/quasar.variables.json'

export default ({ Vue }) => {
  Vue.prototype.$sass = sass
}

export { sass } // in case you need it outside of vue
```
> Don't forget to register the bootfile in your `quasar.conf.js`!

### 6) Use your sass variable in a Vue SFC:
Of course this is just one thing you can do, the approach will work for any number of other things.
```
  methods: {
    sassColor (colorName) {
      return this.$sass[colorName]
    },
    sassSpotColor () {
      return this.$sass['spotColor']
    }
  }
```

### 7) Relax!

---

Image from Unsplash: https://unsplash.com/photos/M6lu8Wa72HQ
The ONE tip you need to actually finish side projects!
Published: 2020-02-01 13:39:33

I'm like every other developer, I start a personal project, get really invested in it for a week or so - then I give up on it. Which isn't ideal.

The last couple months I've been trying to figure out a way to actually finish some of my old projects off. I used to follow the [200 crappy words a day](https://www.alansjourney.com/200-crappy-words/) rule - meaning write at least one line of code a day. This worked well in the beginning, but I began to exploit this where I'd convince myself that just updating the README.md would warrant as writing code which of course, it doesn't. 

I do have some pretty READMEs though.

# Leaving your project in a state of doing
The one thing I've learned that **keeps** me motivated to do one of my side projects is leaving it in a state of doing. So when you're smashing the keyboard and get to a natural stopping point - you fix the bug, finish the feature, hack NASA - **don't** stop, keep on going. 

The hardest part of doing anything, is starting. If you finish at a natural stopping point then you're going to have to find your next starting point, but if you finish at an unnatural stopping point then jumping back into that work is going to be much easier as you already know what needs to be done - you'll likely spend much of the following day thinking about that unimplemented feature and potential ways to improve it.

A good way I enforce this myself is to set a timer, I set the timer for an hour and when that hour is up I completely stop what I'm doing no matter how unfinished the feature is, no matter how close I am to fixing the bug. The fact that I'm so close to getting something done will give me extra motivation tomorrow to jump back into it with a fresh head full of ideas!

Thank you, if you like my rambling check out my personal blogging site at https://codeheir.com/

## This blog is sponsored by <a href="https://www.codecanvases.com">Code Canvases</a>

Make your room come alive  with the coolest programming/coding canvases on the market.<a href="https://www.w3schools.com"> codecanvases.com</a> is the number 1 seller for programming prints with 100% exclusively designed canvases. Get them now whilst they're **20% off!!**
![[https://codecanvases.com/](https://codecanvases.com/)](https://cdn.shopify.com/s/files/1/0311/0151/7955/products/jqbr8djyof6ktl8qopmkpvy4_480x480.png?v=1585483987)
Daily Developer Jokes - Saturday, Feb 1, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-02-01 13:00:10

---
title: "Daily Developer Jokes - Saturday, Feb 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=Saturday%2C%20Feb%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/5e125999cc4b1.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 are clouds made of?

___A___: Mostly linux servers.
 -->
Laravel 6 | Create and Use Custom Facade
Tags: laravel, custom, facades
Published: 2020-02-01 12:57:10

Laravel custom Facades provide a static interface to a class that gives access to an object from the service container, let’s look at Laravel’s Custom Facades. So we can call our function with declaring it static. Cause Facades provide a static interface to a class.

In this tutorial i am going to discuss step by step about laravel custom facades and also we will see how can we use it in our laravel application.

https://www.codechief.org/article/how-to-create-and-use-custom-facade-in-laravel-6
Join Crypto Forum
Tags: cryptoforum, latestcryptodiscussion, bitcoindiscussion, ethereumdiscussion
Published: 2020-02-01 12:41:35


CryptoForum gives you unrestrained access to crypto discussions and debates. Here You can find crypto enthusiasts like yourselves, groups, and communities related to BitcoinNews, BitcoinDiscussion, and much more.

For More Details 👉 https://forum.cryptoknowmics.com