teleren/devto huggingface dataset:
Advent.js🎅🏼| #8: La locura de las criptomonedas
Tags: javascript, spanish, adventofcode, webdev
Published: 2021-12-08 15:28:49

## [La locura de las criptomonedas](https://adventjs.dev/challenges/08)

Invertir en criptomonedas es casi un deporte de riesgo. El otro día hackearon Bitmart y ha hecho que el valor de Bitcoin, y otras monedas, bajase un 25%.

Vamos a escribir una función que reciba la lista de precios de una criptomoneda en un día y debemos devolver la ganancia máxima que podríamos sacar si compramos y vendemos la inversión el mismo día.

La lista de precios es un array de números y representa el tiempo de izquierda a derecha. Por lo que ten en cuenta que **no puedes comprar a un precio que esté a la derecha de la venta y no puedes vender a un precio que esté a la izquierda de la compra.**

Por ejemplo:

```js
const pricesBtc = [39, 18, 29, 25, 34, 32, 5]
maxProfit(pricesBtc) // -> 16 (compra a 18, vende a 34)

const pricesEth = [10, 20, 30, 40, 50, 60, 70]  
maxProfit(pricesEth) // -> 60 (compra a 10, vende a 70)
```

**Si ese día no se puede sacar ningún beneficio**, tenemos que devolver -1 para evitar que hagamos una locura:

```js
const pricesDoge = [18, 15, 12, 11, 9, 7]
maxProfit(pricesDoge) = // -> -1 (no hay ganancia posible)

const pricesAda = [3, 3, 3, 3, 3]
maxProfit(pricesAda) = // -> -1 (no hay ganancia posible)
```

--- 

Mi solución:

