teleren/devto huggingface dataset:
Luos community is open!
Tags: luos, embedded, community, opensource
Published: 2021-11-04 07:54:23

📢 Hey fellow developers, the Luos Community is now open! Join it and discuss with other embedded developers searching for new open-source tools and methodologies to unleash embedded systems:

* Join the [Luos Slack Community](http://bit.ly/JoinLuosSlack)
* Join the [Luos Discord Community](http://bit.ly/JoinLuosDiscord)
* Join the [Luos Reddit Community](http://bit.ly/JoinLuosReddit)
* Join the [Luos Forum](http://bit.ly/JoinLuosForum)

Let's build the future of #embedded together 🤲

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqt9n26p2ap1ir1cvm9t.png)
File Upload in Next js or React js
Tags: react, javascript, beginners, nextjs
Published: 2021-11-04 07:49:33

Hey guys have you heard of Uploadcare .It is  a complete file uploading, processing and delivery platform built for developers from the future.It support Image optimisation object tagging,Size and type filtering,Video processing
and many other cool features.Check out [Uploadcare](https://uploadcare.com/)

As easy as file upload my sound to mid level or senior developer, junior developer still struggle to implement file upload without having to use the default input tag for file upload .In this tutorial we would learn how to implement file upload on a button click with next.js and Chakara UI.

##Step 1:

```
 <input type="file"
                  ref={hiddenFileInput}
                  onChange={handleChange}

                  accept="image/*"
                  style={{ display: 'none' }} />


<IconButton onClick={handleClick} size="xx-small" pos="absolute" zIndex="10" left="5px" bottom="5px"
 aria-label="file upload " icon={<BiCloudUpload />} />

```

##Step 2:
We have to create an input filed with a style display to none. This helps us hide the input tag.


```
  const hiddenFileInput = useRef(null);

  const handleChange = event => {

    if (event.target.files && event.target.files[0]) {
      const i = event.target.files[0];
      const body = new FormData();
      body.append("image", i);
     

    }
  };


  const handleClick = event => {
    hiddenFileInput.current.click();
  };

```

Using the react useRef hook  as a reference on the input tag we can  access the content of tag .

Calling the handleClick helps call a click event on the invisible input tag giving us the chances to pick a file for upload.


 The handleChange help to listern to change on the input tag. When handling file upload it is important to use FormData() if you intend to store on a server.

Thanks for reading .
Fun With Google Sheets And JavaScript
Tags: javascript, tutorial, programming, technology
Published: 2021-11-04 07:38:25

![](https://miro.medium.com/max/2000/1*k08Bkjh-I50t9F39yBMZuw.png)

Do you know about the hidden Gem of Google Sheets? Google Apps Script provides a Script editor that enables you to write custom JavaScript functions to create or modify a spreadsheet.

{% medium https://medium.com/@mariusbongarts11/fun-with-google-sheets-and-javascript-91a2b027ce92 %}
Building a Crypto Trading Platform
Tags: react, webdev, javascript, cryptocurrency
Published: 2021-11-04 07:26:57

 ---
title: Building a Crypto Trading Platform
published: true
description: Hello fellow humanoids. In this post we will build a Crypto Trading Platform in React. 
tags: React, webdev, javascript, cryptocurrency
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujdot2nl3k6kir6b54u8.jpg
---

## What is this post about ?
Hello fellow humanoids. Today we will build a Crypto trading platform in react. This tool will enable us to participate in Crypto trading and track your trades for learning purposes. 
Check out the app here : [Crypto trading platform](https://crypto-trading-platform-e379d.web.app/)

## Content
* How to fetch crypto currency coins ?
* How to add a trade ?
* How to do create portfolio ?

Lets go deep dive into each one and explore how it was implemented.

## How to fetch crypto currency coins ?
The data source for this tool will be coingecko. This list will be used to select coin for the current trade.  
{% gist https://gist.github.com/vigneshiyergithub/d480562f2fed184602e9a56861e5e623 %}

## How to add a trade ?
First we would select the coin, the information of coin will be displayed and we can proceed to select units and add the trade.
This addition should start reflecting in your portfolio holdings
![Add Trade - 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6owb7jthst4o7txgy5za.png)
![Add Trade - 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hye9h35jl293o4wcm72.png)
![Add Trade - 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v33ubu6tocgxouu3rf3l.png)
![Add Trade - 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmtmq5ew3iewmbqrn376.png)
![Add Trade - 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0og0lh8uuqmbg8kmcbd.png)

## How to do create portfolio ?
Portfolio gets created as we start adding trades. We also have the ability to remove a trade from our holdings. 
![Remove Trade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ia2if5zx1z6bvfp6fgc.png)

## Conclusion
This is a learning app and development is still in progress. Please feel free to fork the repo and make changes as you please. Do let me know if I made any grave blunders in coding this. Thanks for reading this post. 
Stay safe and lend a hand to another :) 

* [Vignesh Iyer](https://vigneshiyer.netlify.app/)
Responsive Button size✅
Tags: html, css, button, responsive
Published: 2021-11-04 07:11:02

⭐ In HTML, button tag is used to create tappable buttons on the web page. It is mostly used for navigation bar and submit purpose.

⭐ The button should be more responsive whether he/she using mobile phones, tablets, laptop or desktop. Otherwise it will be awkward.

⭐ For user experience, to create responsive buttons use min-height and min-width and set the value 40 pixels to 48 pixels perfect for fingers while using phone.

👉 Watch below video to get understand
https://youtu.be/ZNDWrXE1mH4

✍️Note: height and width property alone can be a little dangerous because it won’t allow the element to resize if the content inside of it is bigger than the container.
Display Current Git Branch on iTerm2
Tags: iterm2, mac, terminal, github
Published: 2021-11-04 07:10:32

As a Windows user, I generally use [Conemu Console](https://conemu.github.io) for my console and it has a sweet future in which you can see the current git branch on the terminal. After using Mac I wanted to see the same future on iTerm2. I found the way and I want to share it with you &#128578;

#### .zshrc file 
Firstly create and edit a .zshrc file that will use for terminal configuration.

```
touch ~/.zshrc; open ~/.zshrc
```

#### parse_git_branch
Customize your terminal whatever you want with this file. You can use the following bash code to display the git branch.

```
parse_git_branch() {
    git branch 2> /dev/null | sed -n -e 's/^\* \(.*\)/[\1]/p'
}
COLOR_DEF='%f'
COLOR_DIR='%F{197}'
COLOR_GIT='%F{39}'
NEWLINE=$'\n'
setopt PROMPT_SUBST
export PROMPT='${COLOR_DIR}%d ${COLOR_GIT}$(parse_git_branch)${COLOR_DEF}${NEWLINE}%% '
```

And that is it! Restart your terminal. You will see the current branch on your terminal &#128578;

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mj0nvp72sz3lam7yc3nv.png)
#### More customization
If you want more customization you can edit the **PROMPT** variable in the .zshrc file. For example, you can add your current computer user.
```
parse_git_branch() {
    git branch 2> /dev/null | sed -n -e 's/^\* \(.*\)/[\1]/p'
}
COLOR_DEF='%f'
COLOR_USR='%F{243}'
COLOR_DIR='%F{197}'
COLOR_GIT='%F{39}'
NEWLINE=$'\n'
setopt PROMPT_SUBST
export PROMPT='${COLOR_USR}%n@%M ${COLOR_DIR}%d ${COLOR_GIT}$(parse_git_branch)${COLOR_DEF}${NEWLINE}%% '
```

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

#### More color! 
If you want to change color, just edit the color code.
Change **COLOR_USR='%F{243}'** to **COLOR_USR='%F{229}'**

You can find the color code schema in the following image.

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

[Image Source](https://misc.flogisoft.com/bash/tip_colors_and_formatting)
AWS re:Invent 2021 - Community Track, BuildOn.AWS
Tags: aws, awsreinvent, devops
Published: 2021-11-04 07:04:12

AWS re:Invent is the biggest annual cloud conference hosted by Amazon Web Services in Las Vegas, join to learn and build.

####What to expect in AWS re:Invent 2021?
* Keynotes brings new product launches and success stories from customers
* From interactive small-group chalk talks to lecture-style breakout sessions, choose the learning methods that work for you.

####How to attend AWS re:Invent 2021?
AWS re:Invent 2021 is coming to you in two modes
1. In-person in Las Vegas
2. Virtual 

AWS re:Invent in-person attendees: session reserved seating is now available now.

#### Community Track
Check out the Community track, featuring six sessions Monday led by AWS Heroes! 

Filter to Tracks = Community (AWS) in the session catalog and reserve a seat Ballot box with check

https://portal.awsevents.com/events/reInvent2021/dashboard/event/sessions

![Community Track](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kd9vfrpnd9pe007rdge.jpeg)

And I am pretty excited to present as part of Community Track on **Enable continuous delivery and resiliency for a static website** and 3rd time in a row at AWS re:Invent. 

#### BuildOn AWS

Check out the BuildOn.AWS track, featuring 12 sessions from Monday to Friday led by AWS Experts! 

Filter to Tracks = BuildOn.AWS in the session catalog and reserve a seat Ballot box with check

https://portal.awsevents.com/events/reInvent2021/dashboard/event/sessions

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkp7iw3xobk6nv8e1q1k.jpeg)
I got the Github Copilot access
Tags: github, javascript, programming, git
Published: 2021-11-04 07:01:04

Recently I heard about GitHub Copilot and thought it would be amazing. <b> I was right </b>. I applied for the waiting list and got access recently. It is amazing experience so far.

## What is GitHub Copilot?

GitHub Copilot is the newest tool developed by GitHub to autocomplete code. It uses OpenAI for this purpose.

Copilot generates smart code suggestions with context, such as docstrings, code comments, function names, or even file names. It works with multiple languages like Python, JavaScript, TypeScript, Ruby and Go as well as dozens of other languages because it’s “trained on billions of lines of public code,” per the Copilot website. 

## Features

Copilot’s main feature is its autocomplete function. When typing a function description or comments,Copilot completes the whole function. User just have to press tab key to use the complete code.

#### For Example

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

I am using copilot in a project and it is saving my time by giving me valid suggestions.
For example when writing my <b>Action</b> it gives me whole suggestion and the suggestion was 100% right because I was going to write the same code.

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

### My Point of View
I think GitHub Copilot will change the way we code. It will make things lot easier for developers. It is a good asset for developers.
Azure Devops Basics Part-3 | CI-CD pipeline for web Api and unit test execution in pipeline
Published: 2022-07-05 10:47:18

---
title: Azure Devops Basics Part-3 | CI-CD pipeline for web Api and unit test execution in pipeline
published: true
date: 2021-11-04 06:47:06 UTC
tags: 
canonical_url: https://lkgforit.com/azure-devops-basics-part-3-or-ci-cd-pipeline-for-web-api-and-unit-test-execution-in-pipeline
---

# Azure Devops Basics Part-3 YouTube Video

[https://youtu.be/dGLWBWZavhw](https://youtu.be/dGLWBWZavhw)

## YAML Pipeline created in this session:

```
# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:

- task: DotNetCoreCLI@2
  displayName: Console app build
  inputs:
    command: 'build'
    projects: 'ConsoleAppTestBuild/ConsoleAppTestBuild/ConsoleAppTestBuild.csproj'
    arguments: 

- task: DotNetCoreCLI@2
  displayName: Web api app build
  inputs:
    command: 'build'
    projects: 'BasicWebapiUnitTest/BasicWebapiUnitTest/BasicWebapiUnitTest.csproj'

- task: DotNetCoreCLI@2
  displayName: Web api unit test build
  inputs:
    command: 'test'
    projects: 'BasicWebapiUnitTest/TestProjectBasicApi/TestProjectBasicApi.csproj'

```

All the code used in the demo in below repo:

[https://github.com/SSanjeevi/basicdevops](https://github.com/SSanjeevi/basicdevops)
KeePass 密碼管理器
Tags: keepass, password
Published: 2021-11-04 06:36:50

[KeePass](https://keepass.info) 是個自由的、開源的、多平台的、較適合個人用的密碼管理器。

## 密碼管理器

「為什麼要用密碼管理器？」

「和瀏覽器幫我存密碼的功能有什麼不一樣？」

早期最簡單也最不安全，卻也最多人管理密碼的方式，就是隨意貼，現在可能是變成瀏覽器幫我們存的密碼，不論是隨意貼還是瀏覽器存密碼，對需要認真保守密碼的人來說，都不是個好的做法。

隨意貼就不說了，除了隨意貼，另外一種稍微好一點的實體紀錄法是女孩們的小本本，小本本確實有做到保密的功能，但是無法備份，掉了就是永久掉了，除此之外還有抄寫時手誤的可能性，以及使用時無法複製貼上導致的效率低落，怎麼看都不會是個嚴肅的做法。

進階一點的會開檔案存，不論何種格式、有無加密，但都會有紀錄一多就難以管理的問題，必須自己手動做格式規劃與整理，其實這也可以算是一種陽春的、獨立的密碼管理器，對帳密不多的人來說確是個簡單有效的好選擇。

瀏覽器存密碼這塊，自從主流瀏覽器都導入這項功能後，的確解決了大多數人的需求，並且還附帶了可同步的特性，電腦存了手機也可以用，相當便利。這些主流瀏覽器（Safari、Firefox、Chrome、Edge）背後的大公司們看起來也都值得信賴（Google 可能有一點…不過不會賤到拿用戶的密碼[作惡](https://zh.wikipedia.org/wiki/不作惡)）。

不過在某些場景下，瀏覽器存密碼也是無法滿足的，最典型的就是台灣的網銀，台灣的網銀登入時往往需要四個欄位：身份證字號、帳號、密碼、驗證碼，而帳號與密碼兩欄在屬性上又都是密碼型態，也就是網銀的帳號、密碼這兩者實質上都是密碼，這種形式的登入不論是哪個瀏覽器都無法處理的很好，很容易造成瀏覽器誤判，最常見的情況就是記錯欄位或是記不住帳號／密碼兩者其一。最後，瀏覽器的記密碼功能還是過於單純，一律是帳號＋密碼的組合，像網銀這種有兩個密碼欄位的登入頁，瀏覽器即便沒記錯，也必定會少記另外一個。

還有另一種狀況，在瀏覽器以外的場景，即瀏覽器使不上力的地方，也是非常需要一個獨立的密碼管理器的，包括一些應用軟體的帳密、遊戲的帳密、遠端登入的帳密、金鑰型的認證等等，隨著這些數位應用越來越多的佔據我們的生活，一個人所擁有的帳密只會越來越多，另外在避免共用帳密的安全顧慮之下，一個獨立的密碼管理器確實是有必要的。

## KeePass 安全嗎？

接下來要問的就是「安全嗎？」

我們可以拆三個方面檢視 KeePass 的安全性，加密算法的安全性、開源的安全性、KeePass app 的安全性。

### 加密算法的安全性

我們在 KeePass app 內建立的每筆密碼都會彙整存在一個 kdbx 格式的檔案內，就好像 Excel 的每筆紀錄都會存在一個 xlsx 檔案內一樣。這個 kdbx 當然是加密的，根據 KeePass 的描述，它們會用 AES-256 或 ChaCha20 或 Twofish 三種加密算法對 kdbx 檔案進行加密，這三種算法也是目前業界公認最安全的算法。

### 開源的安全性

開源並不等於絕對的安全，但是自 KeePass 從 2004 年至今十六年的開源發展，已經經過相當長時間的考驗，另外 KeePass 開發團隊的每一行程式都詳實紀錄在版控系統內，可供查驗。

另外可以看看 CVE 的紀錄，只有四個漏洞，而且早已修復。

### KeePass app 的安全性

前面提過，密碼會被存到 kdbx 的檔案內，並且原生的 KeePass 並不具備雲端同步的機制（只有 FTP 的同步），即便 KeePass 有任何的漏洞，只要別人無法拿到 kdbx 檔案，就無法利用漏洞打開加密的 kdbx。

[KeePass 也有拿到一些國家證書](https://keepass.info/links.html#kp)證明自己的安全性。

## 安裝與使用 KeePass

到 KeePass 網站下載安裝後，我們來快轉到使用的部份。

起手式當然是先開新檔案，幫新的 kdbx 找一個安全的目錄並取一個好記的檔名存起來，然後設定 kdbx 檔案的密碼：

![KeePass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lv692hv0sfsgs62m91v.png)

除了密碼外，在下面的「Key file / provider」還可以指定一個鑰匙檔作為解密之用，密碼和鑰匙檔可以擇一使用或兩者皆用，兩者皆用的話這個 kdbx 檔案被開啟時就必須輸入密碼和鑰匙檔才可完整解密。

設定完 kdbx 的密碼後，下一頁的一些屬性設定可以直接 OK 跳過，然後會到主視窗，點擊某筆密碼或新增一筆密碼會跳出如下的對話框：

![KeePass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9edevig2p4v9kh6he88.png)

介面實在是滿簡單的，標題、用戶名稱、密碼、密碼強度提示、網址、備註等幾個欄位，有需要的填寫後即可存檔。在對話框的 Advanced 分頁可以在這筆紀錄內夾附檔，譬如說一些金鑰檔就可以夾帶在這裡。

逐筆把密碼記錄起來後記得要把這個 kdbx 檔案存檔，個人建議是異動一筆就存檔一次。另外未避免記錄時手誤，建議在每筆紀錄確認前先到那筆的網頁去驗證一次。

以上是使用介紹，因為真的滿簡單的，就不多做說明了。

## KeePass 不適用的情境

在本文的第一句話說到 KeePass 較適合個人使用，因為相較於組織型的密碼管理系統，KeePass 少了一些功能，可能對於組織的密碼管理幫不上忙，簡單列舉一些：

- 不能做分層分派，只要能打開 kdbx 的人員皆可看到全部的密碼，無法做分層分派，而往往組織用的密碼管理都是需要分層分派的。
- 不支援開啟人身份驗證，不論是 KeePass 現有的密碼或鑰匙檔都是屬於對密碼檔的解密驗證，欠缺了對開啟人的身份驗證，這部份往往需要結合作業系統的身份驗證機制，而 KeePass 是沒有這部份的功能的。
- 不支援更複雜的解密驗證，目前只有密碼與鑰匙檔兩種解密驗證，不支援晶片卡或硬體鑰匙做為解密驗證。
- 以本機檔案儲存 kdbx 密碼檔，對組織型密碼系統來說，可能需要非本機端的存取架構，也就是每次人員解鎖都是對中央伺服器做驗證，驗證後也都是從中央伺服器下載密碼到記憶體內，而不會在本機儲存實體檔案。

因為以上這些特性的缺乏所以還是比較建議拿 KeePass 來做個人用途較妥。

## KeePass 的跨平台兄弟

雖然 KeePass 本身是 Windows app，不過受益於開源的特性，在各個主流平台上都可以見到 KeePass 的兄弟 app 的身影，並且隨著 .net 也逐漸走向開源與跨平台的路線，KeePass 本身也具備跨平台使用的能力，在 KeePass 的下載頁可以看到 KeePass 與其它各個平台的兄弟 app，之所以稱為兄弟 app 是因為那些其它平台的 app 都不是 KeePass 的移植，而是參考 KeePass 與 kdbx 的規格而獨立撰寫的 app，其中各有優勢，唯一可以不用擔心的是我們的 kdbx 都可以在我們用的電腦或手機中使用，不用擔心被一個 app 綁住或是換平台要重建資料的困擾。
Angular 13 is released
Tags: angular, javascript, webdev
Published: 2021-11-04 06:31:24

Angular 13 is released!

What's  new:

- More Ivy = speed improvements
- Improved AFP - faster execution
- Easier dynamic component creation
- IE11 not supported
- build cache improves build time by almost 70%
- RxJS version update
- Faster and less memory intense unit tests

- Improved a11y for Angular Material
- support for inlining Adobe Fonts - faster apps
- Improved localization API
- Easier directives disabling
- And more

Release notes: https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

#angular #Javascript
JavaScript : 9 New Array Functions in ES6 JavaScript you must know

Tags: javascript, beginners, webdev
Published: 2021-11-04 06:24:30

JavaScript : 9 New Array Functions in ES6 JavaScript you must know
Explained about 9 New Array Functions in ES6.
Timeline :
-----------------------------------------------------------------------
00:07 Array.find() 
02:20 Array.findIndex()
03:23 Array.fill()
04:35 Array.from()
07:12 Array.copyWithIn()
10:27 Array.of()
11:51 Array.entries()
13:22 Array.keys()
13:47 Array.values()

{%youtube XPAe6V8gYww%}
¿Los NFTs dejarán obsoleto a Wall Street?
Tags: blockchain, defi, nfts, nft
Published: 2021-11-04 06:01:00

---
title: ¿Los NFTs dejarán obsoleto a Wall Street?
published: true
description: Fondos indexados en el blockchain
tags: blockchain, defi, nfts, nft
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk1scnesnz3lam0g4xl0.png
---

Los NFTs estan dándole un giro al arte moderno a través de las colecciones, juegos y smart contracts pero es questión de tiempo para que sean adoptados en bienes raices, licencias, tickets y otros bienes digitales o físicos. En este video veremos cómo pueden revolucionar los fondos indexados. ¿Qué son los fondos indexados? Son un mecanismo utilizado en finanzas tradicionales que nos ayudan a representar de un conjunto de bienes como si fuera uno solo. Los índices de NFTs son ideales para estrategias financieras pasivas y a largo plazo pues nos ayudan a quitarle complejidad al ecosistema DeFi. Adicionalmente, son fáciles de comprender y ayudán a ahorrar gas. A continuación crearemos un índice NFT de ETH y DAI en Polygon Ethereum Plasma.

{% youtube HJHdr9k8-Q4 %}

## Dependencias

Para este tutorial ocuparás [Metamask](https://metamask.io/) conectado con [Polygon Mainnet](https://docs.polygon.technology/docs/develop/metamask/config-polygon-on-metamask/). También ocuparás fondos en MATIC, DAI y WMATIC que puedes conseguir desde [Quickswap](https://quickswap.exchange/).

## El Smart Contract

Lanza este contrato y transfierele `0.3` WMATIC y `0.3` DAI. El contrato te dará 3 NFTs cargados con `0.1` WMATIC y DAI cada uno. Estos tokens son transferibles y quemables. Si el dueño decide quemarlos el contrato le transferirá el dinero que contiene cada NFT.

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

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract IndexNFT is ERC721 {
    ERC20 WMATIC_token  = ERC20(0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270);
    ERC20 DAI_token     = ERC20(0x8f3Cf7ad23Cd3CaDbD9735AFf958023239c6A063);
    
    uint WMATIC_Index_value = 0.1 ether;
    uint DAI_Index_value    = 0.1 ether;
    
    constructor() ERC721("My NFT", "MNFT")
    {
        _mint(msg.sender, 0);
        _mint(msg.sender, 1);
        _mint(msg.sender, 2);
    }
    
    function burnNFT(uint tokenId) public
    {
        require(ownerOf(tokenId) == msg.sender, "Sender must be owner");
        WMATIC_token.transfer(ownerOf(tokenId), WMATIC_Index_value);
        DAI_token.transfer(ownerOf(tokenId), DAI_Index_value);
        _burn(tokenId);
    }
}
```

**¡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.
Can you solve this interview problem?
Tags: programming, discuss, career, beginners
Published: 2021-11-04 05:29:04

So few days ago I applied to a MNC and I had some interesting problems to solve in given amount of time. So let me share one with you, see if you can solve this.

## Problem Description
So let's say we have a URL something like this:
```js
let url = "https://dev.to/0shuvo0"
```
Now they have converted the url to a base64 string.
So the URL have become something like this:
```js
let url = "aHR0cHM6Ly9kZXYudG8vMHNodXZvMA=="
```
Now what they did was split the sting to multiple parts and convert into an array
```js
let url = ["aHR0cH", "M6Ly9kZX", "YudG8vMHN", "odXZvMA=="]
```
But of course the madnesses doesn't stop here. Then the shuffled the array so it became something like this:
```js
let url = ["M6Ly9kZX", "aHR0cH", "odXZvMA==", "YudG8vMHN"]
```
And lastly they have converted that array to a string.
### So here is your input
```js
let url = `[ "6Ly9kZXYudG", "9jb21tZW5", "8vMHNodXZvMC", "aHR0cHM", "0LzFqZTFt" ]`
```
**Use the input to find the original URL programmatically** *you have 45 Minutes to do it.*

## Useful JavaScript functions that can help you
* You can convert your array to sting by calling **join** method on it. Eg.
```js
let urlStr = url.join("")
```

* You can use **atob** function to decode the base64 string.
```js
let decoded = atob(urlStr)
```

## Now go and and see if you can solve this. Best of luck 👍
{% user 0shuvo0 %}
## Was it useful? Support me on Patreon
[![Patreon Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twjftovyevtqht7v3ley.png)](https://www.patreon.com/0shuvo0)
Loops
Tags: beginners, programming, codenewbie, java
Published: 2021-11-04 05:14:35

> Computer science concepts in my lingo. 

## Iterate 
What makes computers useful is the ability to perform repetitive tasks. Repeatable conditions to do time and time again while something is true. 

```java 
int condition = 0;
do {
  System.out.println(condition);
  condition++;
}
while (condition < 5);
``` 
```java 
int condition = 0;
while (condition < 5) {
  System.out.println(condition);
  condition++;
}
```
### Self perpetuating machine 
Knowing what your looking for but do not know exactly how many times or possibilities exist while searching? No worries the collection length or size can realize the unknown to find what you are checking for. 

```java
int[] nums = {5, 10, 15, 20};
for (int iterator = 0; iterator < nums.length; iterator++) {
  System.out.println(iterator);
}

```
```java 
String[] people = {"Roy", "Gee", "Biv", "Mazza"};
for (String eachPerson : people) {
  System.out.println(eachPerson);
}
```

## Practical Use Case 
```java
  int[] trackGrades = {89, 93, 65, 68}; 

  int sum = 0; // the sum of all the grades

  for(int i = 0; i < trackGrades.length; i++) {
      sum = sum + trackGrades[i];  // add each grade to sum
    }

  int average = sum / trackGrades.length;

  System.out.println(average);
```
Portfolio Web App Development using React, Typescript and Chakra UI
Tags: react, typescript, webdev, portfolio
Published: 2021-11-04 05:04:45

Hi guys, I have started a new video series for portfolio web app development using #react #ChakraUI and #Typescript. I will be going to cover the storybook too. If anyone is interested in this series, they can find the links below:
  0. Introduction video: https://youtu.be/-dxHHNgO1dg
  1. Typescript overview video: https://youtu.be/_Kha2yBztWI

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