teleren/devto huggingface dataset:
Installing near-cli on Linux
Published: 2021-04-28 03:14:47

Recently started learning about [Near Protocol](https://near.org/) and while I was completing the exercises at [Near Academy](https://near.academy), I got some error when I was trying to install [near-cli](https://github.com/near/near-cli) on Arch Linux.

For installing `near-cli` you must have [Node.js](https://nodejs.org) and [npm](https://www.npmjs.com/) on your system. You can install them directly from the repositories of your distribution.

After running `npm install near-cli -g` I was getting the following error:

```sh
npm ERR! code 128
npm ERR! command failed
npm ERR! command git ls-remote ssh://git@github.com/ethereumjs/ethereumjs-abi.git
npm ERR! Warning: Permanently added 'github.com' (RSA) to the list of known hosts.
npm ERR! git@github.com: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR! 
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
```

It was an authentication problem with GitHub. One possible solution was to create a new SSH key, add it to the `ssh-agent` and to my GitHub account. I did it but didn't work as I was getting a different error, even if I was running the command as the `root` user:

```sh
npm ERR! code 128
npm ERR! command failed
npm ERR! command git clone ssh://git@github.com/ethereumjs/ethereumjs-abi.git /root/.npm/_cacache/tmp/git-clone-e04f6db7 --recurse-submodules --depth=1
npm ERR! fatal: could not create leading directories of '/root/.npm/_cacache/tmp/git-clone-e04f6db7': Permission denied
```

I tried to install `near-cli` on a virtual environment with Fedora 32 where the latest version of Node.js was 12.22.1, it worked without any problem. On Fedora 33 and Debian Buster I was getting the same error.

## Solution
Manually change npm's default directory, according to the Node.js documentation, is the way of [Resolving EACCES permissions errors when installing packages globally](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally#manually-change-npms-default-directory).

After installing Node.js and npm:

Create a directory for global installations:
```sh
$ mkdir ~/.npm-global
```

Configure npm to use the new directory path:
```
$ npm config set prefix '~/.npm-global'
```

Open or create a `~/.profile` file and add this line:
```sh
export PATH=~/.npm-global/bin:$PATH
```

Update your system variables:
```sh
$ source ~/.profile
```

Now you can install `near-cli` by running the following command without `sudo`:

```sh
$ npm install near-cli -g
```

You're good to go! Now you have the tool you require for completing the exercises at [Near Academy](https://near.academy).
15 Awesome CSS Button Generator Websites
Tags: webdev, beginners, productivity, codenewbie
Published: 2021-04-28 03:14:13

Here I list awesome CSS button generators, which can generate beautiful buttons for your project quickly. You can customize the buttons as you like, the sites will generate the CSS code for your designs, which can be copy-pasted into your projects. 

1. [css3buttongenerator.com](https://css3buttongenerator.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glmxf71r4ivy37yp8jeg.PNG)
2. [bestcssbuttongenerator.com](https://www.bestcssbuttongenerator.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in9t1zsgwe49wyyk34ez.PNG)
3. [cssbuttoncreator.com](https://cssbuttoncreator.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqvxn20w89c85bp1mkpp.PNG)
4. [cssportal.com](https://www.cssportal.com/css3-button-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrjbglxxcrfbcutallkn.PNG)
5. [Loading.io](https://loading.io/button/generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5yr8rjducppqftburmp.PNG)
6. [fromdev.com](https://tools.fromdev.com/css-button-generator.html)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4t1iamx8dzybedxwly5z.PNG)
7. [html-code-generator.com](https://www.html-code-generator.com/css/button-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xmcmrtpjfisjv07zbh4.PNG)
8. [cssgenerators.net](https://www.cssgenerators.net/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7q6arxcd7xsj8sckcdv.PNG)
9. [buttonoptimizer.com](http://buttonoptimizer.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oogul1ts3186ot4xef9u.PNG)
10. [dextronet.com](https://www.dextronet.com/css-buttons-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/906265hjfmxcsqc3ta4z.PNG)
11. [sciweavers.org](http://www.sciweavers.org/i2style)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvzd405mmsm83qvzkb7a.PNG)

###Flip Switch
1. [cssportal.com](https://www.cssportal.com/css3-flip-switch/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdi34whfik0dmfnsg642.PNG)
2. [proto.io](https://proto.io/freebies/onoff/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdi34whfik0dmfnsg642.PNG)
3. [html-code-generator.com](https://www.html-code-generator.com/css/radio-button-checkbox)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ksjn2s5gg2jfcbdnvt9.PNG)
4. [Bun](https://bun.js.org/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhc4459o2pdswmkmov2k.PNG)

{% link https://dev.to/kiranrajvjd/12-simple-button-hover-animation-using-css-1ff1 %}
{% link https://dev.to/kiranrajvjd/10-best-javascript-based-github-repos-for-web-developers-49pc %}
{% link https://dev.to/kiranrajvjd/12-simple-css-hover-effects-95d %}
{% link https://dev.to/kiranrajvjd/15-awesome-css-animation-resources-4mhi %}
{% link https://dev.to/kiranrajvjd/10-awesome-color-gradient-resources-for-your-next-project-9ji %}
Job Opportunities - Freelancing Developer 
Tags: hiring, career
Published: 2021-04-28 02:26:23

## About Us
Established in 2020 by Kayinajah Inyang, Krowser Web Services (KWS) creates hybrid applications built with creativity for more speed & data saving while protecting your privacy.

Krowser Web Services has raised a total of $62.3M in funding over 9 rounds. Our latest funding was raised on Mar 22, 2021, from a Series A round.

LinkedIn: https://linkedin.com/company/krowser

Website:
http://kws.uk.to

CrunchBase: https://www.crunchbase.com/organization/krowser-web-services

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

## About The Opportunity
As a way of helping upcoming developers, we are recruiting freelancing developers, they will find their clients and complete the job on behalf of Krowser Web Services and keep all the revenue.



We will also provide them with some of the necessary tools they need and funding to obtain the core software development certifications.

##Location
Remote, you can be based in any country of the world.

## Skill & Qualifications
Basic programming skills, as this is an entry-level job.


## How To Apply
Apply on LinkedIn: https://www.linkedin.com/jobs/view/2485126700

Or 

Send your CV to: krowser@aol.com

_Please feel free to leave questions in the comments section._
Managing loading status for React is much easier with loadio
Tags: react, npm, javascript, webdev
Published: 2021-04-28 02:21:52

## Introduction
Many projects contain asynchronous calls. The operation of these may be unaware of the user, or the user may need to know about that status. 

In order to notify the user of this, the loading component is shown on the screen and the user is informed that something is running. At this point, the management of asynchronous methods should be managed in various ways and the component should be demonstrated.

Today, I will show you how you can handle this in an easy way with loadio.

## [loadio](https://www.npmjs.com/package/loadio)

This package is a simple to use tool that allows you to manage status information with promises.

Install it with:
```shell
# Yarn
$ yarn add loadio

# NPM
$ npm install loadio
```
Wrap the method you want to follow the status information.
```js
import { withPool } from "loadio"; 
const fetch = withPool(global.fetch);
```

Or add promise directly into it with PoolManager

```js
import { PoolManager } from "loadio"; 
PoolManager.append(fetch("get/data"));
```

And that's all. You can easily view the status on your home page by calling the new method you have wrapped in place of the old one.
```js
import { useStatus } from "loadio";
function HomePage() {
  const status = useStatus();
  return (
    <>
      {status.isLoading ? "Loading..." : "Loaded!"}
      <button onClick={() => myWrappedfetch("get/data")}>Get</button>
    </>
  );
}
```

It also generates a percentage of information according to the number of tasks.
```js
{
    isLoading?: boolean,
    percentage?: number,
    runningTasks?: number
}
```

A complete example with React Component is as follows.

```js
import React from "react";
import { withPool, withStatus } from "loadio"; 
const fetch = withPool(global.fetch);

class HomePage extends React.Component {

  render(){
    const { isLoading, percentage } = this.props;  
    return (
      <>
        {isLoading ? "Loading..." : "Loaded!"}
        {percentage + "%"}
        <button onClick={() => fetch("get/data")}>Get</button>
      </>
    );
  }
}
export default withStatus(HomePage);
```
## Demo
[![Edit Example usage - loadio](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/example-usage-loadio-loz1y?fontsize=14&hidenavigation=1&theme=dark)

## Conclusion 
By wrapping promise methods or else adding them directly, we have made it easy to show the loading status with percentage information.
You can view the details of the package by clicking [here](https://www.npmjs.com/package/loadio).
Thanks.
Collaboration Skills
Tags: beginners, devjournal, womenintech
Published: 2021-04-28 02:11:23

The idea of the CodeCollab is a collaboration, how we work together, how we communicate, and our dynamics in how we interact. Our senior developer reminds us of this each sprint meeting when we start to get frustrated. The idea seems easy enough, but in reality, it can be challenging to collaborate with others. Each person on a team has communication preferences, different time zones, different backgrounds, and personal goals.


As I am learning, collaboration won't happen without clear communication, actively listening to others, taking responsibility for mistakes, and respecting the diversity of your teammates. ​It is also helpful to continuously develop asynchronous communication and give clear context to the question you are asking with an empathetic tone. So far, I see a lot of growth happening in myself and my team as we continue collaborating on the ShiftWork App.


We hold regular meetings, so we have a shared and clear vision of the direction we’re going. Each of us knows the full scope of the project and what we’re accountable for. We use GH collaboration tools for these purposes. This allows each of us to perform efficiently. What’s obvious for you isn’t always obvious for others. Speaking up and sharing ideas are essential to solving problems as they arise. I am always amazed at how much you can learn from a short conversation with your team. Each person will bring different perspectives and views. Constant communication ensures that everyone is on the same page. It’s fuel to keep the creativity of the development process alive. Team collaboration drives creative thinking and effective brainstorming. It allows you to look at problems from multiple angles and points of view.


It's necessary to learn how to understand various perspectives and manage priorities from everyone in the group. I am learning how to give and receive feedback. I am learning to assume that the person giving feedback has the best intentions. When I give feedback, I try to give it clearly and with consideration.


I can say with confidence that my team has what is needed to collaborate successfully. We have a cooperative spirit and mutual respect.


Photo by <a href="https://unsplash.com/@mitchel3uo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mitchell Luo</a> on <a href="https://unsplash.com/s/photos/collaboration?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Scaling the y-axis of Kibana visualizations
Tags: datavisualization, elastic, elasticsearch, kibana
Published: 2021-05-05 18:22:32

---
title: Scaling the y-axis of Kibana visualizations
published: true
date: 2021-04-28 02:00:00 UTC
tags: datavisualization,Elastic,Elasticsearch,Kibana
canonical_url: https://gerg.dev/2021/04/scaling-the-y-axis-of-kibana-visualizations/
---

Have you ever googled something so many times without success that you thought it must be impossible, only to later realize that you just weren’t using the right words? It happened to me this week, so I’m posting this in the hopes that someone else using the same language I was using might find their answer sooner.

The issue came up when visualizing a metric in Kibana where the value was recorded in seconds. The problem is that most people can’t look at values like “1000 seconds” or “2.4 million seconds” and intuitively understand that those are about 16 minutes and 4 weeks, respectively. So, I started googling around for how to scale the y-axis in Kibana.

As it turns out, to most people, to “scale” the axis means to adjust the upper and lower bounds, or converting between log and linear axes. The former I’d have called “range; the latter are two different scales, but with “scale” here being a noun. I was using “scale” as a verb, meaning to change the units. I didn’t find what I was looking for until I literally searched for “divide y-axis”. Finally I found [this Stack Overflow question](https://stackoverflow.com/questions/29364868/dividing-the-values-of-x-axis-in-kibana-4) that gave me a very simple solution. In the advanced JSON input for the y-axis, just enter the following to convert a value in seconds into days:

```
{"script":"(_value)/86400"}
```

Easy peasy. Obviously, the 86400 can be swapped out for any other scale factor you might need. It is also a good idea to enter a custom label for the axis, to make the units explicit to readers.

I would love to know if there were a way of telling Kibana that the y-axis value had units of seconds and to automatically scale as needed to the most readable units based on the range, as other plotting software can do. In the meantime, this hard coded mapping will get me something more readable, at least for a particular range of values.
É necessário voltar ao começo
Tags: ctfl, tester, qa, beginners
Published: 2021-04-28 01:54:24

Já vi algumas pessoas falando sobre as dificuldades de pensar sobre **o que testar** ou **como testar.** 

Não sei em qual contexto essas pessoas estão, qual o ciclo de vida adotado pelo projeto em que elas estão envolvidas nem sequer por qual nível de teste elas são responsáveis. Mas de uma coisa eu sei pois senti na pele: as bases são importantes.

As bases em teste de software estão reunidas em um documento que parece um tanto quanto confuso na primeira leitura 😅 mas que é útil depois que entendemos melhor algumas coisas que estão nele: o **Syllabus** utilizado no exame CTFL Foundation administrado pelo [ISTQB](https://www.istqb.org/certification-path-root/foundation-level-2018.html). 

*É obrigatório ler esse documento pra entender como testar software?* Não, não é. 
Afinal, o google está aí com muita informação disponível. Você pode sair procurando o que pensa ser importante. Mas vai ser tipo clicar no botão *"Estou com sorte"* e torcer pra acertar o caminho.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7kfudvqq8cptc0b0x4c.PNG)

O Syllabus condensa técnicas, situações, conceitos e práticas que todo e qualquer testador utilizou ou ainda vai utilizar na rotina de trabalho (alguns usam e nem tem ideia disso). Então se alguém já teve esse trabalhão porque não aproveitar e utilizar a nosso favor?

Dito isso: 
- não adianta querer aprender o mais novo, rápido e incrível framework que contribui com automação de testes
- não adianta participar do bootcamp que vai te ensinar como construir e testar seu software
- não adianta pagar uma grana para participar de um grupo seleto que vai te revelar os segredos de como ser um tester melhor. 

Para aproveitar tudo isso **é necessário voltar ao começo** e reforçar suas bases em teste de software - que assim como qualquer outra profissão - precisa de estudo e aprimoramento constante.

Pretendo escrever sobre alguns conceitos que estão nesse documento e em alguns livros por ai. Mas por ora, não importa se você (ainda) não tem as bases:

> O agora é a única coisa que vale
> Se erra, conserta, volta pro tom e segue o baile

{% youtube iQSkfPg8AF4 %}

Ficou pensativo/a e quer dar uma olhada no documento? Ele está disponível [aqui](https://bstqb.org.br/b9/doc/syllabus_ctfl_2018br.pdf)
Deploy a node server to Vercel!
Published: 2021-04-28 01:36:28

# Vercel 😏

Vercel, the creator of Next js. But isn't that where you are supposed to host your frontend applications.
Yes, but not just that!
We can host a node backend applications on Vercel. Vercel essentially allows running a server on Vercel.

## Deploying to Vercel
Create a free account on [Vercel](https://vercel.com/signup). (Preferably, use a provider where the repository for code is hosted)

Add a *vercel.json* file in the root folder.

```JSON
{
  "version": 2,
  "name": "name-of-your-vercel-app",
  "builds": [
    { "src": "script.js", "use": "@vercel/node" }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/index.js" }
  ]
}

``` 

Now create a [new project](https://vercel.com/new)on Vercel.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619367273440/M5T6ixFSK.png)
When setting up the repository, we need to select the **Other** option in Frameworks to deploy a backend server. You can also configure Environment variables at this stage.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619367594009/y8Y7I6ts6.png)
And that's it you have deployed your server blazing fast 🚀.

If you are a developer enjoying Vercel to deploy your front-end applications, you will definitely love Vercel for hosting your backend node applications.

What's your go-to way for deploying a node server? 🙌🏻

Source repo: [mongo-CRUD-basics](https://github.com/cryptus-neoxys/mongo-CRUD-basics)
Deployed app: [https://mongoose-crud.vercel.app/](https://mongoose-crud.vercel.app/)
Feel free to reach out to me on [Twitter](https://twitter.com/cryptus_neoxys) and connect with me on [LinkedIn](https://www.linkedin.com/in/cryptus-neoxys/)
AWS - Dev associate: EC2 (Part 2).


Tags: aws, cloud
Published: 2021-04-28 00:19:20

So in part 1 we got our EC2 instance up and running. Now it’s time to connect to it from our local machine.

EC2 offers multiple ways to connect to an EC2 instance, but I think SSH provides the best experience. So let’s open up a console!

Remember the key-pair we downloaded at the end of part one? 
I hope you still have it because we are going to use it.

BUT! We won’t be able to use it if it’s publicly viewable.  So we’ll run the command:

```bash
chmod 400 [keypair.pem]
```

Which will set the permissions for that file so that only its owner can read it. Following that we’ll grab the instance public ip from the AWS console:

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

We’ll now SSH into the instance with the following command:

```bash
ssh -i “[keypair.pem]” [our user]@[public IPv4 DNS] 
```

In this case, since we have picked the default options, we’ll log with “ec2-user”, since this is the default owner of the AMI we have chosen. 
You will probably receive a message stating that the authenticity of the host could not be established, and receive a prompt to answer whether you still want to connect. Answer yes. 
With that, we are in. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24ygb98i4dr2vhuhasz4.png)

Now, Before doing anything else, we’ll run the command
```bash
sudo su
```
To escalate our privileges, so we don’t have to include sudo in the following commands. 
By now, the command line interface has probably prompted you to run 
```bash  
yum update-y 
``` 

to update packages, so let's just do that.

After it's done, let's install the apache package which will enable us to launch an apache server

```bash
yum install httpd –y
```

Once it's finished, let's start it with
```bash
systemctl start httpd 
```

With this Our server apache is up and running. But just for fun let’s add some content to it before checking it out. So we'll enter 
```bash 
cd /var/www/html
```
Once inside, we’ll create an index.html file. I don’t want anything fancy so let just 
```bash 
nano index.html
```
And we'll write some very basic html into it.

```html
<html>
 <body>
  <h1>
   Hello Cloud! 
  </h1>
 </html>
</body>
```

Now back on the AWS console we can grab our Instance’s ip and paste it on our browser.

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

And with that, our web server is up and displaying our html code. While rather simple, this two-parter will be the basis of many future posts. If all of this seemed too easy, don’t worry: it’ll only become more complex from now on.
Open all conflicted files from Command Line
Tags: todayilearned, git
Published: 2021-04-28 00:07:39

A few days ago I learned more about the `xargs` command.

For a brief explanation, `xargs` will receive a chunk of text and transform it in a list of arguments and pass it to a command that you can specify.

For instance, if you write in the terminal:
```
echo -e "file1\nfile2"
```
You will see this result:
```
file1
file2
```
We now could pipe this into `xargs` and do something with it, say, create files with those names:
```
echo -e "file1\nfile2" | xargs touch
```
We just created two files whose names are file1 and file2.

There are many things you could do with xargs, write `xargs -h` to see more (the `-I` flag is specially interesting).

But what happened today was that I decided I wanted to open all files that had a conflict after an attempted `git rebase -i` command.

To do that, we first have to find a way to list all the files with a conflict. I'm pretty sure there is nothing git **can't** do, and of course what we want is very possible.

The command `git diff` can receive the flag `--name-only`, which will give you just the names of the files that `git diff` would have looked at.

```
user@pc:~$ git diff --name-only
app/this-guy
config/this-other-guy
user@pc:~$
```
This is just what we wanted! We can now easily pipe it into `xargs` and call a code editor, for example vim:
```
git diff --name-only | xargs vim
```

Xargs can be very useful, this is just one use case. Maybe you want to append a specific extension to a bunch of files? You could use find, ls and grep, just to pass them to xargs with a mv command, for instance.

I hope someone else also learns a little with my little "playing around in terminal" thing.

Thanks for reading and have a nice day (: