teleren/devto huggingface dataset:
Creating a editable dynamic JSON table in React
Tags: react, javascript, programming
Published: 2021-07-21 04:26:54

<sup>This articles is part of a series, part 2 is [here](https://dev.to/sajrashid/creating-a-editable-dynamic-json-table-in-react-part-2-2em8)</sup>

A couple of years ago I created a dynamic JSON table, I always wanted to make it editable, yeah I can hear what your thinking..
So mid pandemic I get laid off. Great new jobs are at all time low.

While I'm on the hunt for a new role, wouldn't it be great to do that project I've had in the back of my mind .. hmmm.

Don't get me wrong, there a lot's of great tables out there, some need a tonne of boiler plate code other just don't have some of most basic feature you might expect.

So why not make one, tables are easy or should be, try adding sorting, filtering, paging and then make it editable, it's quite a challenge.

What I'd like to know is how many of you would be interested in a fairly detailed breakdown. I think it might be hard going for newcomers but for mid level developers, it could be good ?

## So what would we cover

* General overview (initial project setup)
* Reflection, Dynamic types, efficient inferring
* Managing complex state
* Detailed guide on how to use the reducer hook
* CRUD operations
* Jest - Testing Coverage, Unit, Snapshot
* NPM Publishing
* anything else you might want

Take a look at the [demo's and examples](https://react-dj-table.netlify.app/), [source](https://github.com/sajrashid/React-Dynamic-Json-Table),  drop me some feedback & I'm ready to write a series.

Bye for now.

## Update

>So the ask is to create an editable JSON table, what else?

* CSS agnostic, must be style-able with any library
* Output a ‘proper’ semantically correct HTML table
* Recognise and display correct types (bools, numbers, dates, strings)

Warning spec's ahead 🤨🤨🤨

### Developer defined options 

* Row Selection – return selected row
* Identity columns 
* Label columns – custom columns names 
* Icon columns – display font or SVG icons in the table headers 
* Hide columns 
* Date columns – configurable date formats with localisation
* Custom column cells – HTML/CSS, support images  
* Checkbox columns , show bools as checkboxes as default, or as 
string value, optionally
* Footer – display messages and any HTML/CSS
* Sortable 
* Pageable, client side pagination (for now)
* Filtering, basic if possible advance search
* Edit – smart pager, intuitive buttons, must guide the user

### Phase 2 Developer defined options

* Custom pagination
* Custom editor buttons
* Support for external filters on any column
* Server side paging
* Expose dispatch, call reducer actions
* Expose state

Much of phase 2 is available such as exposing dispatch

### Phase 3 Plugins TBD

* Add support for developer defined components and libraries, date pickers, etc.

Phase 3 is in a very early R&D state

now that we have the boring part out of way time to write some code...

<sup>This articles is part of a series, part 2 is [here](https://dev.to/sajrashid/creating-a-editable-dynamic-json-table-in-react-part-2-2em8)</sup>

👊👊👊
Deploying Docker container  on AWS EC2 instance
Tags: awsugjaipur
Published: 2021-07-21 04:22:55

The first step involves creating an AWS ec2 instance. The pre requisites for that is an AWS account. In this case, an AWS AMI was selected, but there is a wide range of servers available to select from.

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

The next step involves entering the server with the help of SSH connection and use the server. Setting up the server to install docker container and pull the docker image from the git repository.

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

The final step is to build the docker image and run the container. The final output can be check if the container is running and the the public DNS displays the page or not.

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

Thats all! A docker container set up on the AWS ec2 instance.
O início de uma jornada
Published: 2021-07-21 04:17:36

    Olá, meu nome e Werik, e sou o criador desse Blog. Criei esse blog com intuito de trazer aqui meus relatos sobre estudo de programação, além de toda minha evolução como profissional e estudante, talvez alguma evolução pessoal também quem sabe.

    Primeiro vou contar minha história com a tecnologia, bom eu sempre gostei de computadores,  primeiro contato com tecnologia que tive foi com um Playstation 1 do meu primo, gostei muito e era muito divertido jogar futebol nele, após alguns anos tive contato com o jogo Need For Speed Most Wanted no computador de um outro primo, e passei a gostar muito de jogos, meu irmão acabo comprando um computador para estudos, aqueles positivos, e ai as vezes jogava alguns jogos toscos que estavam em um cd de jogos, aquelas coletâneas com 100 jogos. 
    
    Com cerca de 12 anos eu fiz um curso básico de informática em Linux Metasys, perto dos 14 fiz outro curso de Montagem e Manutenção de Micros. Devido meu gosto por jogos digitais um dia pensei, como será que o jogo funciona por dentro, como é criado, acabei pesquisando um pouco e fiquei um ano brincando com a Unity e o Blender, na época ainda o Unity 4, mas não consegui nenhum rendimento disso afinal não sabia o que estava fazendo. Larguei um pouco de mão mas certo tempo depois tentei estudar programação, não consegui nada, até achei que não era pra min mas não desisti, me informei um pouco e resolvi fazer curso de Sistema da Informação pela UFV de Rio Paranaíba - MG, lá tive meu real contato com programação e lógica.
    
    C foi a primeira linguagem que realmente programei, fui péssimo nessa matéria e acabei reprovando devido a dificuldade que é essa linguagem, mas talvez não tenha me dedicado o suficiente não e mesmo. Bom eu sempre via propagandas de bootcamps da Rocketseat no Youtube e na Omnistack 10 resolvi participar, cheguei a participar de todos os dias, mas no ultimo eu acabei não terminando e projeto e acabei deixando isso de lado por um tempo, logo após participei da Next Level Week 1, aconteceu o mesmo, sempre acabava procrastinando muito e nunca terminava nada.
    
    Não me vejo fora da área de Tecnologia então resolvi me dedicar de verdade, consegui vários conteúdos da Rocketseat na internet e estou fazendo eles, comecei com a Oministack 9, mas e claro que ja tenho alguma base de HTML, CSS e JavaScript além de Lógica da Programação. Assim que tiver mais atualizações estaria as divulgando aqui, até mais.
TDD Conference 2021 - Opening Ceremony by Alex Bunardzic
Tags: tdd, codenewbie, webdev, programming
Published: 2021-07-21 03:43:11

First International Test Driven Development took place on July 10th. 

In this series, I will include every talk together with my notes and further reading.

Hopefully, a lot of readers will watch and rewatch the talks, as they are worth several reviews.

Let's start...

# Opening Ceremony by Alex Bunardzic

## Bio 

Alex is a software engineering veteran with over 30 years of hands-on professional experience. A staunch advocate of Extreme Programming and TDD, Alex is currently leading DevOps teams by coaching them in TDD practices. 

With a science background, Alex shows us how to build software by watching nature

> TL;DR: Setting the stage for the TDD revolution, how did it all begin and where are we today with TDD.

## Talk

[YouTube Link](https://www.youtube.com/watch?v=-_noEVCR__I)

# My Personal notes

- This is the first conference and the passing torch to younger generations of TDD enthusiasts.
- We discovered TDD several years ago thanks to Kent Beck.
- We evolved with James Grenning's [Zombies Formula](https://dev.to/mcsee/how-i-survived-the-zombie-apocalypse-59gj).
- Ron Jeffries' Never let the code not be working.
- And so on...

## Why TDD?

- TDD is not as easy to sell as clean code, agility, secure architectures.
- We will consider it, but there's no time now.

## TDD as a scientific method

- Based on positive enforcement and short feedback loops.
- Watching nature phenomena.
- Everything happens as a response to what happened earlier.

## The Four current problems when we try to plan

- Uncertainty
- Ambiguity
- Incompleteness
- Confusion

## TDD Breakthroughs

- TDD Removes non-productive code.
- Less Debugger time.
- No more manually run the app.
- No different manual test scenarios, credentials, navigation, configuration, environments, etc.

# Speaker Links

- Twitter [@alexbunardzic](https://twitter.com/alexbunardzic)
- Medium [@alex-bunardzic](https://medium.com/alex-bunardzic)
- LinkedIn [@alexbunardzic](https://www.linkedin.com/in/alexbunardzic)
- @alexbunardzic 

* * *

Please follow TDD Conference on:

- [YouTube](https://www.youtube.com/channel/UCKn-DadPoyYssfAOMk1LSew)
- [Twitter](https://twitter.com/tddconf)
Hola mundo! NFT
Tags: ethereum, blockchain, solidity, nft
Published: 2021-07-21 03:25:32

 ---
title: Hola mundo! NFT
published: true
description: 
tags: #ethereum, #blockchain, #solidity, #nft
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su06t6mnj7vtflq2hl1a.png
---

Esta es la manera mas sencilla de mintear tokens no fungibles NFTs (ERC 721) por medio de smart contracts. Usa este ejemplo únicamente como punto de partida, no como un proyecto final. Recuerda que solidity ofrece mucha flexibilidad para que podamos interactuar con los NFTs de maneras creativas. Así que experimenta creando tu propio contrato único y combínalo con el resto del ecosistema de Ethereum o cualquier otro blockchain.

{% youtube gSqt_BBWfAE %}

## Requerimientos

1. Tener [Metamask](https://metamask.io/) instalado
2. Tener fondos en Rinkeby Testnet, consíguelos en [este faucet](https://faucet.rinkeby.io/)

## 1. Subir nuestro JSON URI vía IPFS

Primero sube la imagen por medio de un uploader IPFS, te recomiendo este:

https://anarkrypto.github.io/upload-files-to-ipfs-from-browser-panel/public/

Una vez subida la imagen fíjate en el hash que se ha generado y crea un archivo JSON. Coloca el hash donde se indica `TUHASHAQUI` como en el ejemplo a continuación.

```solidity
{
    "name": "Mi NFT",
    "description": "Esta este es un ejemplo de descripción",
    "image": "https://ipfs.io/ipfs/TUHASHAQUI"
}
```

## 2. Lanzar el contrato en Rinkeby Testnet

Ahora crea un contrato en solidity e ingresa hash del archivo JSON en `TUHASHAQUI` como se indica a continuación. Puedes deployar este contrato via [Remix](https://remix.ethereum.org/).

```solidity
// contracts/GameItem.sol
// SPDX-License-Identifier: MIT
pragma solidity 0.8.6;

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

contract MyNFT is ERC721 {
    uint256 token_count;

    constructor() ERC721("My NFT", "MNFT") {}
    
    function tokenURI(uint256 tokenId) public view virtual override returns (string memory) {
        require(_exists(tokenId), "ERC721Metadata: URI query for nonexistent token");
        return "https://ipfs.io/ipfs/TUHASHAQUI";
    }

    function mintNFT(address to) public
    {
        token_count  += 1;
        _mint(to, token_count);
    }
}
```

## 3. Ver tu NFT

Ahora puedes lanzar el contrato en Rinkeby y mintear tokens. Luego podrás agregarlos o verlos en las versiones de Testnet de [OpenSea](https://testnets.opensea.io/) o [Rarible](https://rinkeby.rarible.com/).

**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.
Insomnia - transform Collection to Document.
Tags: tools, insomnia
Published: 2021-07-21 03:19:37

---
title: Insomnia - transform Collection to Document.
published: true
description: Insomnia - the case to transform Requests Collection to Design Document. 
tags: tools, insomnia
canonical_url: https://pplotka.dev/post/insomnia-transform-collection-to-document/
---

> This post comes from a series of short tips, where I publish brief stories on how I resolve every day small (and sometimes easy) issues.

Some time ago, Insomnia added a new type of project called Document Design. It allows you to group and share API specifications, requests, and unit tests in one application. 

The implementation of this change has brought forth the following result: there are now two types of workspace - **Design Document** and **Request Collection**. Having run the research, I discovered that the new features may be attractive for me and might improve my work with APIs. This has encouraged me to try a new type.

However, I came across one problem: how to transform one project type into another. A built-in feature is nowhere to be found. So, the first thing I did was create a ticket to support. The answer came in immediately (big thanks to Insomnia's support). Next, following the support’s suggestion, I created the [issue on Github](https://github.com/Kong/insomnia/discussions/3833). But…I needed solutions for that moment. Thus, I compared two import files and found certain differences, the result of which I‘m presenting the instructions below. 

When you have a project of Request Collection type in Insomnia and you’d like to transform it into Document Design type, you must follow these steps:

1. Export current project (Request Collection) with `Insomnia v4 JSON` format.
2. Remove this project from Insomnia.
3. Open the exported file in your favorite text editor. 
4. Find JSON section where parameter `_type` has value `workspace`.
5. Change the value of parameter `scope` from `collection` to `design`.
6. Import (go to **Application** -> **Preferences** -> **Data** -> **Import** -> **From File**) this document as the new project.
Explain setting up a Golang Dev Environment Like I'm Five
Tags: explainlikeimfive
Published: 2021-07-21 02:50:45

I *cannot* for the life of me find any consistent, standardized, up-to-date methodology or organization for starting, maintaining, or importing projects. 

* What's your dev environment look like? 
* What's your tooling look like? 
* What does your file structure look like? 
* Do you use a "main.go"?
* Do you have one master folder for *all* your go projects?

One of the biggest hindrances I've experienced trying to get into Golang is simply *starting to code*. 

Python is easy enough to set up and zombify scripts that serve my purpose

JavaScript is easy enough to incorporate into HTML. 

Node.JS is simple enough to get basic apps running/listening on port 3000. 

***Why is it so difficult (for me, at least) to get a simple golang project started?***

Here's where I'm at now: 

using Vagrant to host ubuntu 2004 locally, and using VSCode to SSH into it locally. 

I've got go bin installed (/usr/local/go)
I've got that location added to my $PATH. 
I have $GOPATH configured to `/home/vagrant/go`
I have `$GOPATH/bin` *also* added to my $PATH. 

structure of `/home/vagrant/go`

![file-structure-of-go-folder](https://shr.mort.cc/07KKl200a21.png)

Is there an "initiate" or "initialize" command within Go to create additional structure from here? 

If I end up using the `https://github.com/user/project-name` structure to build out my project, does that repository need to *already exist*? 

Is there any SOP's for this? any documentation I should read or community space I should involve myself in that discusses this kind of thing? 

Sorry, lot's of data and questions here, but jeeeeeze. I love the idea of Golang, and have attempted to start learning it several times, and each time, I get stuck at the stupidest part: setting up my dev environment. 

WHY!? (oh how I wish the Interrobang was a thing)
I need help finding a game development engine…
Tags: help, gamedev, programming
Published: 2021-07-21 02:11:19

So today, I thought I’d learned enough Java and C++ to make a simple showcase game in Unity. I even had 3D models I’d made to use! But little did I know, Unity’s “Hub” feature ruins the whole thing. The download for the editor always gets stuck at “installing”. Should I use Godot or Unreal Engine? Or should I use a different one? I really need help
Get Paid To Work On Open Source
Tags: typescript, opensource, functional
Published: 2021-07-21 01:37:35

---
title: Get Paid To Work On Open Source
published: true
description: Want to practice your TypeScript skills? Want to contribute to a project with half a million downloads? Then contribute to `neverthrow`!
tags: typescript, oss, fp
cover_image: https://images.unsplash.com/photo-1537498425277-c283d32ef9db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1357&q=80
---

> Cover: [Tianyi Ma](https://unsplash.com/photos/WiONHd_zYI4) (Unsplash)

Hey! I'm the maintainer of [`neverthrow`](github.com/supermacro/neverthrow); one of the more popular implementations of a `Result` type for the TypeScript ecosystem.

I am trying out a "bounty" program whereby **I pay you** to fix issues or implement new features.

### What Is `neverthrow` or a "`Result` Type"?!

For a gentle introduction about what a "`Result` type" even is, check out my blog post on [type-safe error handling in TypeScript](https://dev.to/_gdelgado/type-safe-error-handling-in-typescript-1p4n).

It's a small library, but dense with advanced concepts:

- Generics
- Functional programming and immutability
- Algebraic Data Types
- Mapped Types and advanced typescript black magic

Check out [the post on GitHub](https://github.com/supermacro/neverthrow/issues/314) for details on how to participate .
What is your bus factor?
Tags: busfactor, redundancy, team
Published: 2021-07-23 09:02:59

---
title: What is your bus factor?
published: true
date: 2021-07-21 00:00:00 UTC
tags: busfactor,redundancy,team
canonical_url: https://jhall.io/archive/2021/07/21/what-is-your-bus-factor/
---

You may have heard of [the bus factor](https://en.wikipedia.org/wiki/Bus_factor), which is loosely defined as:

> The minimum number of team members that, if hit by a bus\*, would cause your project to stall due to lack of knowledge or skills.

_\*or otherwise disappear from the team._

To make this more concrete, if Bob is the only one on the team with knowledge of the databases, then you have a bus factor of 1. One unlucky bus incident could render the team crippled.

If Bob trains Carlos on the database, then the bus factor for the database increases to 2, which is a good thing. [Rock stars](https://jhall.io/archive/2021/07/04/dont-be-a-rock-star/) lower your bus factor. Team players increase it.

In an ideal world, every team would have a bus factor of 2 or 3 (or more) for every piece of technology in use or skill needed.

What is your team’s bus factor? What prevents you from increasing it? Hit REPLY and let me know, if you don’t mind!

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to style HTML elements tags using any attributes in CSS?
Tags: css
Published: 2021-07-21 00:00:00

---
  title: How to style HTML elements tags using any attributes in CSS?
  published: true
  tags: CSS
  date: Wed Jul 21 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/style-html-element-tags-using-any-attributes-css
  cover_image: https://melvingeorge.me/_next/static/images/main-8580db73a1fb6d48a961d0f64c9ef467.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/style-html-element-tags-using-any-attributes-css)
  
To style HTML element tags using any attributes, you can use the `[]` (square brackets) and then write the name of the attribute you are targetting inside the square brackets in the CSS stylesheet.

For example, let's consider a `p` (paragraph) HTML element tag with a custom attribute called `data-number` with a value of `1`.

It will look like this in HTML,

```html
<!-- Paragraph tag with custom attribute of "data-number" -->
<p data-number="1">Hello World!</p>
```

Now to style the HTML element using the custom attribute you can use the square brackets and then write the name of the custom attribute with the value inside the square brackets in CSS.

Let change the text color of the paragraph to a `red` color.

It can be done like this,

```css
/* 
Style HTML element tag having 
the custom attribute of "data-number" and value of "1" 
*/
[data-number="1"] {
  color: red;
}
```

Now the paragraph tag's text color is changed to `red`.

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

## How to select HTML element tags using the custom attribute irrespective of the attribute value?

Let's now add another paragraph with the same custom attribute `data-number` but now the value of it is changed to `2` like this,

```html
<!-- Paragraph tags with custom attribute of "data-number" -->
<p data-number="1">Hello World!</p>
<p data-number="2">Hello Devs!</p>
```

Now if you look at the output you can see that only the first paragraph with `data-number="1"` has the text color changed to `red`. This is because we are strictly targeting elements with the custom attribute of `data-number` and the value of `1`.

Our aim here is to target all those elements those having the custom attribute `data-number`, to do that we can just omit the part after the `=` (equal sign) leaving only the name of the custom attribute inside the CSS.

It can be done like this,

```css
/* 
Style HTML element tag having 
the custom attribute of "data-number"
*/
[data-number] {
  color: red;
}
```

Now all the HTML element tags having the custom attribute of `data-number` text color are changed to `red` irrespective of the attribute's value.

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

That's all 😃!

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

---
Building a blockchain runtime module in Rust as Jr Dev
Tags: rust, blockchain, gamedev, beginners
Published: 2021-07-20 23:50:25

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

Here on the CENNZnet team, Our newest Junior Developer Jason decided to learn Rust by getting his hands dirty. 

He thought the best way to learn to build a runtime module for the blockchain CENNZnet, was to build the classic game of Snake. 

Runtime modules are the building blocks for CENNZnet. They are written in Rust for performance and security. CENNZnet provides runtime modules for commonly used functionalities in DApps(Decentralised Apps), then expose them through a JavaScript API for the ease of use.

While this Snake runtime module is unlikely to be useful for other DApp developers, it sure was a fruitful journey full of learnings.

This blockchain Snake game records the command and positions on the blockchain as transactions. Then the game reads these positions from the chain to display on the page.

Read the story [here](https://medium.com/centrality/blockchain-building-snake-runtime-modules-and-learning-rust-7048dc7f9431)!