teleren/devto huggingface dataset:
Hardhat bug fix with MetaMask due to chainId
Tags: blockchain, programming, web3, javascript
Published: 2022-07-10 22:29:30

## Fix

- This is a [Hardhat](https://hardhat.org/) error that originates because [MetaMask](https://metamask.io/) takes the default network and hardhat works with another network. Here is a sample of the [error](https://github.com/MetaMask/metamask-extension/issues/10290) and how to fix it.

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

## Config your hardhat.config.js file
- Manually add the `chaindId:1337` to avoid the conflict with MetaMask

e.g

```
require("@nomicfoundation/hardhat-toolbox");
// The next line is part of the sample project, you don't need it in your
// project. It imports a Hardhat task definition, that can be used for
// testing the frontend.
require("./tasks/faucet");
/** @type import('hardhat/config').HardhatUserConfig */
module.exports = {
  solidity: "0.8.9",
  networks: {
    hardhat: {
      chainId: 1337 // We set 1337 to make interacting with MetaMask simpler
    }
  }
};
```

## Boot up local development blockchain
```
$ npx hardhat node
```

## Connect development blockchain accounts to MetaMask

- Copy private key of the addresses and import to MetaMask
Connect your MetaMask to hardhat blockchain, network 127.0.0.1:8545.

- If you have not added hardhat to the list of networks on your MetaMask, open up a browser, click the fox icon, then click the top center drop down button that lists all the available networks then click add networks. A form should pop up. For the "Network Name" field enter "Hardhat". For the "New RPC URL" field enter "http://127.0.0.1:8545". For the chain ID enter "1337". Then click save.

## Migrate Smart Contracts
```
$ npx hardhat run src/contracts/scripts/deploy.js --network localhost
```

## Finally

- Once you have your test account on the hardhat node you will have 10000 ETH to deploy your contracts.


Happy coding!❤️
💫 contributions are appreciate..
ETH address: luislucena.eth
tw: [_luisald](https://twitter.com/_luisald)
¿QUÉ ES PAIR-PROGRAMMING?
Tags: pairprogramming, programming, productivity, spanish
Published: 2022-07-10 22:08:59

El método conocido como pair programming (en español, programación en pareja) 👬, trata sobre colaborar en conjunto con al menos una persona.

La idea es entrar a un canal de Discord, Slack, Meet o la aplicación de mensajería que deseen y hablar sobre alguna nueva feature, un bug a resolver o consultar algo.


## **💻 Hay varias dinámicas:**

1. Solo por voz, sin mostrar ni compartir nada o tal vez compartir código por privado y qué se comente sobre eso.

2. Una persona comparte pantalla para mostrar su código, pero también puede hacerlo más de uno/a aunque se vuelve engorroso tener varias. 🖥️

3. Entrar al canal, que cada quién haga su trabajo por separado, mientras pueden poner música tranquila y bajita de fondo, y cuando alguien tenga una duda pregunta y listo! Así es más sincrónico, hay compañía, musiquita. Esto es ideal para el trabajo remoto 🤗

4. Para aprender React, entraba a un canal de Discord, compartía pantalla, dejaba el micrófono abierto y de vez en cuando entraba gente a ver qué estaba haciendo y así me ayudó mucha gente a resolver cosas, enseñarme y yo enseñar. ¡Fue muy enriquecedor! ❤️


## **Algunas ventajas de hacer pair-programming:**

- Se practican las habilidades blandas como: comunicación, escucha activa, trabajo en equipo, se explican cosas por lo que hay que aprender a explicar mejor lo que estamos queriendo hacer en cuanto a Producto y en cuanto a lo técnico.

- Cuatro ojos son mejor que dos: al estar con alguien podemos verificar mejor la calidad de nuestro código, las buenas prácticas y demás. 👀

- Siempre se aprende o enseña un pequeño tip, por ejemplo: “¿sabías que en Visual Studio Code podés copiar toda la línea con CTRL + C sin necesidad de seleccionarla toda? Lo mismo para cortarla.” y así con mucho más. El intercambio de conocimiento enriquece a todos/as. 🤗

- Ayuda en días complicados: todos y todas tenemos días dónde tenemos la mente dispersa por diferentes motivos, el hacer algo en conjunto con alguien, nos da no solo un soporte técnico sino emocional para poder afrontar cualquier tipo de tarea, una pequeña o una compleja. 🧠

> No sientan vergüenza en pedir ayuda y menos en días que están dispersos/as o perdidos/as. 🤗



## **🥺 Desventajas:**

- Si se abusa de la técnica se puede perder autonomía, si no son concretos/as en las preguntas se puede perder mucho tiempo, puede ser abrumador si se utiliza en exceso ya que es estar hablando con alguien mucho tiempo. ⌛️

¡Prueben el pair-programing que les va a servir mucho! 😍

¿Ya hiciste? ¿Qué ventajas y desventajas le ven?
Microservice Architecture: Circuit Breakers
Tags: microservices, programming, webdev, systemdesign
Published: 2022-07-10 21:54:29

I have been working lately to implement some techniques regarding fault tolerance and chaos control in a microservice architecture. 

I got inspired to write this article after implementing these techniques and reading more about how Netflix utilizes these patterns as well.  



## Circuit Breakers 

It is a design pattern in the microservices world. It acts as a health check and availability controller. 

Assuming a system that has a lot of microservices involved. 
`Microservice A` calls `Microservice B` and for some reason `Service B` fails to respond due to network issues, logic faults, or availability. 

The client might keep requesting a particular action since it has no idea that `Microservice B` will not be able to fulfill this action. As a result, this will cause low performance to the whole system, provide a bad user experience, and it might also cascade the issue to other healthy microservices. 

The circuit breaker controls the flow of requests to the damaged microservice. 

It has 3 states: 
- Closed (Allowing requests to pass through).
- Open (Preventing the flow of requests). 
- Half-Open (Allowing a limited number of requests to pass 
through)

The behavior is very similar to how electric current flows in a circuit. 

In the closed state, the circuit breaker allows the flow of the requests to the microservices. At this state, the circuit breaker counts the amount of failed requests. When it reaches a specified threshold, the circuit breaker will change the state of the circuit to `Open`. 


In the open state, the circuit breaker prevents the flow of the requests to the microservice, sending back a proper error message to the client. After that state, the circuit breaker will change the state of the circuit to `Half-open` depending on the `Half-open time buffer`. 

In the Half-open state, the circuit breaker allows a limited number of requests to pass through. At the same time, it keeps track of how many of them are succeeding and failing. 

If the number of succeeded requests reaches a specific threshold, the Circuit breaker will close the circuit again to ensure the flow of the requests to the microservices.





There are some open-source frameworks that support the implementation of circuit breakers for nodeJs that I find very helpful.  

- [opossum](https://www.npmjs.com/package/opossum)
- [brakes](https://www.npmjs.com/package/brakes)
- [levee](https://www.npmjs.com/package/levee)


## Conclusion 

Using Circuit breakers is something that should be considered to help improve the fault tolerance of a microservice architecture. It also provides reliability and prevents the impacted damage to other microservices.
😱 DALL-E mini freakshow and 💌 to BoC 🎵
Tags: ai, music, art, machinelearning
Published: 2022-07-10 21:14:52

## ⚠️ WARNING ⚠️

Beware : discovering Boads of Canada universe may lead to high addiction to their music 🤣

## 🎵 About

This time I want to share with you my passion for an amazing music group called "Boards of Canada", a very famous group from WARP Records... and especially the album called [GEOGADDI](https://warp.net/releases/115874-boards-of-canada-geogaddi) :

{% twitter 1495701055690186754 %}

## 💡 The inception

There is a kind of tradition around BoC lovers which consists in remixing songs a different pitches and/or to put other videos on top of these psychedelic melodies.

As an example, this remix of ["In A Beautiful Place Out In The Country"](https://warp.net/releases/115791-boards-of-canada-in-a-beautiful-place-out-in-the-country) that uses a video from [archive.org](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqa09rN3ZVUVR0ckQzXzMxTFZHa0JOUXMxUE53Z3xBQ3Jtc0trMDNib0djOGF1bVRjVVFqd3hsNkg2UTNPdW0zaWFyZko5eWdJNmlUX2R6UWU0Y1dhMzd3Y2NPbHUwWUlXVGxTSExZbDdFRUF2dHpRTUZ2MEl1ZUtubDBtTWI3YVU1N05SSXNkMDNSSDJfTEFkN1RkMA&q=http%3A%2F%2Fwww.archive.org%2Fdetails%2FTheyCall1950&v=zVWcptE6UAI) : 

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

👉 So I decided to create my own.


## 📼 Create beautiful freaks with `craiyon`

Finally, here is my remix :

{% youtube CRKcAD1PiAk %}


## 📑 More about BoC

- [Boards of Canada homepage on WARP records](https://warp.net/artists/91407-boards-of-canada)
- [BoC on Youtube](https://www.youtube.com/user/boardsofcanada)
- [BoC on FB](https://www.facebook.com/boardsofcanada)
- [BoC on Instagram](https://www.instagram.com/boardsofcanada/)
- [WARP records on Instagram](https://www.instagram.com/warprecords/)
- [BoC fangroup on FB](https://www.facebook.com/groups/boardsofcanada) 😘

## 🎛️ Boards of Canada - Geogaddi (Full Album)

{% youtube vDkHR80rNtw %}

## 🔖 Selected Tracks

Below some remarkable tracks :

{% youtube 2jTg-q6Drt0 %}
{% youtube A2zKARkpDW4 %}
{% youtube dQEmaj9C6ko %}
Understanding Basic git Commands
Tags: github, git, opensource, prudyopensourceseries
Published: 2022-07-10 21:14:43



![Git Commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f74bmsndki896ipeaclv.jpeg)

---

**git status**

The Git Status is a tracker feature of Git. It basically highlights the status of your changes made in your working directory, it also shows the files that are being tracked by Git. You can also use **git diff** to clearly highlight the difference in changes.

↓↓

**git add .**

**git add .** is seen as the first command that tells Git to save a snapshot of the your project into the commit history. However, it does not really affect the repository in any significant way, it only tells Git that you want to include or add updates when you commit.


↓↓
**git commit -m " "**

Git commit takes a permanent snapshot of the current state of your repository. It "takes a modified file in your working directory and puts it in a staging area". A staging area contains files that are going to be a part of the next commit.


There's so much more...
Correct Subscription creation/update flow stripe checkout
Tags: stripe
Published: 2022-07-10 21:14:31

We have a free trial with no end date. The free trial is feature restricted.

There are 2 additional plans: 1) standard, 2) gold.

We only want to collect payment card details when the user upgrades to a paid plan. They can change plans at any time.

I’m looking for help understanding the flow for creating/updating the customer/subscription using stripe checkout. 

Questions: 
1) when should we create a stripe customer?

2) when should we create a stripe subscription… when they create a free trial account on our platform, or when they upgrade to a paid plan? 

3) do we create a new subscription, or do we utilize the same subscription and change the products/items when they go from trial -> standard -> gold? 

Thank you
React Hooks: creating a char counter component
Published: 2022-07-10 20:00:41

Hello fellow readers!

In this article I am going to show you how to build a simple char counter component that can be used anywhere, for example on a simple text input or even a text area!

The final result is the following:


![A text input that has a char counter next to it, showing the current text length and the max length. The counter becomes red once the current length is greater than the max one.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pqcz6kzztmisfl074us.gif)

## The char counter component

Let's start with this simple component. This is going to be a stateless component that just receives the current count and the total count.

```tsx
type CharCountProps = {
  current: number;
  total: number;
};

const CharCount = ({ current, total }: CharCountProps) => {
  return (
    <span style={{ color: current > total ? 'red' : 'black' }}>
      {`${current}/${total}`}
    </span>
  );
};
```

As you can see, I also applied a `color` style to change the text to red if the current count is greater than the total.
Now let's apply this component to a text input!

## Applying to a text input

We are now creating the text input that will hold the `CharCount` component.
To make it flexible, this custom input has a `maxLength` prop that tells us how many characters are allowed.
Also, our `CharCount` component is only going to render if this prop is different from `undefined`.

Note below that the input `onChange` handler updates the `value` state, which `length` property is used on `CharCount`.

```tsx
type CustomInputProps = {
  maxLength?: number;
};

const CustomInput = ({ maxLength }: CustomInputProps) => {
  // This state holds the input's text
  const [value, setValue] = useState<string>('');

  return (
    <fieldset>
     {/* Here is our input that is being watched */}
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.currentTarget.value)}
      />

      {/* The char counter only renders if the maxLength prop is provided */}
      {maxLength !== undefined && (
        /* The CharCount component receives the current string length and the max length supported for this field */
        <CharCount current={value.length} total={maxLength} />
      )}
    </fieldset>
  );
};
```

## Wrapping up

Lets now just create a `CustomInput` with a defined `maxLength`:

```tsx
export default function App() {
  return <CustomInput maxLength={10} />;
}
```

This renders an input with a char counter validation! You may now add some behavior, like alerting the user that the input content cannot be greater than the expected.

Here we used a simple `useState` hook to hold our input's data and pass it further to the `CharCount` stateless component.

You may find the complete code [clicking here.](https://stackblitz.com/edit/react-ts-sq7lr5)

That's it for now! I hope you all enjoyed it!
Feel free to use the comment section below to share your ideas!
Bun - Faster Javascript Runtime Than Node and Deno
Tags: bunjs, javascript, runtime
Published: 2022-07-29 09:23:55

---
title: Bun - Faster Javascript Runtime Than Node and Deno
published: true
date: 2022-07-10 19:31:00 UTC
tags: bun,javascript,runtime
canonical_url: https://blog.chekiprice.com/2022/07/bun-faster-javascript-runtime-than-node.html
---
  
  ![Bun Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pluvo9inibqorjqtg6iv.png)

[Bun](https://bun.sh/) is a new JavaScript runtime written from scratch that is faster than node and deno. Bun is still in its beta stages. Unlike node and deno which use the V8 engine bun uses the JavaScriptCore from WebKit which is generally faster and more memory efficient. Bun is written in [ZIG](https://ziglang.org/) which is a low programming language like Rust and C++.
  

Bun re-thinks the whole node package management structure of using _node\_modules_ to store all packages. You'll just need to use bun, Instead of 1,000 _node\_modules_ for development. 

  

## Bun Features

- Web API's such as fetch, WebSocket, and ReadableStream are build into Bun.
- Built from scratch JavaScript/TypeScript/JSX transpiler.
- A JavaScript & CSS bundler
- A Task runner for package.json scripts
- A package manager that is compatible with NPM.

## Getting started with Bun

To get start with bun you need to install bun using the bun install [script](https://bun.sh/install).

```
curl https://bun.sh/install | bash
```

In order to use **bun** command on terminal add the following environment to your .bashrc in_ $HOME/.bashrc. _

### $HOME/.bashrc 

```

...

  

# Bun environment variables

export BUN\_INSTALL=\"$bun\_install

export PATH=\"\$BUN\_INSTALL/bin:\$PATH

  

```

## Commands Overview

### Installing packages:

```
bun install
```

#### Add package:

```
bun add react
```

#### Remove package:

```
bun remove react
```

#### React App With Bun:

```

bun create react ./app

cd app

bun dev # start dev server

```

[Documentation](https://github.com/oven-sh/bun#using-bun-with-create-react-app)

#### Nextjs App with Bun:

```

bun create next ./app

cd app

bun dev # start dev server

```

[Documentation](https://github.com/oven-sh/bun#using-bun-with-nextjs)

  

## Benchmark Overview

On Linux, _bun install_ install's packages 20x - 100x faster compared to _npm install_. On macOS, it’s more like 4x - 80x.

  
![Bun image perfomance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bddt8ucsfdodrdw771jg.png)


## Conclusion

Bun is fairly new and i wouldn't recommend anyone to run it in production as its still experimental and bugs are expected. However the concepts are really solid. It feels like bun is trying to re-think the whole node ecosystem while bringing in backward compatibility of node packages. Would love to see what this [projects](https://github.com/oven-sh/bun) morph's to in the future.
Free Store API for developers to Practice Front End E-commerce Development
Tags: javascript, webdev, api, beginners
Published: 2022-07-10 23:31:44

---
title: Free Store API for developers to Practice Front End E-commerce Development
published: true
date: 2022-07-10 19:20:50 UTC
tags: javascript,webdev,api,beginners
canonical_url: https://balajidharma.medium.com/free-store-api-for-developers-to-practice-front-end-e-commerce-development-fcf5b75e4982
---

#### **Free Fake E-commerce API**

![](https://cdn-images-1.medium.com/max/1024/0*v1b5Jjag7e4SQRw7)
_Photo by Mike Petrucci on Unsplash_

[Continue reading on Medium](https://balajidharma.medium.com/free-store-api-for-developers-to-practice-front-end-e-commerce-development-fcf5b75e4982)

_Follow me at_ [**_balajidharma.medium.com_**](https://balajidharma.medium.com/).
Matching Fast Communities With Fast Options.
Tags: community, devrel
Published: 2022-07-10 19:04:59

Whether you're starting a new community or deliberately growing an established one, maintaining speed through the course of change is a critical skill for change management in communities. I'm going to share some tips about speed, because I keep repeating myself when I talk to clients that are setting up communities for the first time.

Communities are organisms that do whatever they please; control over them is illusory at best. When we concede that our function is that of a rudder, we can start to plan out the largest landscape possible for our community to exist mostly autonomously, where we're more agents of their chaos and co-conspirators than unilateral deciders of much.

Thinking about it - change management applies pretty solidly, if you think about the creation of a community as a change itself. Isn't _what platform should we use?_ a question that applies to a brand new community, or a fledgling one that outgrew its rompers? It's the same deal!

You have to ask these questions like you're asking your coworkers where you should eat for lunch. 

 - What might take an option totally off the table? GDPR or privacy issues are an example of what to consider here. There could be other internal show-stoppers. You'd have to steer discussions around these away very quickly.

 - What would the software approval process at your company be like for choice [x] [y] or [z]? Do they only take credit cards or do they invoice? How long will approval take once a decision is made? 

 - Will engineering be able to handle any domain / subdomain
/ setup / installation issues? Again - deal breakers need to be communicated quickly before people waste time planning them.

All of the questions above aren't one that a community-facing employee is likely to be able to answer without asking, and any one of the above examples could take a week and a few traded emails to get answered. 

Deciding on a platform is just one example. Others are more complex, like needing to overhaul your bug bounty program or plan a contest or hack-a-thon. It goes pretty far beyond what most reasonable people would think of as prepared.
 
When you talk to your community, you want to do it when you can speak in the active voice as soon as your community energy level is buzzing (where you have people's attention for a little while), so when they say "_We want to use [x] [y] and [zzz]_" you can do some math in your head and show them what's next, because you'll very likely already have all of the answers you need to feel confident in what's going on.

You never want to go from the height of enthusiasm to "I'll get back to you ASAP" if you can avoid it, because you'll have missed a rare moment to instill extra trust in what you're doing by how prepared you were to move forward. You also want to avoid cold starts with communities as they're super harmful to trust.

Just something I thought was worth sharing, since it doesn't seem to be common advice, despite seeming like it ought to be.