teleren/devto huggingface dataset:
How to: Bridge from ETH to Aurora using Rainbow Bridge
Tags: blockchain, web3, near, ethereum
Published: 2022-04-24 18:54:31

With all the hype around the NEAR protocol there are some key dapps that will help you join the ecosystem. One being Rainbow Bridge. As the name implies it allows you to bridge Ethereum tokens to either NEAR or Aurora. Aurora is NEARs EVM compatible layer 2 and in most cases this is where you will be bridging to.

###Prerequisites:
Metamask account
Ethereum for fees

###Why?
At this time there is not much happening on the NEAR mainnet. Aurora was developed in order to allow projects to easily fork over from Ethereum. As the majority of projects are being built on top of Aurora. You will need wrapped tokens in order to utilize the platform. This is where Rainbow Bridge comes in.

First you need to connect your Metamask account to the Aurora network. Head over to [Aurora](https://aurora.dev/start) and click the “Add network” icon in the bottom right corner and confirm the process in Metamask. You now have access to the Aurora blockchain!


![Add Aurora Network to Metamask](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zw8cq2jwpq9dtttmrnxu.png)

Next open the Rainbow Bridge dapp at [https://rainbowbridge.app/transfer](https://rainbowbridge.app/transfer) From here make sure you are on the “Bridge” tab and click connect. Metamask will open and verify that you want to interact with this dapp. Confirm and click continue.

![Rainbow Bridge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bu22yja5ww71bis9yyt.png)

You will be bridging between Ethereum and Aurora although you do have the option to bridge SUSHI and USDC as well. Enter an amount and continue.

NOTE* It is advised to do a test transaction with a small amount if this is your first try.

![Transfer Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlcx6ayjslqe8xfx3biw.png)

You now come to the confirmation screen. Here double check your address and amount. Click “Confirm Transfer”. Metamask will open to confirm the transaction. Review and confirm. You will then pay the applicable gas fee.

![Confirm amount screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdppiww2a7z37ybztw6v.png)

The next screen will show you the progress of your transaction and an estimate of how long it may take. Bridging is a time consuming process so be patient as it can take up to 15 minutes for the transaction to complete. 

Once complete, check your Metamask and make sure you are on the Aurora Network to confirm your bridged tokens are there.

Great, you have successfully bridged from Ethereum to the Aurora Network!. You can now participate in the NEAR ecosystem and take advantage of the low gas fees.
O que é Canva?
Tags: braziliandevs, trans, design
Published: 2022-04-24 18:51:12

[Canva](https://www.canva.com/) é uma plataforma que permite a criação e composição de imagens de maneira simples, podendo trabalhar com fotos, desenhos, gráficos, textos,etc. 

Além da simplicidade, o Canva é uma plataforma muito prática, pois podemos buscar todas as imagens que vamos usar na nossa composição dentro da própria plataforma, sem precisar ter que buscar esses recursos em outros buscadores.

## Como Acessar o Canva?

O Canva pode ser acessado totalmente pela Web, utilizando o site [canva.com](https://www.canva.com/)

## O Canva é pago?

Não, apenas existe um plano pago onde alguns recursos se tornam disponíveis, como programar *posts* e aumento de armazenamento. Mas é difícil que você realmente precise desse plano caso esteja começando.

## Como começar a utilizar o Canva?

Por padrão, essa é a inteface do Canva.

![Interface inicial do Canva, acesse a plataforma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6li7ppja6cytcrjdudoc.png)

Nela há algumas opções como ***Presentations*** (apresentações), ***Social Media*** (mídias sociais),etc. Nessas opções podemos escolher qual será o template da nossa imagem. 

Comece brincando com essas opções, e escolhendo alguma para começar, como por exemplo, ***Presentations***. 

Com isso, iremos ver uma série de tipos de apresentações que podemos criar:

![Interface do Canva com a lista de apresentações, acesse a plataforma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uo7nnqpkf0bdqktjyom2.png)

Como podemos ver, temos algumas opções de apresentações, como ***16:9***, ***Mobile First Presentation***, ***4:3***,etc. No caso, vamos escolher uma apresentação ***16:9***, mas pode ser qualquer uma. 

Com isso o editor irá aparecer, e poderemos escolher um modelo de apresentação para usarmos.

![Editor do canva com algumas apresentações, acesse a plataforma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6o1bnitkc5lsw6d2e8s.png)

Caso escolhermos uma apresentação, podemos aplicar página por página, ou também importar a apresentação inteira no nosso projeto clicando no botão ***Apply all 23 pages*** (aplicar as 23 páginas) 

![Botão para aplicar o template em todos os 23 slides](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8wvn1dulkbl3b5iee4v.png)

Com isso você pode começar a alterar essa apresentação, alterando o texto e inserindo formas, gráficos, imagens,etc.

Não vou abordar assuntos mais avançados pois o artigo ficarei muito longo. **MAS** caso você queira aprender mais sobre canva, fique de olhos nas minhas redes sociais!

Mas por enquanto, experimente o Canva em seus menus e opções, que você irá descobrir coisas muito legais.

## Finalização

Nesse artigo você aprendeu o básico sobre Canva, e como começar a editar uma apresentação.

Obrigada por ler ❤️🏳️‍⚧️
access child function from parent
Published: 2022-04-24 18:37:57

Hello friends
Imagine there is a component that have some functions and you want to access and do this functions from parent component
like this example , I have a stop watch component that I want to access reset , stop , play funtion from parent component
What should I do !!
go through the following steps
1- create ref variable
2- pass it to child component
3- wrap component with forwardRef
4- Put every function you want to access in the useImperativeHandle hook


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


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



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2wnaoz3m7kcd4e7nd2o.jpeg)
5 Useful TypeScript Features In VS Code
Tags: typescript, vscode, productivity, programming
Published: 2022-04-24 18:02:41

When you are programming you often do small repetitive tasks. You might be inserting delimiting characters in the right place or renaming variables. Here are five features in Visual Studio Code I find useful. They help with trivial chores and lets you focus on more important things.

## 1. Add missing properties
You have an interface and you need to populate an object with the fields. Use this code action to help with this tedious task. It works with types too.

`mac: command .`
`win: ctrl .`
![Add missing properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvnvalehfcbzbza3fuf3.gif)

---

## 2. Convert concatenated strings to template string
Template strings are easier to read. It's easy to forget a whitespace somewhere when concatenating strings. Get rid of them with this action.

`mac: command .`
`win: ctrl .`

![Convert to template string](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arufevzxsy6cnyv6nwdi.gif)

See there was a missing whitespace in there! 👀

---

## 3. Add braces to function
Sometimes you need to change something or add a line to a short arrow function. I always make some small mistake when doing this by hand. It's either one `{` too many or few but with this feature you don't have to worry about it.

`mac: command .`
`win: ctrl .`

![Add braces to function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffpibydy2q84rubw6xgs.gif)

---

## 4. Convert to named function
Can't decide between function and const? Neither can anyone else but switching between them is super simple.

`mac: command .`
`win: ctrl .`

![Convert to named function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uxxrgpnto9dpnt9wde5.gif)

---

## 5. Rename
Last but not least, renaming things is a simple task that you often do. A good habit is to use the built in rename feature. It will update the name in all places at once, including other files.

`mac: F2`
`win: F2`

![Rename](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xn5eemnr7yk6ibe0v20.gif)

---

## What's missing from this list?
Did you find this helpful? Do you think I missed something that every TypeScript VS Code user should know about?

Please feel free to comment with your suggestions! Thanks for reading.
手を動かしながら学ぶ TypeScript Part 2 -- 応用的な型
Tags: typescript
Published: 2022-04-24 18:01:01


## why

応用的な型も網羅して噛み砕きたくなった。
前回より応用的。

---

## 参考

手を動かしながら学ぶ TypeScript
by SmartHR
SECTION-025 TypeScript の型や構文の紹介
P.277 ~

https://www.amazon.co.jp/%E6%89%8B%E3%82%92%E5%8B%95%E3%81%8B%E3%81%97%E3%81%AA%E3%81%8C%E3%82%89%E5%AD%A6%E3%81%B6-TypeScript-%E6%B8%A1%E9%82%89%E6%AF%94%E5%91%82%E6%A8%B9-ebook/dp/B09KZJXDN1

---

## 目次

1. interface
2. type
3. class
4. abstract
5. union
6. never
7. assertion

---

## interface (extends)

```ts
interface Creature {
  id: string
}
interface Person extends Creature {
  name: string,
  power: number,
}

const kaede: Person = {
  id: '0902',
  name: 'kaede',
  power: 70,
}
```

id のみの Creature クラスを定義
それを継承して更に name, power を追加した Person
この Person を使うと、id, name, power の型を使える(必須)。

---

## type (&)

型エイリアス。interface とは違って `=` が必要。

```ts
type Creature = {
  id: string
}
type Person = Creature & {
  name: string,
  power: number,
}

const kaede: Person = {
  id: '0902',
  name: 'kaede',
  power: 70,
}
```

型エイリアスの type でも
interface の 

```ts
Person Extends Creature
```

と同じように

```ts
Person = Creature &
```

で Creature の継承ができた。

なお、先ほどの interface と変数名が同じなので、
同じ階層に先ほどのファイルがあると別名ファイルでも重複エラーになるので注意。

---

## Class

```ts
class Student {
  fullName: string

  constructor(firstName:string, lastName:string,) {
    this.fullName = firstName+lastName
  }
}

const Tanaka = new Student('Tanaka', 'Taro')

console.log(Tanaka.fullName);
```

class でも書ける。
fullName を外部からアクセスできる形で定義して
constructor のなかで計算させる。

継承して new で作り、fullName にアクセスすることができる。

> ts-node class.ts 
> TanakaTaro

実行すると fullName が返ってくる。

しかし、この状態だと lastName は private なので

```ts
console.log(Tanaka.lastName);
```

アクセスすると

> Property 'lastName' does not exist on type 'Student'

Student にはないというエラーが出る。

```ts
  constructor(firstName:string, public lastName:string,) {
    this.fullName = firstName+lastName
  }
```

だが、コンストラクタで定義するときに public をつけると

> ts-node class.ts
> TanakaTaro
> Taro

コンストラクタの中身でもアクセスできるようになる。

---

## abstracts/implements

用途不明

---

## Union

どちらかが入る型。
3 つ以上も作れる。
stringNullCheck が false の場合、
全ての型は undfined と null のユニオンになる。

```ts
type stringOrNumber =  string | number

const id = 1234
const userId = '1234'
```

---

## never

何も入らない。

```ts
let NoUser: never
NoUser = undefined
```

> Type 'undefined' is not assignable to type 'never'

undefined すらも入らない。

---

## 型アサーション

https://qiita.com/irico/items/9d71060e52ffc1e79962

```ts
let age = 12
const gender = 'male'
age = gender as any
console.log(age);
console.log(typeof age);
```

> ts-node assertion.ts
> male
> string

as any をつけることで
最初決めた型を変更して別の型の中身を入れられてしまう。


```ts
type teacher = {
  licenseId: string,
  licenseActiveYear: number,
} 
// const BadTeacher:teacher = {}
const NoLicenseTeacher = {} as teacher

console.log(NoLicenseTeacher);
```

> ts-node assertion.ts
> {}

また、このように必須のプロパティも無視して型を利用できてしまう。

BadTeacher のように、普通に teacher 型を利用して空で作成すれば
当然必須の型がないのでエラーになる。

しかし、NoLicenseTeacher では as で上書きしてるので teacher の型を使っていてもエラーが出ない！普通に 空オブジェクトで初期化できてしまう。

TypeScript の抜け穴。それがアサーション。
Managing State with React useContext
Tags: react, hooks, frontend
Published: 2022-04-24 17:52:12

This is a short post to explain how one can use React ``useContext`` hook to create global state variables, thus allowing for props to be passed onto different components easily and avoiding "prop-drilling".

### Set up Context file
* Create a context component using ``createContext`` 
```
import {createContext, useState} from 'react'

export const LoginContext = createContext({});
```
### Wrap components with ``Context.Provider``
* Wrap all components within ``LoginContext``. All components will have access to the LoginContext props.
* Note that the props are passed in using <strong>``{{double curly braces}}``<strong>.
```
import {LoginContext} from './Context'

export function App() {
  const [loggedIn, setLoggedIn] = useState(false)
  
  return(
    <LoginContext.Provider value={{loggedIn, setLoggedIn}}>
       <Home />
       <Login />
       <Profile />
    </LoginContext.Provider>
  )
}
```
### Passing props to components
* Pass ``loggedIn`` and ``setLoggedIn`` to ``Login`` component
* Login component can access the props from LoginContext through ``useContext``
* Note the use of ``{curly braces}`` instead of ``[square brackets]`` for props destructuring.
```
import {LoginContext} from '../Context';
import React, {useContext} from 'react';

export const Login = () => {
   const {loggedIn, setLoggedIn} = useContext(LoginContext);
   
   return (
      <div>
         <button onClick={() => setLoggedIn(!loggedIn)}>Click 
           here to login
         </button>
         {loggedIn? <h1>You are logged in</h1>: <h1>You are 
         not logged in</h1>}
      </div> 
   )
}
```
New root API in React 18
Tags: react, webdev, javascript, programming
Published: 2022-04-24 17:35:30

## New root API in React 18

React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.

```
ReactDOM.createRoot
```
Let's take a look at how things are before using root API.
If you look at your index.js. we render our App component into the root element on the page.

```javascript
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode><App /></StrictMode>
);
```
This API (now call "legacy root API) has some issues when running updates. We will have to pass the **rootElement **into the render every time, even if it does not change.

To fix this issue and bring some other improvements, React 18 introduced a new root API.

### React 18 Root API
With this new API we don't have to pass the **rootElement **into the render.

```javascript
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```
###Callback and Hydrate functions

This new root API removed the callback from render, since it usually does not have the expected result when using Suspense:

```javascript
// Before
const container = document.getElementById('app');
render(<App tab="home" />, container, () => {
  console.log('rendered');
});

// After
function AppWithCallbackAfterRender() {
  useEffect(() => {
    console.log('rendered');
  });

  return <App tab="home" />
}

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<AppWithCallbackAfterRender />);
```
Finally, if your app uses server-side rendering with hydration, upgrade hydrate to hydrateRoot:

```javascript
// Before
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(<App tab="home" />, container);

// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, <App tab="home" />);
// Unlike with createRoot, you don't need a separate root.render() call here.
```
When you first install React 18, you will see a warning in the console:

```
ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
```
Source: [reactjs.org](https://reactjs.org/link/switch-to-createroot)
Life and React
Tags: react, javascript, mentalhealth, beginners
Published: 2022-04-24 17:24:27

So it's been a while since my first post. Although I've been quiet here quite a lot has gone on irl. Some travelling, some language learning and ofc some coding. Since my brain has still been on depression-mode I haven't studied as much as I would've wanted to, but hey at least I haven't quit! I do have quite a few things on my plate now and I'm also trying to get back into social life like a normal human being, so I am not gonna be too harsh on not learning as fast as some others.
Anyway so after learning basic front end development last year for 4 months I decided that it's time to learn React.. Yeah.. 30% in to my react course I'm realizing I should've taken a few more JS courses before doing that but oh well :D I do have two of them waiting in line after I finish with react, because it feels weird to stop now with react to do those.. Maybe it's just my brain.
So here I am struggling a little bit again, trying to fight the thoughts that I will never fully understand coding, but my motivation is still here!
Still going strong, bye.
Last Write Wins - A Conflict resolution strategy
Tags: database, computerscience, algorithms
Published: 2022-04-24 17:16:59

Imagine, a file or database is written concurrently by 3 processes.

Eventhough from the user point of view where all the file write processeses happen at the same time, but that doesn't mean all three can co exist in the same file or database field right?

It will break consistency.

So, we need to make sure only the last written data as the final data for the file, in a given time.

How do we consider which data is the last data?

Timestamp of course!

Timestamp is used for each write operation to identify which write is the final write.

MongoDB and Cassandra are examples of having Last Write Wins Strategy.

More importantly in Cassandra if we are quering an update, each column has its own timestamp value.

Hope you guys find usefull

#Support us by [Buying us some Cookies](https://www.buymeacoffee.com/dogealgo)

#Visit our site [Doge Algo](dogealgo.netlify.app)
Unit Testing
Tags: javascript, programming, react, productivity
Published: 2022-04-24 17:12:01

Unit testing still causes controversy among developers and product managers. There are both opponents and supporters of this kind of testing. In this article, I’ll highlight the main advantages of unit testing.
What are unit tests, why unit testing is essential, and how do they help developers and business owners? For the answers to these questions and more, read on.
Let’s start with the definition: Unit testing is a software testing method where “units”—the individual components of software—are tested. Developers write unit tests for their code to ensure that the code works correctly. This helps to detect and protect against bugs in the future.
Sometimes developers write unit tests first, then write the code. This approach is also known as test-driven development (TDD). In TDD, requirements are turned into specific test cases; then, the software is improved to pass the new tests. No code is added that hasn’t been proven to meet defined requirements in this approach. Unit testing is similar in that it allows developers to modify code without affecting the functionality of other units or the product as a whole.
Unit tests are usually written in the form of functions and check the value and behaviour of these functions in various scenarios. For example, imagine a function for dividing two numbers: the developer decides to follow the TDD approach, first writing a test with the input of values ‘4’ and ‘2’ (4 divided by 2) with ‘2’ expected as a result. Another example is that when the divisor is zero, we don’t expect that the function will produce a value—we hope it will generate an exception.
Quick Tip: always include a type on your buttons
Tags: html, beginners
Published: 2022-04-24 16:56:05

---
title: Quick Tip: always include a type on your buttons
published: true
description: Did you know the default `type` value on a `button` element *isn’t* “button?” 
tags: html, beginners
//cover_image: https://direct_url_to_image.jpg
---
Did you know the default `type` value on a `button` element *isn’t* “button?” 

To step back for a moment, the `button` element was introduced as part of HTML 4 specification in the late 90s—it’s been with us awhile. Previously, if you wanted a submit button on a form, you would use an `input` with a `type="submit"`

```html
<input type="submit" value="Submit the form">
```

Increasingly, the button does more than just submit or reset form values. It opens dialogs! Navigates slideshows! All of our favorite things! 

The modern `button` element carries over many of the attributes of the original `input` spec, including a `type` that defines the button’s behavior. 

`type` takes three possible values, all of which are fairly self-evident. To quote the [HTML Standard spec](https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element): 

- `submit` - “submits the form”
- `reset` - “resets the form”
- `button` - “does nothing”

This is great for a number of reasons, especially because it makes it very clear to you or whoever has to read your code after you *exactly* what this button does.

The tricky part comes from when the `type` *isn’t* set. If we have a button element without a type (`<button>My Sample Button</button>`) or a button with an invalid type value `<button type="resete">My Sample Button with mispelled "type"</button>`, the state defaults to `submit` *not* `button`. 

(except in Internet Explorer, because IE always has to do its own thing)

This is an easy step to miss, and depending on your project, might not cause any obvious issues. Or it could cause *very* obvious issues.

For example, let’s say you’re building a form and it calls for a dialog with more information. You may put a button trigger for that dialog. If you don’t include a `type` on that button, clicking that button will submit the form before the user’s ready! Here’s an [extremely basic codepen](https://codepen.io/heyitsstacey/pen/popmvZz) example.

The lesson here, then, is always assign a value to your `type`. It makes your code valid, readable, and saves your users headaches.