teleren/devto huggingface dataset:
Números Random en el Blockchain
Tags: blockchain, ethereum, chainlink, solidity
Published: 2021-06-16 01:26:17

---
title: Números Random en el Blockchain
published: true
description: 
tags: #blockchain, #ethereum, #chainlink, #solidity
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nv61wdvkh3pu1ssbymdc.png
---

{% youtube qSNA5ZVmhp4 %}

Los números random en el blockchain pueden ser útiles en muchos casos, por ejemplo en loterías, NTFs, asignación de recursos y deberes o en mecanismos de consenso.

Con ayuda del oráculo de Chainlink podemos interactuar obtener números random de manera segura en el blockchain.

1. Obtén Link en tu wallet por medio de un Exchange en el caso de un Mainnet o por medio de un Faucet en el caso de un Testnet.
  * [Faucet de Chainlink en Rinkeby](https://rinkeby.chain.link/)
  * [Faucet de Chainlink en Kovan](https://kovan.chain.link/)
  * [Faucet de Chainlink en Matic](https://faucet.matic.network/)
  * [Faucet de Chainlink en Binance Testnet](https://linkfaucet.protofire.io/bsctest)

2. Coloca los parámetros dependiendo del blockchain en el que te encuentres. [Aquí obtienes la lista completa de parámetros](https://docs.chain.link/docs/vrf-contracts/).

En este video haremos uso de los números rándom de Chainlink en Kovan Testnet. Obtendremos el valor del par ETH/USD.

```solidity
// SPDX-License-Identifier: MIT
pragma solidity 0.8.5;

import "https://github.com/smartcontractkit/chainlink/blob/develop/contracts/src/v0.8/dev/VRFConsumerBase.sol";

contract RandomNumberConsumer is VRFConsumerBase {

    bytes32 internal keyHash;
    uint256 internal fee;

    uint256 public randomResult;

    constructor() 
        VRFConsumerBase(
            0xb3dCcb4Cf7a26f6cf6B120Cf5A73875B7BBc655B, // VRF Coordinator
            0x01BE23585060835E02B77ef475b0Cc51aA1e0709  // LINK Token
        ) public
    {
        keyHash = 0x2ed0feb3e7fd2022120aa84fab1945545a9f2ffc9076fd6156fa96eaff4c1311;
        fee = 0.1 ether;
    }

    function getRandomNumber() public returns (bytes32 requestId) {
        require(LINK.balanceOf(address(this)) >= fee, "Not enough LINK - fill contract with faucet");
        return requestRandomness(keyHash, fee);
    }

    function fulfillRandomness(bytes32 requestId, uint256 randomness) internal override {
        randomResult = randomness;
    }
}
```

[Documentación oficial](https://docs.chain.link/docs/chainlink-vrf/)

**Gracias por ver este tutorial!**

Sígueme en dev.to y en [Youtube](https://www.youtube.com/channel/UCNRB4tgwp09z4391JRjEsRA) para todo lo relacionado al desarrollo en Blockchain en Español.
Day 1 of #100DaysOfSwift 
Tags: swift, ios, beginners
Published: 2021-06-16 01:10:15

Hello! I've made the decision to focus on becoming an iOS developer! To begin this journey, I am going to start by learning the swift language. I found this amazing resource Hacking with Swift created by Paul Hudson. I was scrolling through a discord channel where someone shared one of his videos. To make sure I get through the 100 days I want to document what I've learned for the day. 

Day 1: 
This was a refresher for me as I wanted to see what swift was all about via codecademy. Two things stood out to me: 

1. Multi-line strings: they can be used to do line breaks in your string or it can be used to make large codes of strings look neat and readable without having actual line breaks. To achieve this you can use a backslash after each line break. 

2. If I have a large number, swift allows me to use underscores to write out the value. Ex. var population = 8_000_000. 

Consistency is key for the next 99 days ! 

Until tomorrow!
How to create or draw a square using SVG in HTML?
Tags: html
Published: 2021-06-16 00:00:00

---
  title: How to create or draw a square using SVG in HTML?
  published: true
  tags: HTML5
  date: Wed Jun 16 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/create-square-svg-html
  cover_image: https://melvingeorge.me/_next/static/images/main-779678d8b31c13ccd7d8b4c28f2108b3.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/create-square-svg-html)
  
To create a square, you can use the `rect` element inside the `svg` element in HTML.

### TL;DR

```html
<!-- Create square in SVG -->
<svg>
  <rect x="0" y="0" width="30" height="30" />
</svg>
```

For example, to make a `30*30` (width and height) square, first we can define the `rect` element inside the `svg` element like this,

```html
<!-- Create square in SVG -->
<svg>
  <rect />
</svg>
```

But this alone wouldn't show anything on the screen since it doesn't know how to draw the square on the screen. For that we have to set some attributes on the `rect` element like:

- the `x` attribute, which tells where to start drawing in the `x-axis`. It is called the x-coordinate.
- the `y` attribute, which tells where to start drawing in the `y-axis`. It is called the y-coordinate.
- the `width` attribute, to define the width for the square in our case it is `30px`.
- the `height` attribute, to define the height for the square in our case it is `30px`.

So it may look like this,

```html
<!-- Create square in SVG -->
<svg>
  <rect x="0" y="0" width="30" height="30" />
</svg>
```

So in the end, we will have a square drawn to the screen like this,

![square svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6o0fskbvf1plb69o7x6.png)

And we have drawn a square successfully using SVG in HTML. Yay 🎊!

See the above code live in [JSBin](https://jsbin.com/muricanofi/2/edit?html,output).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Suddenly getting CORS errors in a .Net web application
Tags: csharp, dotnet, automapper, cors
Published: 2021-07-16 10:17:50

---
title: Suddenly getting CORS errors in a .Net web application
published: true
date: 2021-06-16 00:00:00 UTC
tags: csharp, dotnet, automapper, cors
canonical_url: https://stegriff.co.uk/upblog/suddenly-getting-cors-errors-in-a-net-web-application/
---

A call from my SPA to the .Net backend, that had been working fine, started going red in my browser DevTools 😱:

```
POST + Preflight | (failed) net::ERR_CONNECTION_REFUSED
```

I knew my CORS config hadn’t changed, and in fact the app is built with `appBuilder.UseCors(CorsOptions.AllowAll);`

While [Ducking](ddg.gg) around for a solution, I caught sight of a little comment on an SO answer, which said [“be aware that exceptions will CLEAN off any CORS headers set by the CORS middleware”](https://stackoverflow.com/questions/48458631/net-core-2-0-angular-5-allowing-cors#comment83921242_48458631).

I returned to VS, opened Exception settings, and **turned on _all_ CLR exceptions**. 

When I repeated the call into the API, whaddya know, **AutoMapper was throwing a silent error**.

After I fixed my mapping, the CORS error went away 😊

Happy hacking!
LEARN WEB DESIGN FOR FREE 
Tags: webdev, html, css
Published: 2021-06-15 23:54:07

Hello guys!!!
I've tried to bridge the gap between in coding/programming by producing videos teaching web designing on YouTube. Now unlike most YouTube videos, these videos follow a curriculum so that you can become a pro from novice. You'll even get certified! 
https://youtu.be/ijabRy-8TI4

Follow the channel above, that's all!
Don't Fail to subscribe.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip23h6irtqhtijrpwked.jpg)
Quality Attributes
Tags: tutorial, qualityattributes, nonfunctionalrequirements, architecture
Published: 2021-06-15 23:33:32

Currently this post has more than 150 views at medium which was reached within 10 days.

In this blog we are going to have a detailed discussion about quality attributes.

Introduction

Non-functional requirements has three categories as given below.
1. Quality attribute
2. Business or strategic decisions
3. Constraints

Quality Attributes

In the software development life cycle quality attributes play a major role in the design, implementation, and development phases.
Business requirements are fulfilled with the quality attributes.
They are testable to fulfil the user requirements and satisfy them. more... https://thavarajahpraveena.medium.com/quality-attributes-ae986c1d326c
Upgrading a Blazor WebAssembly Azure Static Web App from .NET 5 to .NET 6
Tags: azure, dotnet
Published: 2021-06-16 12:59:10

---
title: Upgrading a Blazor WebAssembly Azure Static Web App from .NET 5 to .NET 6
published: true
date: 2021-06-15 23:30:50 UTC
tags: azure, dotnet
canonical_url: https://www.daveabrock.com/2021/06/15/upgrade-blazor-static-app-net-5-net-6/
---

In the last year or so, I've been working on a Blazor WebAssembly project called [Blast Off with Blazor](https://www.daveabrock.com/tag/blast-off-blazor/). It's [a Blazor WebAssembly app](https://github.com/daveabrock/NASAImageOfDay) hosted on the Azure Static Web Apps service, [which recently went GA](https://www.daveabrock.com/2021/05/13/azure-static-web-apps-favorite-things/). Right now, it consists of four small projects: an Azure Functions API project, a project for the Blazor WebAssembly bits, a project to share models between the two, and a test project.

I wanted to see how easily I could upgrade the Blazor project from .NET 5 to .NET 6. With [.NET 6 now on Preview 4](https://devblogs.microsoft.com/dotnet/announcing-net-6-preview-4/), it's evolved enough where I'm ready for an upgrade. I was hoping I could double-click the project file, change my client and test projects from **net5.0** to **net6.0** , and be on my way. (I also know I was being very optimistic.)  

After upgrading the TFM, I was able to run the app successfully. Great. I started this app using .NET 5 and its mature API surface, so I didn't expect any issues there.  The interesting part is deploying it to Azure Static Web Apps. Azure Static Web Apps uses the Oryx build system and I wasn't too sure if it supported .NET 6 yet. It does, and it deployed to Azure Static Web Apps on the first try.

![](https://www.daveabrock.com/content/images/2021/06/oryx-60.png)

## What about upgrading Azure Functions to .NET 6?

Recently, the Azure Functions team [announced initial support of running Azure Functions on .NET 6](https://techcommunity.microsoft.com/t5/apps-on-azure/what-s-new-with-net-on-azure-functions-june-2021/ba-p/2428669). This _currently_ requires running a preview release of Azure Functions Core Tools V4. So, I could get this working locally but the support won't come to Azure Static Web Apps [until we get closer to .NET 6 GA in November 2021](https://twitter.com/nthonyChu/status/1404594114436370435). I'll upgrade it then. For me, I'd rather upgrade the Blazor project so I can take advantage of things like hot reload, AOT, and JSON serialization improvements.
Leetcode: Two Sum
Tags: javascript, algorithms, challenge, programming
Published: 2021-06-15 23:17:20

#Instructions
Given an array of integers: `num` and an integer: `target`, return *indices* of the two numbers such that they add up to `target`.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

You can return the answer in any order.
<br />
#What is Being Asked?
Write a function that takes two arguments:

1. an array of integers
2. an integer

Within the block scope, you need a way to iterate over the values of `nums` and add the current index value with each of the remaining indices. If the sum of the current index value and the comparison index value are equivalent to the `target` number, the function should return an array containing the position of both indices. If no conditionals equate to the `target` number, the function should return `false`.
<br />
#What Does That Look Like?
![Two Sum Whiteboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dqs6txm2l1jj6mp8puh.png)
<br />
#What Do I Need To Solve?
I chose a nested `for` loop in my solution to iterate over the input array: `nums`. The outer loop keeps track of the current index value and the inner loop compares the comparison index value(s). If the sum of the outer loop index value and the inner index value equal the `target` number, it then returns an array with both indices.
<br />
#Solution
![Two Sum Solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6ilpbd0g9oc2rc7vd4l.png)
![Two Sum Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jz3swm7eilwirsrn4js.png)
<br />
#Conclusion
Thank you for taking the time to read. It's with good intent that I share my approach in hopes that it adds a different perspective for anyone looking to get a better understanding of solving algorithmic challenges and building solutions with code. 

If that's the case, let me know! Give it a like, drop a comment or feel free to connect with me on Twitter @[ch2isk4kos](https://twitter.com/ch2isk4kos). I'm all about connecting with the community!
Create customizable components using React Props
Tags: codenewbie, react, webdev
Published: 2021-06-15 22:40:18

Let's learn how to create customizable components using props in React! We will be using [Semantic UI]("https://semantic-ui.com/views/card.html"), a CSS library for styling. For this example, we will be creating a group of horizontal cards. 

First, let's put this CDN link for the Semantic UI library inside the `index.html`.
```html
 <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />
```

Then, we will be creating a `Card.js` that includes the following below. Remember to insert `import React from 'react` at the top. The important parts are passing `props` into the parentheses so that you can pass in a prop in the curly brackets in between the elements. 

```javascript
const Card = (props) => {
  return (
    <div class="container">
      <div class="ui link cards">
        <div class="card">
          <div class="image">
            <img src={props.img} />
          </div>
          <div class="content">
            <a class="header">{props.author}</a>
            <div class="meta">
              <span class="date">{props.joinYear}</span>
            </div>
            <div class="description">{props.bio}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Card; 
```
In your `App.js`, include the following. You can name the prop names whatever you want, but just make sure to refer to the same ones in `Card.js`. Then you can set the prop names equal to various contents. Also, make you can upload your own images in an `assets` folder under the public folder to see the cards take up the full space. 
```javascript
import "./styles.css";
import React from "react";
import Card from "./Card";

export default function App() {
  return (
    <div className="container">
      <Card
        img="./assets/image1.jpg"
        author="Ivy"
        joinYear="Joined in 2021"
        bio="Ivy is a designer based in SF Bay."
      />
      <Card
        img="./assets/image2.jpg"
        author="Apricot"
        joinYear="Joined in 2021"
        bio="Apricot is a product manager based in Denver, CO"
      />
      <Card
        img="./assets/image3.jpg"
        author="Riley"
        joinYear="Joined in 2021"
        bio="Riley is a software engineer based in Seattle,"
      />
    </div>
  );
}
```
In the `styles.css`, we're gonna add the following styling for the container div so that there's space around the cards and some padding on the top and bottom to make the cards line up horizontally in the middle 
```css
.container {
  display: flex;
  justify-content: space-around;
  padding: 100px 0px 50px 0px
}
```
Now, your cards should look like this!
![example image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp5cc02uynrfx9q4xe3c.jpg)
If you want to see the full code for this example, see this [codesandbox]("https://codesandbox.io/s/react-props-practice-l9u74")!
Learn C# Programming with Me (Introduction)
Tags: csharp, dotnet, codenewbie, programming
Published: 2021-06-15 22:13:07

* What is C#?

C# is a general-purpose, strongly typed, object-oriented programming language developed by Microsoft in 2000.

Here are some of the advantages of learning C#:

Modern and easy
Fast and open source
Cross platform
Safe
Versatile
Evolving

* Why are you learning C#?

I'm personally learning C# because I'm very interested in learning more about object-oriented programming. I also like the way the language is versatile and I can pretty much build anything I want with it. You can build Native iOS and Android Application, Internet of Things (IOT) devices, Web Applications, Gaming applications, Backend Services etc.

* What projects are you planning on Building?

One of my first projects I'm trying to build is actually a Pokémon Console Application Game. I'm a big fan of Pokémon so I want my first project to be fun and enjoyable to learn Programming.

I do have some other ideas in the future using other technologies like .NET and even Xamarin. For right now I'm focusing on learning the fundamentals of C#

 * What resources are you using?

I'm actually following a video series on YouTube from Mike Dane (https://www.youtube.com/c/GiraffeAcademy/playlists) and also using the Microsoft Documentation as well.

* Will you be documenting you Journey?

Yes I will be writing short blogs on what I've learned and also giving updates on my projects 


References to Learn C#:

1. https://dotnet.microsoft.com/learn/csharp
2. https://www.codecademy.com/learn/learn-c-sharp/modules/learn-csharp-references
3. https://www.w3schools.com/cs/index.php
4. https://www.tutorialsteacher.com/csharp/csharp-tutorials
How to initialize a cloned yarn project
Tags: node, npm, javascript, webdev
Published: 2021-06-15 21:59:56

Being used to npm based projects for years, I encountered a yarn based one yesterday. I've read about yarn before, but never got the chance to work on it until now. So, I searched around to find the basics to get it working. I found it to be pretty similar to npm so far, with a few changes here and there. If you've cloned a project repo already setup with yarn, these are the general instructions to follow:

## For Yarn 1.x

Make sure yarn is installed globally:
```sh
npm install -g yarn
```

Then, move to project folder and upgrade to latest in yarn 1.x branch:
```sh
cd ~/path/to/project
yarn set version latest
```

Install the project dependencies:
```sh
yarn install
```

And the finally, **build and/or run the project**. Similar to npm based projects, you can check `package.json` file in the project folder and find the necessary commands listed there. Should be like `yarn build`, `yarn dev`, `yarn start`, `yarn serve`, etc.

Another interesting thing to keep in mind is, the yarn equivalents of `npm install --save` and `npm install --save-dev` are `yarn add` and `yarn add --dev`, respectively. I found it mentioned on the [documentation page of yarn install command](https://classic.yarnpkg.com/en/docs/cli/install/).

## For Yarn 2.x
Yarn 2.x is meant to be installed per project. So, follow the same steps as yarn 1.x described above, but just before `yarn set version latest`, run this:
```sh
yarn set version berry
```

Check if yarn is on version 2.x with:
```sh
yarn --version
```

Now, follow the same steps for 1.x. For more info, refer to [Yarn 2 docs](https://yarnpkg.com/getting-started/install#per-project-install).

## Downgrade from Yarn 2.x to 1.x
If you're like me and accidentally installed yarn 2.x on a 1.x based project 😅, don't worry! It's nothing a few commands can't fix. Run:

```sh
yarn set version classic
```

And then follow the steps described above for yarn 1.x. The [documentation page for yarn set version command](https://yarnpkg.com/cli/set/version) describes more ways to set specific versions.

## Credits & Sources
- [Yarn Documentation](https://yarnpkg.com/getting-started)
- Cover image from [Get Logo Vector](https://getlogovector.com/yarn-package-manager-logo-vector-svg/)
Funções (function)
Tags: javascript, functional, programming, webdev
Published: 2021-06-15 21:52:08

Função é um bloco de código ou subprogramas composto por uma sequencia de instruções que podem ser chamado por outros códigos.

Em javascript, funções são objetos de primeira classe, ou seja ela é tratada como qualquer outro valor como as variáveis. E pode ser definidas de 2 formas básicas:

### Function declaration
É a forma mais comum de definir uma função e segue a seguinte sintax
```js
    function name() {
        console.log('menu nome')
    }
```

### Function expression
Essa é a segunda forma de definir funções e segue a mesma sintax de declaração e inicialização de variáveis
```js
    const name = function() {
        console.log('Menu nome')
    }
```

A diferença básica entre as duas formas, é com relação ao hosting introduzido no javascript a partir no ES2015, onde o motor do javascript coloca as funções declaradas (function declaration) na memoria antes de qualquer outro código assim como faz com variáveis. É importante saber que isso só acontece com function declaration e não com function express.

>Hosting é uma definição estrita de elevação que sugere que as declarações de variáveis e funções são fisicamente movidas para o topo do seu código. Mas na pratica, no momento da compilação, as variáveis e funções são colocadas primeiro na memoria. É por isso que podemos chamar uma função mesmo antes de declara-la.

### Parâmetros e argumentos.
Uma característica essencial das funções é que todas podem receber parâmetros.
```js
    function showName(name) {
        console.log(name)
    }
```
Á variável "name" entre os colchetes é o parâmetro que essa função pode receber, se nenhum parâmetro for passado para a função, o javascript define esse parâmetro como "undefined"

Para utilizarmos o parâmetro basta chamarmos a função passando o argumento que queremos que o parâmetro receba
```js
    showName('carlos')
```

### Return
Uma característica importante das funções é que ela segue o escopo de bloco, portanto todos dado criada dentro da função só fica disponível dentro da função, por causa do escopo.
Para expor esse dado para fora da função é necessário utilizarmos o método de return, e assim conseguirmos obter os dados processados pela função.
```js
    function soma(a, b) {
        return a + b
    }
    
    const result = soma(2, 3)
```
Neste caso o resultado da soma de a + b processado pela função será retornada e guardada na variável result. E poderemos usar esse dado em outras partes do código.
Day 0 of #100DaysOfCode!
Tags: 100daysofcode, webdev, challenge, beginners
Published: 2021-06-15 21:39:26

<h3> Let the adventure begin </h3> 

Here I begin my #100DaysofCode challenge. I am excited to document and journal my journey on becoming a better front-end developer. 

I first heard the phrase <a href="https://www.100daysofcode.com/"> 100 days of Code </a> on <a href="https://www.codenewbie.org/">CodeNewbie </a> podcast. Thank you Saron Yitbarek! Once, I learned about it. I was amazed to find out the growing community of developers blogging about their coding journey and all of the success stories of how it made them become better developers and how it has helped them gained useful habits to learn new technology or keep their skills up to date. 

I figured if I wanted to become better at learning programming and gain some new habits. Then why not join in on the fun and blog my journey as well😁. 


For today's post I want to start off by creating goals of what I hope to gain from doing this challenge. This way, when I look back I will see what I have accomplished and need to continue working on. Overall, it will help me keep myself grounded and remind myself why i'm doing this. 

<h3> Goals </h3> 
<ul>
<li>code an hour a day</li>
<li>document what I coded</li>
<li>complete <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures">freeCodeCamp
</a>JavaScript</li>
<li>Be quicker to solve basic algorithms</li>
<li>read <a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/scope%20%26%20closures/ch1.md">You Don't Know JS</a> for 30 mins a day.
</ul>

I am determined to complete my goals and even if I don't end up completing all my goals. I'll be happy to have developed good habits and learn as much as I can about JavaScript. So here's to new challenges and a new journey!