{% jsitor https://jsitor.com/embed/zYfU7eLwm %}

---
Puedes seguir a @midudev y estar pendiente de los retos de Advent.js 

{% twitter 1466086678507008003 %}
How to do Unit-testing using Hyperverse
Published: 2021-12-08 15:23:11

If you read my previous [post](https://dev.to/bz/how-to-get-started-on-the-hyperverse-258h)... Well, hello again 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hbhwj7eto7mzvzzal3q.jpeg)

## Introduction to unit-testing
Automated load testing is an essential part when building your own smart module in Hyperverse.

To start unit-testing do the following
**Step 1**
First follow the instructions from my [previous post](https://dev.to/bz/how-to-get-started-on-the-hyperverse-258h) to get your Hyperverse setup
**Step 2**
Go to `/packages/dapplib/tests/hyperverse-tests.js`
**Step 3**
Add your tests into `describe('Hello World Tests', async () => {}`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjhq5d8hjexmgk5jbzk2.png)

**Step 4**
Run the command `yarn test` to see if your tests passed!

## What is Hyperverse?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg1bsqqtol95gomwd30m.png)

[Hyperverse](https://www.decentology.com/blog/composing-the-hyperverse) is an open, blockchain-agnostic, decentralized, marketplace for composable smart contracts. It is a solution specifically architected for decentralized composability at scale.

Hyperverse consists of several smart modules that you can combine to build applications on Web3 without knowing how to write smart contracts. They support several blockchains such as Ethereum, Algorand, and Flow.

You can use the Hyperverse to build a Dapp (Decentralized app) rapidly. Reach out to [Decentology](https://www.decentology.com/) on Discord and they will help you get started.
Dealing with Postgres - ArgumentError: string contains null byte
Tags: ruby, rails, postgres
Published: 2021-12-08 15:22:54

Recently I was testing using Postgres instead of MySQL on a large Rails 6 application. I had created copies of the schemas and removed the MySQL specific attributes from the tables to load in the schema. 

All was well at first! I could run `rails db:create` and `rails db:schema:load` and everything would work perfectly. I could even boot up the app and make a user account.

Time to run the tests!

Out of 3000+ tests, nearly 2/3 failed with the same error...

```ArgumentError: string contains null byte```

Weird. What even is a null byte? A little research showed me a null byte would/should be an escaped character sequence `\u0000`. I tried searching/grepping through the codebase and didn't find that anywhere. 

So what the hell is going on?

Well I found another escaped character pattern, `\x00`. This specific escaped character sequence is a hexadecimal color, but the double 0 means that the color it should represent has it's bytes set to 0, which is null. So Postgres would see this string coming in and translate it from hexadecimal to escaped unicode which just so happens to turn into `\u0000` and raise the `string contains null byte` error.

Grepping the code base revealed this `\x00` pattern used in a few places through model callbacks. This was being used to delineate strings, so I changed the delimiter to `\n\n` and now I no longer get the null byte error!

Sometimes taking over an existing code base... you find awfully strange things!
PowerShell Inventor Jeffrey Snover Interview
Tags: news, webdev, security, cloud
Published: 2021-12-08 15:13:16

We had a great talk with Jeffrey Snover, Microsoft Technical Fellow, and CTO for Modern Workforce Transformation. Snover is the inventor of Windows PowerShell, an object-based distributed automation engine, scripting language, and command-line shell.

[The Interview](https://evrone.com/jeffrey-snover-interview)
Brag House: Using Python to build a social platform for gaming
Tags: python, webdev, programming, gamedev
Published: 2021-12-08 15:11:31

Brag House is a platform that gives casual college gamers the experience of being professional esports gamers. Built on long-standing college rivalries, they have created an intramural experience that centralizes all the features of professional esports, from commentary to in-game interviews and game analyses. Brag House is providing a community where students can compete, talk trash, and win prizes.

By the time Evrone joined the project, the client already had a prototype in the form of an application for mobile devices. Most of the mobile backend used AWS Amplify, which limited certain functionality. So the client decided to use Python to create an MVP, rewriting the backend of the application in Django. They turned to Evrone for help, as [we have vast experience in Python project development](https://evrone.com/brag-house) and the expertise to provide continuous integration for Django projects.
How to use Props in React
Tags: react, webdev, beginners, programming
Published: 2021-12-08 14:56:03

Basically, **Props** are arguments passed into React components. They are just like a functional arguments in JavaScript and attributes in HTML.

Word **Props** means the **properties of a component**

- A component `Text` with attribute `text`
```js
<Text text="World!"/>
```

- `Text` Component
```js
function Text(props){
  return(
    <h1>Good, {props.text}</h1>
  )
}
```

{% youtube https://www.youtube.com/watch?v=8i5C4dSRZik %}
What is User Interface(UI) and User experience(UE) ?
Published: 2021-12-08 14:55:24

## User Interface:
   The UI stand for "User Interface". User Interface concerned with look a feel of a website and app etc. UI will make it delightful and enjoyable to use. User Interface is anything a user may interact with to use a digital services. User Interface design is the process designers use to build interface in software or computerize devices.Some various types are given:
- **Graphical User Interface**: a computer program that enables a person to communicate with a computer the use of symbols, visual, metaphors, and pointing devices. It consists of the buttons user click on, text read,view images, sliders all the items user interacts with. Any sort of visual element, interaction, or animation must all be designed.  

- **Voice User Interface**: that allows the user interact with a system using through voice. It means no swiping on screen and no hand involved.Large tech Companies, such as Amazone, Apple, Google and Microsoft, have built advance voices assistants (Alexa, Siri) that interpret speech using natural processing language technology.

- **Menu-Base Interface**: some operating systems are designed with a menu-bases user interface. Its provide users a range of command in menu or list from via drop-down or pull-down, full screen, or pop-up.


## User Experience:
  UX stands for "User Experience". User experience is concerned with creating with simple, useful and delightful  experience for the app user. UX is how person feels especially in the context of a website, web application and digital technology. We are referring to how people interact with a product. For example when we want to turn on light in our room, we interact with a light switch. The design of the switch-including the color, materials and physical appearance impact on how we feel about the interaction.Three main types of user experience:

- **Researcher**: user experience research is the systematic study of target users and their requirements, to add realistic contexts and insights to design processes. Some responsibilities are shown:

>- User Research

>- Testing

>- UX Methods

>- Analysis & Data

- **Strategists**: UX strategy is the plan and approach for a digital product. UX strategy is the rationale behind a product and is a central part of the UX process. Some responsibilities are shown:

> - UX Vision & Strategy
> - Information Architecture
> - Product & Service Design
> - Coordinating UX related teams
 

- **Creators**: as creators of content or design, Creators have to take user behavior into account, usually through close coordination with Researchers and Strategists, who will provide valuable insight. Some responsibilities are shown:

> - User Interface
> - Interaction Design
> - Visual Design
> - Motion Design
> - Copywriting & Content
You must use augroup with autocmd in vim | Here's how
Tags: linux, vim
Published: 2021-12-08 14:49:50

---
title: You must use augroup with autocmd in vim | Here's how
published: true
description: 
tags: ['linux', 'vim',]
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptr6866bwtrgpylk2dbp.png
canonical_url: https://waylonwalker.com/vim-augroup/
---
If you are running vim autocmd's without a group, you're killing your performance.  Granted your probably not sourcing your vimscript files with autocmd's too often, but every time you source that vimscript you are adding another command that needs to run redundantly.

{% youtube 2ITTn4Dl0lc %}

## This is what I had
_Not silky smooth_

For **WAAY** too long I have had something like this in my  vimrc or init.vim. It formats my python for me on every save, works great except if I source my dotfiles more than once I start adding how many times black runs.

``` vim
autocmd bufwritepre *.py execute 'Black'
```

## Why is a bare autocmd bad
_let me demonstrate_

Lets create a new file called `format.vim` and give it the `:so %`. Works great, it starts telling me that its formatting.

``` vim
autocmd bufwritepre *.py :echo("formatting with black")
```

**BUT** as every time I give it the `:so %` it formats an extra time on every
single save.

## Setting up an augroup

I've been told I need an `augroup` to prevent duplicates. So I did it, and nothing changes, it still ran as many times as it was sources on every save.

``` vim
augroup black
    autocmd bufwritepre *.py :echo("formatting with black")
augroup end
```

## Clearing out the augroup

What you need to do is clear out all commands in the augroup with `autocmd!` right at the beginning of the group.

``` vim
augroup black
    autocmd!
    autocmd bufwritepre *.py :echo("formatting with black")
augroup end
```

## My Final silky smooth setup

Now this is what I have in my dotfiles for a silky smooth setup that does not run automds like crazy as I am making changes to my dotfiles.

``` vim
augroup waylonwalker
    autocmd!
    autocmd bufwritepre *.py execute 'PyPreSave'
    autocmd bufwritepost *.py execute 'PyPostSave'
    autocmd bufwritepost .tmux.conf execute ':!tmux source-file %' autocmd bufwritepost .tmux.local.conf execute ':!tmux source-file %'
    autocmd bufwritepost *.vim execute ':source %'
augroup end
```


## Related Links

* [vim-help](https://vimhelp.org/autocmd.txt.html#%3Aaugroup)
* [youtube video](https://youtu.be/2ITTn4Dl0lc) for this article
How to do usability testing when building your smart module on the Hyperverse
Published: 2021-12-08 14:47:18

## What is the Hyperverse?
[Hyperverse](https://www.decentology.com/blog/composing-the-hyperverse) provides a decentralized path to monetization for contributors. You can contribute by making smart modules that others can use. If you contribute to, or stake on, a fee-based Hyperverse Smart Module in any capacity, you can sell or collateralize your future income represented by an NFT (Non-fungible token).

## Why does testing matter?
With smart contracts you usually won't have that many do-overs or any if at all. When a smart contract is deployed it is in most cases immutable. So you want to make sure that your code works as intended.
Building your smart module on the Hyperverse is useful as you won't have to pay thousands of $ to get your code audited. There will be security auditors who will do it for you to ensure that your module is secure and ready to be deployed on the blockchain you have decided to use.

## How to get started
**Step 1** Click on [this link](https://docs-hyperhack.decentology.com/guide-building-for-hyperhack/cloning-the-hyperhack-repository-from-github) and follow the setup instructions.
After setup and running the app, you should see something like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4kbhqlgr3qzg90s5fr9.png)

**Step 2**
Go to 'Playground' on the left side of the screen and choose a module to play around with and see how it works. You can also watch [this video](https://www.youtube.com/watch?v=BmfV3IwKxEk) to get a feel of how it works.

**Step 3**
Start setting up your own module in the same structure like the ones available in the Hyperverse and you will be able to use your UI Harness for your module to see if your code works as intended.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc6byjaxbxi7wt75cdwq.png)

**UI Harness:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emdcfw9q6saw8oe8vn6a.png)
Reactify your checkbox !
Tags: react, javascript
Published: 2021-12-08 14:45:06

In this article I will provide you with three examples , where as each will be a checkbox related :

- **Example 1** – simple checkbox (useState)
- **Example 2** – simple checkbox (useReducer)
- **Example 3** – advanced checkbox (useState, useEffect, useRef) + localStorage

**Example 1 & 2**
{% codesandbox checkbox--usestate-vs-usereducer-f5ppc %}

> **NOTE** : just switch the number of N between 1 & 2 for checkboxN (also explained index.js) whilst importing `import App from "./checkboxN";`

**Example 3**

{% codesandbox checkbox--usestate-useeffect-useref-d9lbr %}

---

If any typo(s) found or suggestions could made , please leave a comment below !
Create Hello World Discord Bot with discord.js
Tags: typescript, discord
Published: 2021-12-08 14:25:40

A couple of days ago I created a new Discord server(This is the first time to create it) to communicate with school alumni.

I just tested discord.js since I may need to create a bot for the Discord server to do something.


In this post, I will show you how to create a Hello World bot that I post `hello` and a bot replies `world` to a channel.

### Discord developer portal
https://discord.com/developers/docs/intro

### discord.js
https://discord.js.org/#/


## Step 1 Set up a bot
discord.py has a good page for this step.
https://discordpy.readthedocs.io/en/stable/discord.html 


## Step 2 Create a project

### discord.js requires node 16.6.0+ 

```zsh
$ yarn init -y
# if you use npm
$ npm init -y
```

install packages
If you would like to use js, skip `yarn add -D/npm install -D`.
In addition, dotenv is optional. If you want to test discord.js quickly, you won't need to install dotenv and you will need to hardcode the `Token`
```zsh
$ yarn add discord.js dotenv
$ yarn add -D typescript ts-node
# for npm
$ npm install discord.js dotenv
$ npm install -D typescript ts-node
```
## Step 3 Write a hello world bot

if you use js, you need to use `require` instead of `import`;

`.env`
```
TOKEN=xxxxxxx your token xxxxxxxxx
```

```ts
import DiscordJS, { Intents } from "discord.js";
import dotenv from "dotenv";
dotenv.config();

const client = new DiscordJS.Client({
  intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES],
});

console.log("Starting...");

client.on("ready", () => {
  console.log(`the bot is online!`);
});

client.on("messageCreate", (message) => {
  console.log("messageCreate");
  // get author info
  const authorId = message.author.id;
  const authorName = message.author.username;
  console.log(`author: ${authorName}`);
  if (message.content === "hello") {
    message.reply({content: "world"});
  }
});

client.login(process.env.TOKEN);
```

## Step 4 Try a bot

run the bot
```zsh
$ ts-node index.ts
# if you use js
$ node index.js
```

Post something to a channel. If you post `hello`, the bot replies `world`. At the same, time you can see your account name and your account id in your terminal.
React Chart - Display data in charts
Published: 2021-12-08 14:25:24



###Display data in charts / graphs / diagrams

- [chartify](https://github.com/kirillstepkin/chartify) - React.js plugin for building animated draggable and customizable charts.
- [essential js 2 charts](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/charts) - Beautiful and interactive charts & graphs for react.
- [jscharting-react](https://github.com/jscharting/jscharting-react) – React chart component offering a complete set of chart types and engaging data visualizations with [JSCharting](https://jscharting.com/).
- [react-chartist](https://github.com/fraserxu/react-chartist) - React component for Chartist.js.
- [react-charty](https://github.com/99ff00/react-charty) - [demo](https://99ff00.github.io/react-charty/) - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
- [react-chartjs-2](https://github.com/jerairrest/react-chartjs-2) - Common react charting components using Chart.js 2.0.
- [react-d3-components](https://github.com/codesuki/react-d3-components) - D3 Components for React.
- [react-dazzle](https://github.com/Raathigesh/Dazzle) - Dashboards made easy in React JS.
- [react-google-charts](https://github.com/RakanNimer/react-google-charts) - React-google-charts React component.
- [react-highcharts](https://github.com/kirjs/react-highcharts) - React-highcharts.
- [react-sigmajs](https://github.com/dunnock/react-sigma) - Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
- [react-sparklines](https://github.com/borisyankov/react-sparklines) - Beautiful and expressive Sparklines React component.
- [react-timeseries-charts](https://github.com/esnet/react-timeseries-charts) - Declarative timeseries charts.
- [react-vis](https://github.com/uber/react-vis) - Data visualization library based on React and d3.
- [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3.
- [rumble-charts](https://github.com/rumble-charts/rumble-charts) - React components for building composable and flexible charts.
- [victory](https://github.com/FormidableLabs/victory) - Data viz for React.
- [semiotic](https://semiotic.nteract.io/) - Semiotic is a data visualization framework for React.
- [DevExtreme React Chart](https://devexpress.github.io/devextreme-reactive/react/chart/) - High-performance plugin-based chart for Bootstrap and Material Design.
- [Smart React Chart](https://www.htmlelements.com/react/demos/chart/overview/) - Feature complete Charting library.
- [react-muze](https://github.com/chartshq/react-muze) - React wrapper for [muze](https://muzejs.org/)(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)
- [React Charts](https://bestofreactjs.com/catalog/react-charts_newest_1) - The Best 104 React Charts Libraries
Question: Unusual API data structure
Tags: webdev, api
Published: 2021-12-08 13:58:02

Hi,

I am looking for unusual data structures in API's that are open to the public.
It's not my intention to shame or flame any API vendors I'm looking for some examples as use-cases for a library I'm building.

For example I once ran into this API structure when there were validation errors:
```json
{
  data: null,
  errors: {
    fieldName: [{
      description: "some friendly message",
      code: 000
    }],
    otherFieldName: [/* ... */]
  }
}
```
The challenge here was that the fieldnames aren't an array and we didn't know the fieldnames up front.
In our case we were mapping it to C# so we wrote a custom converter mapping it to a `List<FieldValidationError>`.
```cs
public sealed class FieldValidationError {
  public string FieldName { get; set; }
  public string Description { get; set; }
  public int ErrorCode { get; set; }
}
```
And this made the error logging a lot more straight forward.

Sadly I don't remember which API this was, and I think it was a closed system anyway.

---

What I'm looking for in a nutshell:

- A link to Documentation that is open to the public
- A short explanation why it's unusual
  perhaps with an example from JSON/XML to the eventual model in code you'd wanted it to look like or map it to (can be any language).
Welcome to My Dev.to Blogsite
Tags: sdlc, devops, documentation
Published: 2021-12-08 13:58:00

Hello, holla, Ola, Dumelang!!!

This here is me, once again, attempting to rehabilitate one of my more irredeemable characteristics.... and thats Documentation 

We've all experienced it. The deadlines, the sometimes disordered nature of team development, the over-reliance on github/bitbucket e.t.c cause 'The information is already there anyway hurr durr durr, we dont need none of that documawhat what you keep trying to get out of us'...

Truth is, from my very 1st year in engineering undergrad, one of the most pivotal foundations of any engineering project, regardless of its stream, should be the documentation of each step taken, including both the wins and the losses, hell if those niggly undebuggable (is this even a word though??) niggles when coding. We are all guilty of it; and I tend to think Software developers are perhaps guiltiest of this, myself included :(

So, this blogsite, going into 2022, will serve as the coup d'état of my usually unattainable, far too lofty new years resolutions.

**I WILL NOT FAIL. I WILL PERSEVERE. I WILL CONQUER. THROUGH THE TEARS AND THE EYE STRAINS. 

I WILL DOCUMENT **

Thank you for listening to my rant...
How to get started on the Hyperverse
Published: 2021-12-08 13:56:34

Are you are web2 developer and want to start building in one of the hottest industries web3, NFTs, and DeFi?

**Follow this guide to learn how to get started.**
**Step 1** Click on [this link](https://docs-hyperhack.decentology.com/guide-building-for-hyperhack/cloning-the-hyperhack-repository-from-github) and follow the setup instructions
**Step 2** Begin changing the client by editing `/packages/client/src/tribes/tribes.tsx`
**Before**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cte3522e1u46mmtyhr0.png)

**After**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pk3lx55wtrau8xq1znk.png)

**Step 3**
After you have changed your client into your desired design. You can begin changing which module in the Hyperverse you want to use.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zx5myj7p0myrvmkwrc0u.png)

[Hyperverse](https://www.decentology.com/blog/composing-the-hyperverse) is a marketplace with composable smart contracts which enables you to reuse smart contracts that have already been security audited and deployed on a blockchain for you. It enables you to have a working Dapp (Decentralized app) in less than 15 minutes.